/    Sign up×
Community /Pin to ProfileBookmark

preload images with rollover

Copy linkTweet thisAlerts:
Mar 04.2004

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: [url]www.itgco.com[/url] (look at the blue arrows).

Any help would be appreciated. Thanks.

to post a comment
CSS

12 Comments(s) ↴

Copy linkTweet thisAlerts:
@DaveSWMar 04.2004 — 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.
Copy linkTweet thisAlerts:
@DaveSWMar 04.2004 — Check out menu 4 on this link for an example

http://www.webdevfaqs.com/css.php#menu
Copy linkTweet thisAlerts:
@ajimenezauthorMar 04.2004 — WoW!

Thanks so much! That example certainly helped. Good work-around for not having to use javascript.

?
Copy linkTweet thisAlerts:
@DaveSWMar 05.2004 — [i]Originally posted by ajimenez [/i]

[B]That example certainly helped... [/B][/QUOTE]

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

?
Copy linkTweet thisAlerts:
@VladdyMar 05.2004 — Back to the original post:

I prefer this technique: http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/
Copy linkTweet thisAlerts:
@ajimenezauthorMar 05.2004 — That's 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.
Copy linkTweet thisAlerts:
@SamMar 06.2004 — in addition to vladdy's, check out these two alistapart articles:

http://www.alistapart.com/articles/slidingdoors/

http://www.alistapart.com/articles/slidingdoors2/
Copy linkTweet thisAlerts:
@DaveSWMar 06.2004 — [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]
Copy linkTweet thisAlerts:
@ray326Mar 07.2004 — 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.
Copy linkTweet thisAlerts:
@SamMar 07.2004 — which article?
Copy linkTweet thisAlerts:
@ray326Mar 07.2004 — [url=http://www.alistapart.com/articles/sprites/]CSS Sprites[/url]
Copy linkTweet thisAlerts:
@SamMar 07.2004 — gotcha, thanks
×

Success!

Help @ajimenez spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.24,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...