/    Sign up×
Community /Pin to ProfileBookmark

Image change on mouseover

I have what I think is a relatively simple problem. I have a basic HTML page, nothing fancy – navigation on the left hand side – image and text on the right. What I want to do is have the image on the right change when I mouse over a navigation option on the left. I’ve used the mouseover command shown below to change way the navigation text on the left (which is an image rather than inline text) is displayed, but I can’t figure out how to make it work as I described it above. I’m open to using inline text rather than images for navigational items if it will make this easier. Here is a snippet of the mouseover code I was using:
<a href=”generalinfo.html” onMouseOver=”document.pic1.src=’abouttab.gif'” onMouseOut=”document.pic1.src=’abouttaboff.gif'”> <img src=”abouttaboff.gif” border=”0″ NAME=”pic1″></a>

By the way – thanks for your help.

to post a comment
HTML

4 Comments(s)

Copy linkTweet thisAlerts:
@rbilleaudauthorDec 01.2008 — I'm not using CSS and would prefer not to if possible. CSS seems like a good idea, but it looks horribly complicated and time consuming to learn.
Copy linkTweet thisAlerts:
@cbVisionDec 01.2008 — Haha, CSS more time consuming to learn than JavaScript?

interesting point of view...
Copy linkTweet thisAlerts:
@Game_FreakDec 05.2008 — I'd also like to learn how to do this; The guide you linked is just changing the image you have the mouse over.

He means when the cursor is over "Home" an image on the other side of the page will change to correspond with the section. And when the cursor is over 'About' the image will change again to correspond.

Also I'd like to know how to do all this and to make it so when the cursor isn't over one of the designated buttons it returns to a default image.
×

Success!

Help @rbilleaud 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 5.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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

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