SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2008
    Location
    South Florida
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    magic Rollover effect with timeout?

    HI all, I'm kinda new at javascript and i had this neat idea to do a magic rollover effect with grid of tiny gif images. What I did was created a 10px by 10px light blue gif and a 10x10 dark blue gif, i set up a rollover so that the gif changes to the dark one onmouseover, and then it changes back to the light blue one onmousout. then i copied this image dozens of times floated left on each other to make a sort of grid of gifs, I used a setTimeout to delay the time it takes for the onmouseout event to change the gif back to the light blue one. I was hoping to achieve an effect where the if i mouse over the grid the gifs will turn dark and then a trail back to light blue, sort of following the mouse around, kind of like the effect in Windows with the cursor trails.
    what actually happens is that the gifs change to the dark gif when i mouse over but they turn back at the same time.
    for example: when i mouse over gif1, then gif2, then gif3, and so on...
    gif1 changes to the dark gif, then gif2 , then gif3 and so on.
    they should change back to the light gif in the order i moused over. but actually they ALL turn back at the same time.

    here's the html (it only has 20 gif's displayed for brevity, the final code would have dozens and dozens)
    Code HTML4Strict:
    <html>
    <head>
    <title>Magic Boxes</title>
    <style type="text/css">
    #container {
    	margin:0 auto;
    	border:dotted;
    	width:600pt;
    	height:600pt;
    }
    #container .magic_box {
    	float:left;
    	width:10pt;
    	height:10pt;
    }
    </style>
    </head>
    <body>
     
    <div id="container">
     
    <div class="magic_box" ><img id="1" src="magicbg1.gif" onmouseover="magicFuncOver(this)" onmouseout="setTimeout('magicFuncOut();',700);" /></div>
    <div class="magic_box" ><img id="2" src="magicbg1.gif" onmouseover="magicFuncOver(this)" onmouseout="setTimeout('magicFuncOut();',710);" /></div>
    <div class="magic_box" ><img id="3" src="magicbg1.gif" onmouseover="magicFuncOver(this)" onmouseout="setTimeout('magicFuncOut();',720);" /></div>
    <div class="magic_box" ><img id="4" src="magicbg1.gif" onmouseover="magicFuncOver(this)" onmouseout="setTimeout('magicFuncOut();',730);" /></div>
    <div class="magic_box" ><img id="5" src="magicbg1.gif" onmouseover="magicFuncOver(this)" onmouseout="setTimeout('magicFuncOut();',740);" /></div>
    <div class="magic_box" ><img id="6" src="magicbg1.gif" onmouseover="magicFuncOver(this)" onmouseout="setTimeout('magicFuncOut();',750);" /></div>
    <div class="magic_box" ><img id="7" src="magicbg1.gif" onmouseover="magicFuncOver(this)" onmouseout="setTimeout('magicFuncOut();',760);" /></div>
    <div class="magic_box" ><img id="8" src="magicbg1.gif" onmouseover="magicFuncOver(this)" onmouseout="setTimeout('magicFuncOut();',770);" /></div>
    <div class="magic_box" ><img id="9" src="magicbg1.gif" onmouseover="magicFuncOver(this)" onmouseout="setTimeout('magicFuncOut();',780);" /></div>
    <div class="magic_box" ><img id="10" src="magicbg1.gif" onmouseover="magicFuncOver(this)" onmouseout="setTimeout('magicFuncOut();',790);" /></div>
    <div class="magic_box" ><img id="11" src="magicbg1.gif" onmouseover="magicFuncOver(this)" onmouseout="setTimeout('magicFuncOut();',800);" /></div>
    <div class="magic_box" ><img id="12" src="magicbg1.gif" onmouseover="magicFuncOver(this)" onmouseout="setTimeout('magicFuncOut();',810);" /></div>
    <div class="magic_box" ><img id="13" src="magicbg1.gif" onmouseover="magicFuncOver(this)" onmouseout="setTimeout('magicFuncOut();',820);" /></div>
    <div class="magic_box" ><img id="14" src="magicbg1.gif" onmouseover="magicFuncOver(this)" onmouseout="setTimeout('magicFuncOut();',830);" /></div>
    <div class="magic_box" ><img id="15" src="magicbg1.gif" onmouseover="magicFuncOver(this)" onmouseout="setTimeout('magicFuncOut();',840);" /></div>
    <div class="magic_box" ><img id="16" src="magicbg1.gif" onmouseover="magicFuncOver(this)" onmouseout="setTimeout('magicFuncOut();',850);" /></div>
    <div class="magic_box" ><img id="17" src="magicbg1.gif" onmouseover="magicFuncOver(this)" onmouseout="setTimeout('magicFuncOut();',860);" /></div>
    <div class="magic_box" ><img id="18" src="magicbg1.gif" onmouseover="magicFuncOver(this)" onmouseout="setTimeout('magicFuncOut();',870);" /></div>
    <div class="magic_box" ><img id="19" src="magicbg1.gif" onmouseover="magicFuncOver(this)" onmouseout="setTimeout('magicFuncOut();',880);" /></div>
    <div class="magic_box" ><img id="20" src="magicbg1.gif" onmouseover="magicFuncOver(this)" onmouseout="setTimeout('magicFuncOut();',890);" /></div>
     
    </div>
     
    </body>
    </html>
    and here's the javascript:
    Code JavaScript:
    function magicFuncOver(img) {
    	img.src = "magicbg2.gif";
    }
    function magicFuncOut() {
    	for (i=1; i <= document.images.length; i++) {	
    		document.getElementById(i).src = "magicbg1.gif";
    	}
    }
    any ideas as how to make this work? Its something i've never seen and i cant find a solution on the net, any help would be awesome!

  2. #2
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's because magicFuncOut() loops over every image.

    You need to pass the element, or the id and have the function just apply the change to the single element.

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2008
    Location
    South Florida
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok great thanks I'll try that out.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •