How do i change images every 5 seconds on my web page? I have tried something but the first image is getting displayed but the rest of the images r not and i have used update panel and timer

Recommended Answers

All 7 Replies

Use JavaScipt. In the HEAD section in your HTML:

<script src="js/nameofjavascript.js" type="text/javascript"></script>

In the BODY section, place an IMG element with the name tag set to for example "slide", likte this:

<img src="picture1.png" name="slide" width="800" height="200" />

Example JavaScript:

    var image1 = new Image()
    image1.src = "picture1.png"

    var image2 = new Image()
    image2.src = "picture2.png"

    var image3 = new Image()
    image3.src = "picture3.png"
    var step = 1
    function slideit() {
        document.images["slide"].src = eval("picture" + step + ".src")
        if (step < 3)
            step++
        else
            step = 1
        setTimeout("slideit()", 5000)
    }
    slideit()

I dont understand... where should i type the fuction and those declaration lines??? :(

It goes in the javascript, which I refered to in the HTML as js/nameofjavascript.js.

You mentioned that you have used update panel and timer but the javascript that was recommneded by Sugmuffen may be less complicated than trying to use asp.net controls.

Are you familiar/experienced with Javascript?

No . Thats the reason i still am not getting wer tat javascript has to go :(

You can put the .js file and .html file in the same directory if you want. In my example I used

<script src="js/nameofjavascript.js" type="text/javascript"></script>

This means that the nameofjavascript.js file resides in a sub-directory called js. If you instead use

<script src="nameofjavascript.js" type="text/javascript"></script>

then the javascript file nameofjavascript has to be placed in the same directory as your .html file.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.