/    Sign up×
Community /Pin to ProfileBookmark

mouseover styles cause blinking!

Copy linkTweet thisAlerts:
Oct 20.2004

hi…lavalamp once posted some pretty awesome DHTML that is supposed to make really quick mouseover images. i implemented this code many times on my local harddrive files to great effect…code is in this post:

[url]http://www.webdeveloper.com/forum/showthread.php?s=&threadid=31248&highlight=mouseover[/url]

HOWEVER, i am now trying to implement those mousovers online and they are BLINKING! when your mouse hovers over them, they disappear momentarily and then the active image appears…NOT very cool. any help would be appreciated.

here’s the example

[url]http://www.webdeveloper.com/forum/showthread.php?s=&threadid=31248&highlight=mouseover[/url]

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@David_HarrisonOct 20.2004 — The original code came from [url=http://www.alistapart.com/articles/rollovers/]here[/url]. However IE tends to add a flicker when a backround is moved (dunno why), so here's a slightly better way of doing it.

[upl-file uuid=7b2b31e2-079a-4c51-807d-a86301e01276 size=1kB]css_image_rollover.zip[/upl-file]
Copy linkTweet thisAlerts:
@FangOct 21.2004 — That method doesn't appear to work for older IE versions.

A simpler implementation:
.greentored {
display:block;
background:#f00 url(rollover.png);
width:100px;
height:100px;
}
a.greentored:focus, a.greentored:hover, a.greentored:active {
background:#0f0 url(rollover.png);
background-position:0 100px;
}

Note:

no need for a <span>

background color added; always have an alternative for images

[i]visited[/i] removed for clarity
Copy linkTweet thisAlerts:
@David_HarrisonOct 21.2004 — That was how the original version worked, it causes a flicker in IE6 though (apparently).
Copy linkTweet thisAlerts:
@FangOct 21.2004 — I detected no flikkering ?
Copy linkTweet thisAlerts:
@David_HarrisonOct 21.2004 — Perhaps it only happens on slower PC's.
×

Success!

Help @sneakyimp 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 6.17,
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: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

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