/    Sign up×
Community /Pin to ProfileBookmark

US MAP with state image map changes another image on page

Copy linkTweet thisAlerts:
Jun 20.2006

hello, I have an us map with the states outlined with 50 diff. image maps. I want to have a onmouseover and onmouseout event to change a different image on the page to say the state name and for it to return to the original image once off the image map. I have tried many techniques and know i have come close but haven’t quiet got it. here is a sample image map
<map name=”Delaware”>
<area shape=”poly” coords=”86,262,71,206,53,205,37,202,24,210,16,217,24,228,19,228,9,232,14,239,24,242,27,244,19,252,9,258,15,269,22,269,23,276,30,277,36,281,28,293,9,301,14,304,36,290,50,279,47,275,57,264,55,270,66,269,69,262,75,266,82,266,96,268,124,286,132,284,125,274,105,261,101,268,86,261″ href=”contact.html” onMouseOver=”if (document.images) document.images[‘state’].src = ‘images/home.png'” onMouseOut=”if (document.images) document.images[‘state’].src = ‘images/about.png'” alt=”Alaska”>
I want to also pre-load the images..thanks

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@KTspeedJun 20.2006 — For the picture could you have a div with an id of "picture" or whatever and then put the normal image in there.

Then you could use:

onmouseover="tostate('delaware')" and onmouseout="tonormal()"

instead of what you were using, but this would require you also haveing a javascript with the following code:
[CODE]<script type="text/javascript">
function tostate(state){
thesrc=state+".png" // or if your using a different file extension replace it with that
document.getElementById('picture').innerHTML="<img src='"+thesrc+" />
}
function tonormal(){
document.getElementById('picture').innerHTML="<img src='normal.png' />" // replace with actual file name
}
</script>[/CODE]

I would do it with the functions like this just because i think its easier to read.

This does assume however that all your picture files have the same file extension. If they do not have the same file extension you would change

onmouseover="tostate('delaware')"

to

onmouseover="tostate('delaware.png')"

and change the function tostate() to this:
[CODE]function tostate(state){
document.getElementById('picture').innerHTML="<img src='"+state+" />
}[/CODE]


For the preloading images use:
[CODE]<script type="text/javascript">
de= new Image();
de.src="delaware.png";
</script>[/CODE]

These werent tested so something maybe incorrect.

BTW those are quite impressive coords
Copy linkTweet thisAlerts:
@GregL83authorJun 21.2006 — seems like your on the right track, however, the mouseover event removes the image and does not load the second one. Also, with preloading, does it matter that the code is onmouseover="tostate('delaware.png') because it seems like that would just load the image directly... anyhow here is some of my code thus far maybe you can help some more...thanks a bunch by the way:

<script type="text/javascript">

de= new Image();

de.src="images/about.png";

</script>

<script type="text/javascript">

function tostate(state){

document.getElementById('test').innerHTML="<img src='"+state+" />"

}

function tonormal(){

document.getElementById('test').innerHTML="<img src='images/home.png' />"

}

</script>

</head>

<body>

<div align="center"><img src="images/find.jpg" alt="Find" width="697" height="105"></div>

<div align="center">

<table width="508" height="486" border="0">

<tr>

<td width="502" height="480" align="center" valign="top" background="images/border.jpg"><div align="center">

<p class="style2">CLICK STATE WHERE SCENE IS LOCATED </p>

<p><img src="images/us_map.jpg" alt="Map" width="481" height="315" border="0" usemap="#States"></p>

<div id="test" class="test">

<p><img src="images/home.png" alt="test" width="61" height="34"></p>

</div>

</div></td>

</tr>

</table>

</div>

<p align="center">&nbsp;</p>

<map name="States">

<area shape="poly" coords="86,262,71,206,53,205,37,202,24,210,16,217,24,228,19,228,9,232,14,239,24,242,27,244,19,252,9,258,15,269,22,269,23,276,30,277,36,281,28,293,9,301,14,304,36,290,50,279,47,275,57,264,55,270,66,269,69,262,75,266,82,266,96,268,124,286,132,284,125,274,105,261,101,268,86,261" href="states/alaska.html" alt="Alaska" onmouseover="tostate('images/about.png')" and onmouseout="tonormal()">

P.S. you think that the map coords are going to sign. slow down loading times...
Copy linkTweet thisAlerts:
@GregL83authorJun 21.2006 — ohh man this is boiling me!!! it works in firefox but not ie.....anybody know why?
Copy linkTweet thisAlerts:
@KTspeedJun 23.2006 — Ok i figured it out.

document.getElementById('test').innerHTML="<img src='"+state+" />"

is suppose to be:

document.getElementById('test').innerHTML="<img src='"+state+"' />"

There suppose to a single quote after the +state+"

Sorry about that little mistake.
×

Success!

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

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

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