SitePoint Sponsor

User Tag List

Page 1 of 4 1234 LastLast
Results 1 to 25 of 96
  1. #1
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Preloading (CSS) rollover images

    page
    I have created the navigation on this page using the modified CSS list method (so the 'buttons' are always proportional, with the title centred above the image). All the rollovers etc work fine, except that now that it's on the webserver instead of the local machine there is a delay (while it load's the image 'hover' states image) the first time you mouse over each item.
    Is there anyway I could 'preload' the CSS background images, in the same way you do when you use a regular rollover?

  2. #2
    SitePoint Guru quenting's Avatar
    Join Date
    Dec 2002
    Location
    Switzerland
    Posts
    735
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    maybe you could put an image pointing to the mouseover jpg/gif and set its display to "none" somewhere on your page.
    Haven't tested it so i can't promise it'll work, only intuitively i would say it should work.

    <img src="yourhovergif.gif" style="display:none;" alt="" />

    Of course it's a hack, don't know if you can do something cleaner .

    Quentin
    The largest message boards on the web !
    unblog.fr, hosting 700000 french blogs

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2003
    Location
    Sydney
    Posts
    187
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeh ive heard that way works.

    No need for JS then.

  4. #4
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I put the images with the class="hidden" (I created a special class in the CSS file) in the list, it even displays ok with the css switched off.
    It's not 'clean' but it works, thanks.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,287
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Doug has a good example here:http://www.redmelon.net/tstme/roll/

    May be of use to you.

    Paul

  6. #6
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Internet Explorer will not cache background images

    This is an interesting problem. It could possibly save many a website from using javascript rollovers for images.

    Several people have tried to change background-image with CSS without getting the 'flicker' that occurs in IE. It seems that IE is not able to cache background images.

    There's been a few solutions tried to solve this. One is to move the background-image, so that another part is shown on hover. Another example of the same idea. But, evidentally, IE still needs to load the background image again, even if it's just to move it.

    Quote Originally Posted by quenting
    maybe you could put an image pointing to the mouseover jpg/gif and set its display to "none" somewhere on your page. Haven't tested it so i can't promise it'll work, only intuitively i would say it should work.

    <img src="yourhovergif.gif" style="display:none;" alt="" />
    I've tried a similar approach, by having one image on the parent element, and one in the link. Then setting the hover background-image for the link to none, so that the parents element background will show through. But I met the same problem again with Internet Explorer, it will not cache background images ..

    I'd love to see this solved, big reps for anyone with a solution

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,287
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I'd love to see this solved, big reps for anyone with a solution
    Hmm doesn't the link in my previous post do that?

    I've used techniques similar to doug's which work without flicker in IE6 and Mozilla. You put the image in the background of the div (effectively the rollover state) and then just put an image link in the foreground. On hover set the image to visibility:hidden which shows the underlying image.

    Code:
    <style type="text/css">
    <!--
    .outer {
     height: 60px;
     width: 60px;
     background-image:  url(image1.gif); 
    }
    .outer {display:block; }
    .outer img {width: 100%; height: 100%; border: 0; }
    html>body .outer img{display:block}
    .outer a:hover{visibility:visible}
    .outer a:hover img {visibility:hidden}
    -->
    </style>
    Html
    Code:
    <div class="outer"><a href="#"><img src="image2.gif"  /></a></div>
    <div class="outer"><a href="#"><img src="image3.gif"  /></a></div>
    <div class="outer"><a href="#"><img src="image4.gif"  /></a></div>
    The images are all the same size of course.
    Paul

  8. #8
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hmm doesn't the link in my previous post do that?
    I see it it heavily on http://www.redmelon.net/tstme/roll/ due to the large images that has to be downloaded every time the mouse leaves and enters.

    Quote Originally Posted by Paul O'B
    I've used techniques similar to doug's which work without flicker in IE6 and Mozilla. You put the image in the background of the div (effectively the rollover state) and then just put an image link in the foreground. ?
    Do you actually have a page with an example of that? I tested your code but could not get it to work, the flicker is still there. I am also trying to find a way in which can use normal html text for the 'button' too, and it seems I can only use background images if I want to achieve this.

  9. #9
    chown linux:users\ /world Hartmann's Avatar
    Join Date
    Aug 2000
    Location
    Houston, TX, USA
    Posts
    6,455
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    mediaman_12,

    Just so you know, the page you listed does not display in Mozilla Firebird correctly. The top section is skewed and takes up most of the page.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,287
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi junjun,

    Do you actually have a page with an example of that?
    Does this work? :

    http://www.pmob.co.uk/temp/cssrollover.htm

    It seems to work ok in MOzilla and Ie6 (but still flickers a bit in Opera, I'll have to see if there's a fix)

    Paul

  11. #11
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,
    yes that actually works perfect in IE6 and Moz1.5a.

    In Opera 7 it gives me a *constant* flicker when the mouse is *moving* on the image

  12. #12
    SitePoint Guru quenting's Avatar
    Join Date
    Dec 2002
    Location
    Switzerland
    Posts
    735
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see it it heavily on http://www.redmelon.net/tstme/roll/ due to the large images that has to be downloaded every time the mouse leaves and enters.
    Curious... In my browser, although an old version of ie (5.5, on nt4), the images clearly get cached. I can move very quickly other them without any flickering.

    Quentin
    The largest message boards on the web !
    unblog.fr, hosting 700000 french blogs

  13. #13
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would love to see a solution to the flicker problem. Also the solution should have text + a graphic background.

    I have played with this for awhile and couldn't find a solution. You can see my attemps here: www.search-this.com

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,287
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi junjun,

    Try this for Opera7 as well:
    http://www.pmob.co.uk/temp/cssrollover2.htm

    Should work in Ie6, mozilla 1.2+ & Opera7 (without flicker) with any luck.

    Paul

  15. #15
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, that's not a big enough sample size to really test it. Mine works too....sometimes...

    You need to create a navigation on mulitiple pages and move between the pages to really test it.

    + get some text in there instead of just graphics

  16. #16
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    actually you can see mine get jacked best this way:
    open www.search-this.com then open another browser and move the one browser on top of my site and move your mouse back over my links. FLICKER!!!

  17. #17
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,
    Works *great* in my browser!
    This will be really useful for *anyone* using javascript to do mouseover effects on buttons. Great job!


    Golgotha,
    'sometimes' is not a very valid argument :-) Test Paul code, and I'm sure you'll be happy, your navigation buttons are all images anyway. ot: your search engine decoder is a really helpful tool. Your site is bookmarked.

  18. #18
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by junjun
    I'm sure you'll be happy, your navigation buttons are all images anyway.
    nope, that's text. Give the SE some food that way!

  19. #19
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Golgotha
    nope, that's text. Give the SE some food that way!
    You're right of course, my bad. It that would be optimal fr the search engines, and that was the solution I personally have been trying to solve, wihtout success.

  20. #20
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, my solution works good for rollovers that are still SE friendly, but it still has its problems. I will explore Pauls ideas more later when I get home and If I come up with anything I will share.

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,287
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I suppose something like this might work for text link rollovers.

    http://www.pmob.co.uk/temp/cssrollover3.htm

    The background is just set to transparent on rollover.

    As Golgotha said it needs testing on a page with more rollovers. It seems to work ok in IE6, moz1.2+ and Opera7.

    Paul

  22. #22
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm guessing that what Golgatha and I are trying to figure out, is how to get something like this work without flikker:
    http://www.domedia.org/oveklykken/cs...over-image.php

  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,287
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    I'm guessing that what Golgatha and I are trying to figure out, is how to get something like this work without flikker
    You mean like this:

    http://www.pmob.co.uk/temp/cssrollover4.htm

    Paul

    Edit:


    Here's an updated example of the previous image only rollovers:
    http://www.pmob.co.uk/temp/cssrollover5.htm

    They seem to work without flicker (only tested in Ie6 , moz1.2+ and Opera7)
    Last edited by Paul O'B; Sep 30, 2003 at 15:06.

  24. #24
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Yes

    I spent numerous hours surfing last week, from blog to blog, from one CSS guru to the other, and noone was able to do this. They all had solutions that more or less flickered. You should put some comments on that page and let the world know asap

  25. #25
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, now if you can move that text over about 30pixels to the right, using padding or margin and have it also cross browser friendly I will kiss you.

    really no flicker!!! cant wait to get home


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
  •