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

[djr33]

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.

[ddadmin]

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.

[molendijk]

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

[djr33]

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.)