/    Sign up×
Community /Pin to ProfileBookmark

Image switching

Copy linkTweet thisAlerts:
Mar 04.2004

This might be rather simple question but can’t figure out how to switch image with onmouseover. So, I got image x1, I need it to switch onto image x2 when mouse goes over.

Is there perhaps some more simple way to do this than call javascript on onmouseover? If not, then what the function would look like? ?

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@fredmvMar 04.2004 — Welcome to the forums.<img src="foo.png" onmouseover="src='bar.png';" alt="" />
Copy linkTweet thisAlerts:
@yasigauthorMar 04.2004 — Thankees for the fast answer ?
Copy linkTweet thisAlerts:
@JayDieMar 04.2004 — Yes, there is another way WITHOUT using javascript, but only using CSS:

[URL]http://www.meyerweb.com/eric/css/edge/popups/demo.html[/URL]

On this page, there is also a link to use img instead of text!

JayDie
Copy linkTweet thisAlerts:
@fredmvMar 04.2004 — Actually, I like [url=http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/]Petr Stanicek's method[/url]; not to say Eric's is at all bad, however. It's just Pixy's would likely be easier to apply given this specific situation and is more intended for image rollovers (hence the name). Moreover, note that it isn't bad to use JavaScript for these kind of things simply because it isn't a vital part to the site, however, you'd likely be much better of with CSS because this is a presentational aspect of the site.
×

Success!

Help @yasig 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.16,
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,
)...