Hello all,
Not sure if this is the right place to post this....
I'm using the hover pseudo class for a image rollover effect. The image is in the background of the text link for both on and off. There's obviously a slight delay for the on-image to appear when you mouse-over it because the image needs to pre-loaded.
So I tried preloading the images using a regular ol' Javascript script. The script doesn't seem to be working. I think it may have even made the delay even longer now. Is there something different that needs to be done because the rollover effect is done using CSS? Or maybe there's something wrong with the Javascript? I'm not very good with Javascript....
This is the site in question if it helps any: <!-- w --><a class="postlink" href="http://www.itgco.com">www.itgco.com</a><!-- w --> (look at the blue arrows).
Any help would be appreciated. Thanks.Generally I'd nest the a element in another element - e.g. a span, then apply the hover state background to the span. Then the a:hover background is transparent, so it sees through to the layer beneath.Check out menu 4 on this link for an example
<!-- m --><a class="postlink" href="http://www.webdevfaqs.com/css.php#menuWoW">http://www.webdevfaqs.com/css.php#menuWoW</a><!-- m -->!
Thanks so much! That example certainly helped. Good work-around for not having to use javascript.
Originally posted by ajimenez
That example certainly helped...
Well I noticed you hung around for ages after I'd posted, but didn't say anything... So I re-read my post and decided an example might make more sense.
Luckily it was a 'here's one I made earlier' ...
Back to the original post:
I prefer this technique: <!-- m --><a class="postlink" href="http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/That's">http://www.pixy.cz/blogg/clanky/cssnopr ... ers/That's</a><!-- m --> another good alternative Vladdy. Maybe I'll implement it that way later on. I'm just glad on not having to rely on preloaded images.in addition to vladdy's, check out these two alistapart articles:
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/slidingdoors/">http://www.alistapart.com/articles/slidingdoors/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/slidingdoors2/">http://www.alistapart.com/articles/slidingdoors2/</a><!-- m -->[moderator's note]
I've split off the posts about labels to make this thread easier to read. They can be found in a new thread titled something like 'label elements for css layout forms', in this forum.
[/moderator's note]There's a new article up on A List Apart today that addresses this same issue. One of the best ways to set up this kind of rollover is to do it with a single image so there's at least no delay for the second image to first load.which article?CSS Sprites (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/sprites/">http://www.alistapart.com/articles/sprites/</a><!-- m -->)gotcha, thanks
Not sure if this is the right place to post this....
I'm using the hover pseudo class for a image rollover effect. The image is in the background of the text link for both on and off. There's obviously a slight delay for the on-image to appear when you mouse-over it because the image needs to pre-loaded.
So I tried preloading the images using a regular ol' Javascript script. The script doesn't seem to be working. I think it may have even made the delay even longer now. Is there something different that needs to be done because the rollover effect is done using CSS? Or maybe there's something wrong with the Javascript? I'm not very good with Javascript....
This is the site in question if it helps any: <!-- w --><a class="postlink" href="http://www.itgco.com">www.itgco.com</a><!-- w --> (look at the blue arrows).
Any help would be appreciated. Thanks.Generally I'd nest the a element in another element - e.g. a span, then apply the hover state background to the span. Then the a:hover background is transparent, so it sees through to the layer beneath.Check out menu 4 on this link for an example
<!-- m --><a class="postlink" href="http://www.webdevfaqs.com/css.php#menuWoW">http://www.webdevfaqs.com/css.php#menuWoW</a><!-- m -->!
Thanks so much! That example certainly helped. Good work-around for not having to use javascript.
Originally posted by ajimenez That example certainly helped...
Well I noticed you hung around for ages after I'd posted, but didn't say anything... So I re-read my post and decided an example might make more sense.
Luckily it was a 'here's one I made earlier' ...Back to the original post:I prefer this technique: <!-- m --><a class="postlink" href="http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/That's">http://www.pixy.cz/blogg/clanky/cssnopr ... ers/That's</a><!-- m --> another good alternative Vladdy. Maybe I'll implement it that way later on. I'm just glad on not having to rely on preloaded images.in addition to vladdy's, check out these two alistapart articles:
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/slidingdoors/">http://www.alistapart.com/articles/slidingdoors/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/slidingdoors2/">http://www.alistapart.com/articles/slidingdoors2/</a><!-- m -->[moderator's note]
I've split off the posts about labels to make this thread easier to read. They can be found in a new thread titled something like 'label elements for css layout forms', in this forum.
[/moderator's note]There's a new article up on A List Apart today that addresses this same issue. One of the best ways to set up this kind of rollover is to do it with a single image so there's at least no delay for the second image to first load.which article?CSS Sprites (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/sprites/">http://www.alistapart.com/articles/sprites/</a><!-- m -->)gotcha, thanks