WEB javascript experts, quick question

Discussion in 'OT Technology' started by science, Feb 2, 2008.

  1. science

    science Guest

    so i have this code that someone gave me to cycle thumbnails...
    Code:
    <body onLoad="frame_upload_1();">
    <script type="text/javascript">
    function frame_upload_1(){
    document.getElementById('div_for_up').innerHTML='<img src="http://forums.tizag.com/images/custom/tizagSugar.jpg" />'; //Get the element by its id
    setTimeout('frame_upload_2()', 2000); //After 2000 miliseconds do the function frame_upload_2()
    }
    function frame_upload_2(){
    document.getElementById('div_for_up').innerHTML='<img src="http://www.movenext.nl/page/images/thumb/w248h220_php-logo.jpg" />'; //Get the element by its id
    setTimeout('frame_upload_3()', 2000); //After 2000 miliseconds do the function frame_upload_3()
    }
    function frame_upload_3(){
    document.getElementById('div_for_up').innerHTML='<img src="http://blogs.zdnet.com/open-source/images/mysql.gif" />'; //Get the element by its id
    setTimeout('frame_upload_1()', 2000); //After 2000 miliseconds do the function frame_upload_1()
    }
    </script>
    <div id="div_for_up">Loading....</div>
    </body>
    but i need to modify it so the cycling doesn't start until the mouse is over the first thumbnail. and i want the cycling to stop and return to the first thumbnail on mouseoff. can anyone help me out here?
     
  2. intrktevo

    intrktevo New Member

    Joined:
    Oct 18, 2004
    Messages:
    5,781
    Likes Received:
    0
    Location:
    UCF
    remove:
    <body onLoad="frame_upload_1();">

    that will stop the page from automatically starting the cycling.

    change:
    <div id="div_for_up">Loading....</div>

    to:
    <div id="div_for_up" onMouseOver="frame_upload_1();" ><img src="http://forums.tizag.com/images/custom/tizagSugar.jpg" /></div>
     
  3. science

    science Guest

    awesome, thanks!

    but for some reason, it keeps cycling even when i take my mouse off :hs:
     
  4. Pogi

    Pogi Official Pointy Boot Guey Ver 1.0

    Joined:
    Jan 3, 2001
    Messages:
    7,956
    Likes Received:
    13
    Location:
    North Of Chi-town
    there is another property "onMouseOff" or something to that effect that you can use to stop the cycling.

    when you hightlight the .jpg, you are starting an infite loop, that is why it does not stop.
     
  5. noon

    noon get high and teach me how to listen

    Joined:
    May 4, 2002
    Messages:
    3,384
    Likes Received:
    0
    Location:
    Lawrence, KS
    here you go

    Code:
    <body>
    <script type="text/javascript">
    function frame_upload_1(){
    document.getElementById('div_for_up').innerHTML='<img src="http://forums.tizag.com/images/custom/tizagSugar.jpg" />'; //Get the element by its id
    setTimeout('frame_upload_2()', 2000); //After 2000 miliseconds do the function frame_upload_2()
    }
    function frame_upload_2(){
    document.getElementById('div_for_up').innerHTML='<img src="http://www.movenext.nl/page/images/thumb/w248h220_php-logo.jpg" />'; //Get the element by its id
    setTimeout('frame_upload_3()', 2000); //After 2000 miliseconds do the function frame_upload_3()
    }
    function frame_upload_3(){
    document.getElementById('div_for_up').innerHTML='<img src="http://blogs.zdnet.com/open-source/images/mysql.gif" />'; //Get the element by its id
    setTimeout('back_to_start()', 2000); //After 2000 miliseconds do the function frame_upload_1()
    }
    function back_to_start() {
    document.getElementById('div_for_up').innerHTML='<img src="http://forums.tizag.com/images/custom/tizagSugar.jpg" />'; //Get the element by its id
    }
    </script>
    <div id="div_for_up" onMouseOver="frame_upload_1();" >Loading....</div>
    </body>
     
  6. noon

    noon get high and teach me how to listen

    Joined:
    May 4, 2002
    Messages:
    3,384
    Likes Received:
    0
    Location:
    Lawrence, KS
    also, that code is somewhat buggy.. let me fix it up
     
  7. noon

    noon get high and teach me how to listen

    Joined:
    May 4, 2002
    Messages:
    3,384
    Likes Received:
    0
    Location:
    Lawrence, KS
    Code:
    <body>
    <script type="text/javascript">
    var ready = 1;
    function frame_upload_1(){
    if (!(ready)) return;
    ready = 0;
    document.getElementById('div_for_up').innerHTML='<img src="http://forums.tizag.com/images/custom/tizagSugar.jpg" />'; //Get the element by its id
    setTimeout('frame_upload_2()', 2000); //After 2000 miliseconds do the function frame_upload_2()
    }
    function frame_upload_2(){
    document.getElementById('div_for_up').innerHTML='<img src="http://www.movenext.nl/page/images/thumb/w248h220_php-logo.jpg" />'; //Get the element by its id
    setTimeout('frame_upload_3()', 2000); //After 2000 miliseconds do the function frame_upload_3()
    }
    function frame_upload_3(){
    document.getElementById('div_for_up').innerHTML='<img src="http://blogs.zdnet.com/open-source/images/mysql.gif" />'; //Get the element by its id
    setTimeout('back_to_start()', 2000); //After 2000 miliseconds do the function frame_upload_1()
    }
    function back_to_start() {
    document.getElementById('div_for_up').innerHTML='<img src="http://forums.tizag.com/images/custom/tizagSugar.jpg" />'; //Get the element by its id
    ready = 1;
    }
    </script>
    <div id="div_for_up" onMouseOver="frame_upload_1();" >Loading....</div>
    </body>
    
    added a flag to halt the mouseover while it is cycling
     
  8. science

    science Guest

    thanks man, it works! :bowdown::bowdown:
     

Share This Page