Results 1 to 13 of 13
  1. #1
    Join Date
    May 2005
    Location
    United Kingdom / England
    Posts
    557

    Question Image Rollover effects

    Its common i know people use rollover effects for buttons on their site i.e. rollover and it glows, or maybe bevel in and out.

    Ok ive used this rollover script ofcourse on two sites, now the rollover effect is not effective. Basically uve got to wait like one second to a split second for it to change, and ofcourse 1 sec is very slow for a rollover to change, the image button is gif and very small size, and the host is fast too I have a fast connection too. When i try out other peoples rollovers it works instantly before you can even click the button but why is it i have a slow rollover on two differnt sites with two different sort of image buttons??

    could it be the script im using? maybe the script is too long?

    Help with a faster rollover script will be very much appreciated,

    P.S: ive accessed the sites which ive applied the rollover effects to, from two different PC's and is still the same, having to wait like 1 sec for it to change,

    Thanks in Advance!

  2. #2
    If the scripts that you have are JavaScript based. You most likely aren't preloading the images.

    What happens when someone goes over you button, is their browser has to download the rollover from your server, in turn, taking 1 second or so. To avoid this you must preload the images that make up the roll-over.

    Here is a link to a site that will automatically produce the preload javascript. Just paste this into the <head> of your page and you should be good.

    Link:

    javascript.internet (dot) com/generators/preload-images.html

    replace (dot) with . as I apparently can't post URLs

  3. #3
    Join Date
    May 2005
    Location
    United Kingdom / England
    Posts
    557
    yes its a java script, hmm and ive already implemented the rollover script it was a lil complicated u know, can i just get a prelaoding script on its own and paste it in some where, not having to interlink it or anything with the current rollover js?

  4. #4
    Join Date
    Jun 2004
    Location
    Northwest Colorado
    Posts
    4,630
    Originally posted by kayz
    yes its a java script, hmm and ive already implemented the rollover script it was a lil complicated u know, can i just get a prelaoding script on its own and paste it in some where, not having to interlink it or anything with the current rollover js?
    If your script didn't account for preloading images, it wasn't a very good script. Starting over and doing it right this time is what I recommend, rather than trying to patch something together. JavaScript rollovers are not complicated, just tedious. A better way is to use CSS rollovers, as described here:

    http://wellstyled.com/css-nopreload-rollovers.html

    This approach is preferred as it is less bandwidth intensive -- combining three images into one 'strip' (whether horizontal or vertical) results in less overall bytes than three individual images with the associated overhead. You're also saving two server calls, since each 'state' you'll need is loaded with the original image.
    Eric J. Bowman, principal
    Bison Systems Corporation coming soon: a new sig!
    I'm just a poor, unfrozen caveman Webmaster. Your new 'standards' frighten, and confuse me...

  5. #5
    Join Date
    May 2005
    Location
    United Kingdom / England
    Posts
    557
    hmm your right its easy but labourios, well ive noticed css rollovers are good, i'll look into that, and the js i have used was from dynamic drive here it is:

    This goes in the <head> section:

    <script language="JavaScript">
    <!--
    function FP_preloadImgs() {//v1.0
    var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
    for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
    }

    function FP_swapImg() {//v1.0
    var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
    n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
    elm.$src=elm.src; elm.src=args[n+1]; } }
    }

    function FP_getObjectByID(id,o) {//v1.0
    var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
    else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
    if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
    for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
    f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
    for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
    return null;
    }
    // -->
    </script>


    and this is the short code for the image swaps:

    <img border="0" id="img3" src="button6B.gif" height="133" width="21" alt="" onmouseover="FP_swapImg(1,0,/*id*/'img3',/*url*/'button6C.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img3',/*url*/'button6B.gif')"</p>

  6. #6
    Join Date
    May 2005
    Location
    United Kingdom / England
    Posts
    557
    i dont know if its me, ive run a test with css from that site link uve given me, i dont understand why it flickers white??

  7. #7
    Join Date
    Mar 2004
    Location
    USA
    Posts
    4,342
    why dont you just use image.src property?

    As I see from BigBison example, it could be done in 1 easy line!

    Peace,
    Testing 1.. Testing 1..2.. Testing 1..2..3...

  8. #8
    Join Date
    May 2005
    Location
    United Kingdom / England
    Posts
    557
    ok im a little new to css, but have been playing around and looks straight forward ive done a few biddie things here and there ive got the hang of it.

    Now Bigbison ive looked at your link, ive been racking my brain since 11pm and now its 4:00am, that link uve provided dosent explain how to go about doing it in step by step but do understand it. Ive been on google searching and searching, some sites have css rollover scripts but they flicker which i dont.

    Finally id be greatfull if somebody can show me a tutorial or maybe a already pre-made css script for an image rollover script, bear in mind it has to be image rollover not text with fancy borders. So basically image1 is the default image which the end-user sees when they enter, on hover image2 should appear, remember both are images not text also the images must not flicker! thats very important.
    So if anyone can get me a pre-made script or instructions on how i do this would be very much greatly appreciated, you dont know how important this means to me!

    Thanks again,

  9. #9
    Join Date
    Jun 2004
    Location
    Northwest Colorado
    Posts
    4,630
    I don't know what flicker you're talking about. The example I linked to is three separate images, in a 'strip', not a text effect with fancy borders. It does exactly what you want and meets your requirements. That method is used on tens of thousands of websites, yours is the first report I've seen about it flickering.

    Instead of replacing one image with another, the CSS method slides the background over. Changing the state (position) of an image requires much less processing power, and no calls to the browser cache, compared with loading a new image. Loading a new image (the javascript method) is much more likely to induce flicker than CSS rollovers.

    http://canuck.bisonsystems.net/dev/bisonweb/

    I haven't figured out why that doesn't work properly in Opera 8, but that isn't a flicker problem. Do you see a flicker on that? The amount of code it took me to implement that same menu with JavaScript, was dozens of lines. You can see for yourself, in CSS it's more like a couple:

    Code:
    #navbar a:link {background-position:left}
    #navbar a:hover {background-position:-140px}
    #navbar a:active {background-position:right}
    When hovered, slide the image over equal to the width of the viewport. When clicked, slide it further. In this case, 'right' is the same as if I'd used '-280px'.

    Edit: I added the #navbar a:link rule in the snippet in this post, not reflected on the link posted, but I believe that will fix Opera 8's strict requirements.
    Last edited by BigBison; 08-01-2005 at 06:40 AM.

  10. #10
    Join Date
    May 2005
    Location
    United Kingdom / England
    Posts
    557
    hmm what was that file??

    anyways heres what i mean the website it self even mentions about the flickering problem:

    http://wellstyled.com/css-nopreload-rollovers.html

    now this is the first example they show: http://wellstyled.com/files/css-nopr...s/example.html as you rollover the images the white background can be seen, i.e. if u move the mosue up and down the menu, but the website later mentions about the flicker and they ahd solved the problem in this example: http://wellstyled.com/files/css-nopr.../example2.html but the thing is it does not show an example or tutorial of how i can do my own, if somebody maybe can give me a ready made script will be much appreciated,

  11. #11
    Join Date
    Jun 2004
    Location
    Northwest Colorado
    Posts
    4,630
    OK, but I've never noticed the flicker being discusses, even with IE. The solution makes perfect sense to me. If you want an example, you'll have to view the source code of the examples given.

    This isn't really that hard, keep at it and learn how it's done not just for your current project, but as a valuable skill for your personal 'toolbox'. You won't learn if someone just gives you a ready-made script. CSS isn't scripting, for one thing. It's just markup.

    If the wellstyled.com examples aren't sufficient, you could also try searching the term 'css rollover'. Hundreds of examples out there, plenty more here at WHT.

    Originally posted by kayz
    hmm what was that file??
    Let me guess, you tried viewing my link with IE. If you want to do web design, you'll be a lot better off if you start by switching to a real browser. It's much easier to design to standards, then hack in the corrections IE needs, than it is to design to IE and attempt to make the resulting mess work in other browsers.

  12. #12
    Join Date
    May 2005
    Location
    United Kingdom / England
    Posts
    557
    i see, thanks for your help, im always striving to learn, and yes ive spent hours yday morning on google searching google etc etc, ive bookmarked my 7th goole search page on css and still going through every site looking for an example which is good, still havent found one.

    & yes of course ive been looking at soruce codes etc etc, ive done the lot tbh but dosent seem to work exatly when i implement it, anyways i think i should bother you people for very long now.

    Thanks again, everyone esp BigBison,

    Wish me luck on my quest to master CSS!

  13. #13
    Join Date
    Jun 2004
    Location
    Northwest Colorado
    Posts
    4,630
    Good luck! Don't be afraid to ask more questions, you aren't bothering anyone. It can be confusing, personally, I had to look at that wellstyled.com article a dozen times before I figured it out.

Posting Permissions

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