Random image link display, if hover should stop the image link...

Discussion in 'JavaScript' started by imdavidlee, Apr 26, 2009.

  1. #1
    i wanna ask a question regarding this random image link/sequential image link display issue..i have write out the code and it works, but the problem for me is i dunno how to make the image stop when mouseover the image display..

    these are my code, you can test it with ur html and put 3 images with the name specified below....

    <BODY OnLoad="rotateImage('rImage', 'link')">

    <center>
    <a id="rLink" href="" hover="stopImage();"><img id="rImage" src="" width=120 height=90></a>
    <br>
    <input type="button" value="previous">
    <input type="button" value="next" onclick="getFirstImage()">
    </center>

    </body>


    <script LANGUAGE="JavaScript">

    var interval = 5; // delay between rotating images (in seconds)
    var random_display = 0; // 0 = no, 1 = yes
    interval *= 1000;

    var image_index = 0;
    var image1 = new imageItem("fheader18.png", "http://imdavidlee.com");
    var image2 = new imageItem("fheader19.png", "http://limpek.com");
    var image3 = new imageItem("davidlogo.jpg", "http://codebasic.net");

    image_list = new Array();
    image_list[image_index++] = image1;
    image_list[image_index++] = image2;
    image_list[image_index++] = image3;

    var number_of_image = image_list.length;

    function imageItem(image_location, link) {
    this.image_item = new Image();
    this.image_item.src = image_location;
    this.image_item.link = link;
    }

    function stopImage() {
    setTimeout("rotateImage()", NULL);
    }


    function getNextImage() {

    if (random_display) {
    image_index = Math.floor(Math.random() * image_list.length);
    }
    else {
    image_index = (image_index+1) % number_of_image;
    }

    var new_image = image_list[image_index];
    return(new_image);
    }


    function rotateImage(rImage, link) {

    var new_image = getNextImage();

    document.getElementById('rImage').src = new_image.image_item.src;
    document.getElementById('rLink').href = new_image.image_item.link;

    setTimeout("rotateImage()", interval);
    }

    </script>
     
    imdavidlee, Apr 26, 2009 IP
  2. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #2
    declare a global variable like

    var mytimer;

    then use mytimer = setTimeout ...

    and onmouseover add clearTimeout(mytimer);

    then again it may not work because you really dont explain what you're doing very well, nobody will bother recreating this - why not just post a link?
     
    dimitar christoff, Apr 27, 2009 IP
  3. JavaScriptBank.com

    JavaScriptBank.com Peon

    Messages:
    141
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #3
    setTimeout Method

    hope this is useful
     
    JavaScriptBank.com, Apr 27, 2009 IP