CODEWITHSUNDEEP
javascriptimage
tintincutes
tintincutes

Reputation: 5796

javascript changing images

Hello I would like to ask your help regarding javascript code, how do I have this work?

I have saved the images in my D drive. Do I need to change some path here:

Thanks 

<html>
<head>
<script type="text/javascript">

<!--
var image1=new Image()
image1.src="pic001.png"
var image2=new Image()
image2.src="pic002.png"
var image3=new Image()
image3.src="pic003.png"
//-->
</script>
</head>

<body onLoad="slidit()">
<img src="pic001.png" name="slide" width="400" height="120" />


<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("images"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 1 seconds
setTimeout("slideit()",1000)
}
slideit()
//-->
</script>

</body>


</html>

Upvotes: 0

Views: 5554

Answers (2)

Harry Joy
Harry Joy

Reputation: 59694

I have saved the images in my D drive. Do I need to change some path here

Why give static/absolute path? Use relative path in your webapp. And if you are just practicing with single HTML then just put all the images in same folder in which HTML resides.

Relative Path

It means the file path to where the image is located "relative" to the HTML page. In other words you determine the path to the image with the HTML page as the starting point. For example:-

<img src="../images/img.jpg" />

Absolute Path

Absolute paths are a different than Relative paths in that it doesn't matter where the image files are located relative to your web pages. This is because you tell the browser exactly where the file is on the web.Example:-

<img src=" D/Web/pic001.png" />

See this for more help.

In your code following is the code where you use image path:

var image1=new Image()
image1.src="pic001.png"
var image2=new Image()
image2.src="pic002.png"
var image3=new Image()
image3.src="pic003.png"

Update:-

Because your html and images are in same folder you should write like this:

<script type="text/javascript">

<!--
var image1=new Image()
image1.src="pic001.png"
var image2=new Image()
image2.src="pic002.png"
var image3=new Image()
image3.src="pic003.png"
//-->
</script>

My demo working code:

<html>
    <head>
        <script type="text/javascript">
            var image1 = "./images/img02.jpg"
            var image2 = "./images/img03.jpg"
            var image3 = "./images/img04.jpg"
        </script>
    </head>
    <body onLoad="slidit()">
        <form name="images">
            <img src="./images/img01.jpg" name="slide" width="200" height="200" />
            <script>
                //variable that will increment through the images
                var step = 1
                function slideit(){
                    //if browser does not support the image object, exit.
                    switch(step){
                        case 1:
                            document.images.slide.src = image1;
                            break;
                        case 2:
                            document.images.slide.src = image2;
                            break;
                        case 3:
                            document.images.slide.src = image3;
                            break;
                    }
                    if (step < 3) {
                        step++
                    }
                    else {
                        step = 1
                    }
                    //call function "slideit()" every 1 seconds
                    setTimeout("slideit()", 1000)
                }

                slideit()
            </script>
        </form>
    </body>
</html>

Above is my demo code which is working fine. I have made some changes in your code it will now change image on interval. I hope this is what you want. You have to change image path as you used in your code other things are okay and ready to go.

Upvotes: 3

Shamim Hafiz - MSFT
Shamim Hafiz - MSFT

Reputation: 22124

It's not a good practice to add absolute paths in your JavaScript. It is better to locate them in folders containing your root page. From there on, use relative paths.

Upvotes: 0

Related Questions