PDA

View Full Version : slow rollovers!


mattpjsmith
3rd Mar 2004, 07:22 pm
Hi There hope you can help .....
I read your article on rollovers, and saw what I already knew. However you rollovers work much faster than mine ..... it takes around 2 seconds to show the rollover the first time you use it. After that it works fine????
I've checked the things that matter to see where the problem lies ......
pc speed has been tested and no difference
internet connection tested on fast connection .... no difference
file size of the gif/jpeg ... smaller than your examples and still no difference
..... I have a few sites, but one in progress is www.raon.biz/crn please have a look, and let me know what you think

Thanks

Matt
CADTutor
3rd Mar 2004, 09:16 pm
Your problem is a common one and fortunately the answer is quite simple. You need to "preload" the images that will be used for the rollover so that they are instantly available for the browser to use when you mouseover. You need to add a bit of JavaScript to the <body> tag to do this. Here's an example:

<body onLoad="MM_preloadImages('images/image01.gif','images/image02.gif','images/image03.gif')">

These are the images that will appear when mouseover happens.

Then add the function to preload the images between the <head> tags:

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];}}
}

Make sure this is placed within a <script> tag pair or in a linked JavaScript file.

As for your site - looking good but the script text is difficult to read. I would try a bold version.
mattpjsmith
4th Mar 2004, 09:47 am
excellent, I'll give that a go ....... your help is greatly appreciated

Matt
mattpjsmith
4th Mar 2004, 10:03 am
oh sorry ... one more thing .... the <head> tags function part ....
will this remain the same function for any page with rollovers without having to ammend any of the code ????
when you create a rollover it creates java srcript for you, so would I just put this code directly after the <script> tag??

thanks again
CADTutor
4th Mar 2004, 02:50 pm
In theory, if you are using an editor like FrontPage or Dreamweaver to create your rollovers, the preload scripts SHOULD be automatically placed for you. For some apps, preload is an option.

What are you using?
mattpjsmith
4th Mar 2004, 02:58 pm
I'm using frontpage in this instance ..... I have dreamweaver also, but havent used it yet ..... FP is so easy to use, its hard to get off it :oops:
so .... you think this script should already be there?
CADTutor
4th Mar 2004, 03:06 pm
Yes, when you create a rollover in FP, the preloader should be done for you. It works differently in different versions of FP but your <body> tag should look something like this:

<body onload="dynAnimation()" language="Javascript1.2">

There doesn't appear to be an option so I guess that something else must have gone wrong in your case. Try redfining the rollovers and see what you get.