/    Sign up×
Community /Pin to ProfileBookmark

image map rollover and background color swap

Copy linkTweet thisAlerts:
Oct 01.2004

Is there a combination of javascript/css that take the value given in an image map onmouseover/onmouseout and go to an href list and change the href class? (Basically, I want to change the background color as a highlighted selection, but the list below the image map also needs to be clickable.)

i.e.

<img src=’images/mapP2.gif’ border=’0′ usemap=’#Map’>
<map name=’Map’
<area shape=’rect’ coords=”1,20,5,40″ href=’http://something‘ onMouseOver=”9.className=’home'” onMouseOut=”9.className=’home3′”>
</map>

When the above occurs, the following is changed?

<div id=’9′><a class=’home3′ href=’http://something’>My link to change class</a></div>

Thanks,
JB

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangOct 01.2004 — &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;rollover&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;style type="text/css"&gt;
&lt;!--
img {border:0;}
.home {color:blue; background:red;}
.home3 {color:red; background:blue;}
--&gt;
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;
&lt;img src="../Images/myMap.gif" usemap="#Map" alt="myMap" /&gt;
&lt;map name="Map" id="Map"&gt;
&lt;area alt="something" shape="rect" coords="1,20,5,40" href="http://something" onmouseover="document.getElementById('link9').className='home';" onmouseout="document.getElementById('link9').className='home3';"&gt;
&lt;/map&gt;
&lt;/p&gt;
&lt;p&gt;When the above occurs, the following is changed?&lt;/p&gt;
&lt;p&gt;
&lt;a id="link9" class="home3" href="http://something"&gt;My link to change class&lt;/a&gt;
&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
[URL=http://www.w3.org/TR/REC-html40/types.html#type-name]valid ID's[/URL]
Copy linkTweet thisAlerts:
@janetbauthorOct 04.2004 — Thanks so much, Fang. The whole concept I was trying to get to is at: http://www.wnchn.org/map2.asp

It works, but seems clunky. I'm going to try to researc passing more than one item for those counties with more than one listing. Right now, I've just put the mouseover/mouseout in twice. But, I know there's gotta be a better way.

Thanks again.

Janet
×

Success!

Help @janetb 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.18,
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,
)...