PDA

View Full Version : Javascript rollover images "lagging"


bluemicrobyte
12-28-2006, 2:35 AM
update: it appears as if the issue only occurs sometimes. Regardless, I would still appreciate feedback on what might be causing this issue.

So on my websites old home page I had 4 rollover images that worked just fine and swapped instantaneously as your rolled over with the mouse -- I'm re-designing the home page and this time when I use the rollover effect it seems to "lag" and swaps the images slightly delayed after you mouseover them. The new home page IS more complex, but there are other rollover images that work instantaneously as they should.


Old home page: http://www.bluemicrobyte.com/index.php
Rollover images are the 4 colored navigation bars by the clown.

New home page: http://www.bluemicrobyte.com/new.php (currently optimized for firefox!!)
Working rollover images are the blue "login/register" buttons in the top left box, delayed/lagging rollover images are the 4 colored navigation bars by the clown (top middle).

Any idea why these new 4 images are working slowly? (or is this an isolated incident on my computer only?)


PS: The coding used for this is dreamweavers built in rollover image code -- here's a copy:

<script type="text/JavaScript">
<!--

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

<body onLoad="MM_preloadImages('http://www.bluemicrobyte.com/img/home/register_on.gif','/img/home/header_button1_on.jpg','/img/home/header_button2_on.jpg','/img/home/header_button3_on.jpg','/img/home/header_button4_disabled.jpg')">

<a href="http://games.bluemicrobyte.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Games','','/img/home/header_button1_on.jpg',1)"><img src="/img/home/header_button1_off.jpg" alt="Games" name="Games" width="195" height="40" border="0"></a><a href="http://forums.bluemicrobyte.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Forums','','/img/home/header_button2_on.jpg',1)"><img src="/img/home/header_button2_off.jpg" alt="Forums" name="Forums" width="195" height="40" border="0"></a><a href="http://movies.bluemicrobyte.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Movies','','/img/home/header_button3_on.jpg',1)"><img src="/img/home/header_button3_off.jpg" alt="Movies" name="Movies" width="195" height="40" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Profiles','','/img/home/header_button4_disabled.jpg',1)"><img src="/img/home/header_button4_off.jpg" alt="Profiles" name="Profiles" width="195" height="39" border="0"></a>

Neo
12-28-2006, 2:01 PM
I would strongly recommend that you utilize CSS for mouseover effects... it takes like a:hover {background-image: url();} or whatever.

If you don't want it to lag, you have to preload them (ie: just google it, like preload images are whatever) otherwise there will be a lag as the client sends a request to the server for the new image.

-Kupa

bluemicrobyte
12-29-2006, 2:56 AM
Mmmhmmm, CSS for mouseover effects. I shall consider that option. What are the benefits of using CSS other than it's newer?

Modred
12-29-2006, 3:54 PM
To use a Javascript image rollover, you must write some sort of function that does the swapping. If you use CSS, then you just specify one image for the regular link and one for the hover effect, no additional programming required.

Although you may still need to preload the images. I'm not sure how that would work in conjunction with CSS.

Markpyro
12-29-2006, 5:26 PM
You stole my flash music player! You lurk more than I thought :P

Please, please change those icky bubble images. They look horrible. The ones surrounding the content boxes and everything... *shudder*

Otherwise, great features. The seperate-loading poll, login... Awesomesauce.



http://pyrom.net/sigs/manual/hr.png
http://pyrom.net/sigs/manual/sigimage.png
*http://pyrom.net/test/blamecountimage.php*http://pyrom.net/test/lastblameimage.php*
http://pyrom.net/test/blameclick.png (http://pyrom.net/test/blame.php)

TimP
12-29-2006, 8:25 PM
Another benefit is that CSS rollovers still work when Javascript is disabled.

bluemicrobyte
12-31-2006, 8:19 PM
You stole my flash music player! You lurk more than I thought :P

Please, please change those icky bubble images. They look horrible. The ones surrounding the content boxes and everything... *shudder*

Otherwise, great features. The seperate-loading poll, login... Awesomesauce.



http://pyrom.net/sigs/manual/hr.png
http://pyrom.net/sigs/manual/sigimage.png
*http://pyrom.net/test/blamecountimage.php*http://pyrom.net/test/lastblameimage.php*
http://pyrom.net/test/blameclick.png (http://pyrom.net/test/blame.php)

Flash music player? Are you talking about the video music player? You mean this one? http://www.jeroenwijering.com/?item=Flash_Video_Player

Markpyro
12-31-2006, 9:25 PM
Yeah. http://pyrom.net/music

It's from the same creators.


http://pyrom.net/sigs/manual/hr.png
http://pyrom.net/sigs/manual/sigimage.png
*http://pyrom.net/test/blamecountimage.php*http://pyrom.net/test/lastblameimage.php*
http://pyrom.net/test/blameclick.png (http://pyrom.net/test/blame.php)

bluemicrobyte
01-10-2007, 3:15 AM
Ah, yes, it appears that it is. It's a nice little video player that works well for my needs =P