CODEWITHSUNDEEP
javascripthtml
user4966454
user4966454

Reputation:

Images display as broken Javascript

I'm testing out a script found here

Show images one after one after some interval of time

I don't get any errors, and it rotates the images but the images simply appear as little broken squares, which I'm assuming is the broken image icon.

I'm using google chrome, and on MAC, running mavericks. Also, all the files are on a user.local(server/host) page I created, so if I go into the directory structure in my browser, and I click on the images the images show just fine. It is only when I try to load the .html file that they appear broken. I've also tried loading images with PHP and I get the same broken image icon.

This is what I mean when I say all the files are my local computer as a server/host:

enter image description here

Anyone know why this is happening and how to fix it?

This is the script I'm using: 

var current = 0;
var rotator_obj = null;

var images_array = new Array();
images_array[0] = "rotator_1";
images_array[1] = "rotator_2";
images_array[2] = "rotator_3";

var rotate_them = setInterval(function(){rotating()},4000);

function rotating(){

    rotator_obj = document.getElementById(images_array[current]);

    if(current != 0) {

        var rotator_obj_pass = document.getElementById(images_array[current-1]);
        rotator_obj_pass.style.left = "-320px";

    }
    else {

        rotator_obj.style.left = "-320px";

    }

    var slideit = setInterval(function(){change_position(rotator_obj)},30);

    current++;

    if (current == images_array.length+1) {

        var rotator_obj_passed = document.getElementById(images_array[current-2]);
        rotator_obj_passed.style.left = "-320px";
        current = 0;
        rotating();

    }

}

function change_position(rotator_obj, type) {

    var intleft = parseInt(rotator_obj.style.left);

    if (intleft != 0) {

        rotator_obj.style.left = intleft + 32 + "px";

    }
    else if (intleft == 0) {

        clearInterval(slideit);

    }

}


</script>

<style>

#rotate_outer {

    position: absolute;
    top: 50%;
    left: 50%;
    width: 320px;
    height: 240px;
    margin-top: -120px;
    margin-left: -160px;
    overflow: hidden;

}

#rotate_outer img {

    position: absolute;
    top: 0px;
    left: 0px;

}

</style>

<html>
<head>
</head>
<body onload="rotating();">

<div id="rotate_outer">
    <img src="images/owl.png" id="rotator_1"  style="left: -320px;" />
    <img src="images/bee.png" id="rotator_2"  style="left: -320px;" />
    <img src="images/owl.png" id="rotator_3"  style="left: -320px;" />
</div>
</body>
</html>

Upvotes: 1

Views: 813

Answers (1)

Elentriel
Elentriel

Reputation: 1237

This sounds like a bad url in the src attribute of the image. right click the broken image icon and inspect it (most, if not all browsers support this) and see where the url leads.

Fixing url, try one of the following:

Try adding a / in front of your image links

Try including the full path on the image including the http, also you can try excluding the http and writing //yourwebsite.com/images/foo.jpg instead and see if that fixes things.

If you work on some framework there is bound to be a base url variable which you can use instead of manually writing the url

Upvotes: 1

Related Questions