Results 1 to 4 of 4

Thread: A betters, simpler rollover with preloading built-in -- an idea

  1. #1
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default A betters, simpler rollover with preloading built-in -- an idea

    This is just an idea, but I think it makes a lot of sense. Is there some reason this wouldn't be better than basically all of the rollover scripts out there?

    The markup goes roughly like this:
    <img src="over.gif" style="position:absolute;display:none;z-index:5;"><img src="orig.gif">
    (Two equal-sized images with the first using position:absolute and a high z-indez and hidden; the second is normal [not absolute].)

    Now to allow the rollover, simply add onmouseover to the main [second] image. It uses getElementById() and sets the first image to visible. onmouseout is set to display:none.

    Or I believe you could keep the second image self-contained with the JS (mouseover works without visibility, right?).


    Just an idea. Perhaps I'm missing something.
    Last edited by djr33; 06-02-2010 at 09:40 AM. Reason: corrected error in the code
    Daniel - Freelance Web Design | <?php?> | <html>| español | Deutsch | italiano | português | català | un peu de français | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    By better, do you mean less code? As far as feasibility, two possible issues I see with this approach:

    1) For the rollover effect, you're hiding the main image to show the positioned image, instead of actually updating the main image's src, there might be a slight flicker on some computers.

    2) Since the rollover image is absolutely positioned, it might not always be exactly overlapping the main image when it's revealed. I never trust an absolutely positioned element to be where it is by default without JavaScript repositioning it to where I want it to be.
    DD Admin

  3. The Following User Says Thank You to ddadmin For This Useful Post:

    djr33 (06-02-2010)

  4. #3
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,876
    Thanks
    49
    Thanked 264 Times in 256 Posts
    Blog Entries
    56

    Default

    Quote Originally Posted by djr33 View Post
    The markup goes roughly like this:
    <img src="over.gif" style="position:absolute;display:hidden;z-index:5;"><img src="orig.gif">
    I've always done it this way, except for display:hidden, which should be display:none.
    ===
    Arie Molendijk

  5. The Following User Says Thank You to molendijk For This Useful Post:

    djr33 (06-02-2010)

  6. #4
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    Oops, yes, I've modified the original post to display:none. I haven't been getting much sleep the past couple days,


    ddadmin, there's less code involved (at least compared to anything beyond the most basic case of only switching the image's src), but that isn't why this is "better".
    It's better because it's more direct: the problem with rollovers has always been that switching the src causes problems, mostly with loading images. So then the idea of preloading images becomes important and makes everything messy. Here there's nothing to worry about: load both and just show the one onmouseover.

    Regarding the problems:
    1) I meant this backwards: show the hidden image [and keep the original visable beneath]. If there's a flicker then that is a problem. Interesting (and unfortunate).
    2) If position:absolute is used on an identically sized element immediately preceding the other [which is not position:absolute] wouldn't they have to line up? I'd put them both in a div (or other element) to be sure of this. If this gets messy (which it might) then that's not as clear.


    An alternative them would be to create the image anywhere on the page and use JS to position it on top of the original for rollover. That would be fine. It wouldn't help limit the complexity of the code, though.

    And if there is really no alternative to the positioning issues, then would the easy answer be to combine the two methods: load the rollover image anywhere on the page, display:none. Never show it, and just switch between the SRCs for the main image? Kinda indirect, but it skips all of the complexity in making a Javascript preloader, right?
    (This assumes that caching is in effect for at least the minute or two someone is browsing a page.)
    Daniel - Freelance Web Design | <?php?> | <html>| español | Deutsch | italiano | português | català | un peu de français | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

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
  •