1 Image map and 11 image swaps

@mickapooJun 08.2009

I have a map of a state, and in that state are 11 counties. I’m trying to create an image map and whenever the mouse rolls over certain coordinates, I want to swap images. The entire image will be swapped out.

I have the image to use as the main image map, and then I have all 11 images that I want to have swapped out when one of the counties is moused over. I also have the coordinates for all 11 of the counties. The main image map and the images I want to swap are all the same size. Then on mouseover, in addition to having the image swapped out, I also want a small text box to appear, similar to the link below.

I am trying to achieve this sort of effect, but won’t need multiple pop up messages within each territory. I will only need one.

~~[url]~~http://www.worldofwarcraft.com/burningcrusade/townhall/outlandmap.html[/url]

I took a peek at their code but am far too much of a js novice to figure out how and what to extrapolate and change for my use.

If anyone can help me, I would really appreciate it! Thank you!

to post a comment

JavaScript

10 Comments(s) _↴

@mickapooauthorJun 09.2009 — #I've been playing around with it and this is what I have so far:

http://www.hybriddesign.net/map/

If you hover over the bottom part of the map you will see the cursor turn to a hand and this links to my first region (www.volusia.org). I have 11 of these regions all together. I already have all of the coordinates.

I am not sure what I did wrong but I need for the main image (map.jpg) to be swapped out with mapR1.jpg upon mouseover of those same coordinates.

Then I also would like a text box to pop up, with a hyperlink to the county's website (www.volusia.org).

This is what I have:

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html xhtml="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 <title>Region 4</title>
 <SCRIPT LANGUAGE="javascript">
 
 Image1 = new Image(602,542)
 Image1.src = "map.jpg"
 
 Image2 = new Image(602,542)
 Image2.src = "mapR1.jpg"
 
 
 </SCRIPT>
 </head>
 <body>
 <SCRIPT LANGUAGE="javascript">
 function region1() {
 document.emp.src = Image2.src; return true;
 }
 
 function original() {
 document.emp.src = Image1.src; return true;
 }
 
 </SCRIPT>
 
 <IMG NAME="WV" SRC="map.jpg" USEMAP="#map" border="0">
 <MAP NAME="map">
 
 <AREA SHAPE="poly" ALT="Region 1" COORDS="99,474, 104,480, 113,497, 123,502, 134,509, 145,505, 158,492, 171,493, 184,501, 194,501, 214,495, 220,486, 234,487, 247,479, 268,476, 285,470,
 290,459, 287,449, 276,446, 261,446, 241,431, 225,425, 205,425, 186,419, 176,410, 159,403, 147,415, 138,433, 125,447, 117,459, 98,474" HREF="http://www.volusia.org" onMouseOver="region1()" onMouseOut="original()">
 
 </MAP>
 </body>
 </html>
 [/CODE]

Thank you for your help!

@vwphillipsJun 09.2009 — #

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html xhtml="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 <title>Region 4</title>
 <SCRIPT LANGUAGE="javascript">
 
 Image1 = new Image(602,542)
 Image1.src = "http://www.hybriddesign.net/map/map.jpg"
 
 Image2 = new Image(602,542)
 Image2.src = "http://www.hybriddesign.net/map/mapR1.jpg"
 
 
 </SCRIPT>
 </head>
 <body>
 <SCRIPT LANGUAGE="javascript">
 function region(nu) {
 document.getElementById('tst').src = window['Image'+nu].src; return true;
 }
 
 </SCRIPT>
 
 <IMG id="tst" SRC="http://www.hybriddesign.net/map/map.jpg" USEMAP="#map" border="0">
 <MAP NAME="map">
 
 <AREA SHAPE="poly" ALT="Region 1" COORDS="99,474, 104,480, 113,497, 123,502, 134,509, 145,505, 158,492, 171,493, 184,501, 194,501, 214,495, 220,486, 234,487, 247,479, 268,476, 285,470,
 290,459, 287,449, 276,446, 261,446, 241,431, 225,425, 205,425, 186,419, 176,410, 159,403, 147,415, 138,433, 125,447, 117,459, 98,474" HREF="http://www.volusia.org" onMouseOver="region(2)" onMouseOut="region(1)">
 
 </MAP>
 </body>
 </html>
 
 [/CODE]

@mickapooauthorJun 09.2009 — #Thank you so much! That worked perfectly. Now I'm just trying to figure out how to have a text box pop up that would provide the user with some basic info. Something sort of like this one: http://web.ncf.ca/ad995//pdqlib/popup.html. I found a script for having a pop up text box, and tried integrating it, but can't get it to work.

I put this in the head:

[CODE]
 <style type="text/css">
 #dhtmltooltip{
 position: absolute;
 width: 150px;
 border: 2px solid black;
 padding: 2px;
 background-color: lightyellow;
 visibility: hidden;
 z-index: 100;
 /*Remove below line to remove shadow. Below line should always appear last within this CSS*/
 filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
 }
 </style>[/CODE]

and this inside the body:

[CODE]
 <div id="dhtmltooltip"></div>
 
 <script type="text/javascript">
 
 /***********************************************
 * Cool DHTML tooltip script- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)
 * This notice MUST stay intact for legal use
 * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
 ***********************************************/
 
 var offsetxpoint=-60 //Customize x offset of tooltip
 var offsetypoint=20 //Customize y offset of tooltip
 var ie=document.all
 var ns6=document.getElementById && !document.all
 var enabletip=false
 if (ie||ns6)
 var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""
 
 function ietruebody(){
 return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
 }
 
 function ddrivetip(thetext, thecolor, thewidth){
 if (ns6||ie){
 if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
 if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
 tipobj.innerHTML=thetext
 enabletip=true
 return false
 }
 }
 
 function positiontip(e){
 if (enabletip){
 var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
 var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
 //Find out how close the mouse is to the corner of the window
 var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
 var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20
 
 var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000
 
 //if the horizontal distance isn't enough to accomodate the width of the context menu
 if (rightedge<tipobj.offsetWidth)
 //move the horizontal position of the menu to the left by it's width
 tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
 else if (curX<leftedge)
 tipobj.style.left="5px"
 else
 //position the horizontal position of the menu where the mouse is positioned
 tipobj.style.left=curX+offsetxpoint+"px"
 
 //same concept with the vertical position
 if (bottomedge<tipobj.offsetHeight)
 tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
 else
 tipobj.style.top=curY+offsetypoint+"px"
 tipobj.style.visibility="visible"
 }
 }
 
 function hideddrivetip(){
 if (ns6||ie){
 enabletip=false
 tipobj.style.visibility="hidden"
 tipobj.style.left="-1000px"
 tipobj.style.backgroundColor=''
 tipobj.style.width=''
 }
 }
 
 document.onmousemove=positiontip
 
 </script>
 [/CODE]

then I placed this inside the <AREA> tag:

[code]
 onMouseover="ddrivetip('Visit Yahoo.com')";
 onMouseout="hideddrivetip()"[/CODE]

However, I couldn't get it to work. Is it because I already have one "onMouseover" already there? You can see my actual page at www.hybriddesign.net/map/index2.html

Thank you so much for your help.

@vwphillipsJun 10.2009 — #

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html xhtml="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 <title>Region 4</title>
 <style type="text/css">
 #tt{
 position: absolute;
 width: 150px;
 border: 2px solid black;
 padding: 2px;
 background-color: lightyellow;
 visibility: hidden;
 z-index: 100;
 }
 </style>
 <SCRIPT LANGUAGE="javascript">
 
 Image1 = new Image(602,542)
 Image1.src = "http://www.hybriddesign.net/map/map.jpg"
 
 Image2 = new Image(602,542)
 Image2.src = "http://www.hybriddesign.net/map/mapR1.jpg"
 
 
 </SCRIPT>
 </head>
 <body>
 <SCRIPT LANGUAGE="javascript">
 function region(nu) {
 document.getElementById('tst').src = window['Image'+nu].src; return true;
 }
 
 var TTObj=false;
 
 function tt(id,txt){
 var e=e||window.event||arguments.callee.caller.arguments[0];
 TTObj=document.getElementById(id);
 TTObj.innerHTML=txt;
 TTObj.style.visibility='visible';
 ttpos(e);
 }
 
 function ttpos(e){
 if (TTObj){
 var e=e||window.event||arguments.callee.caller.arguments[0];
 var pos=zxcMse(e);
 TTObj.style.left=pos[0]+(pos[0]<zxcWWHS()[0]/2?10:(-TTObj.offsetWidth-5))+'px';
 TTObj.style.top=pos[1]-(pos[1]<zxcWWHS()[3]+zxcWWHS()[1]-TTObj.offsetHeight-20?0:TTObj.offsetHeight)+'px';
 }
 }
 
 function tthide(){
 TTObj.style.visibility='hidden';
 TTObj=false;
 
 }
 function zxcMse(ev){
 if(!ev) var ev=window.event;
 if (document.all) return [ev.clientX+zxcDocS()[0],ev.clientY+zxcDocS()[1]];
 return [ev.pageX,ev.pageY];
 }
 
 function zxcDocS(){
 if (!document.body.scrollTop) return [document.documentElement.scrollLeft,document.documentElement.scrollTop];
 return [document.body.scrollLeft,document.body.scrollTop];
 }
 
 function zxcWWHS(){
 if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
 else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
 return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
 }
 
 
 document.onmousemove=ttpos
 
 </SCRIPT>
 
 <IMG id="tst" SRC="http://www.hybriddesign.net/map/map.jpg" USEMAP="#map" border="0">
 <MAP NAME="map">
 
 <AREA SHAPE="poly" ALT="Region 1" COORDS="99,474, 104,480, 113,497, 123,502, 134,509, 145,505, 158,492, 171,493, 184,501, 194,501, 214,495, 220,486, 234,487, 247,479, 268,476, 285,470,
 290,459, 287,449, 276,446, 261,446, 241,431, 225,425, 205,425, 186,419, 176,410, 159,403, 147,415, 138,433, 125,447, 117,459, 98,474" HREF="http://www.volusia.org" onMouseOver="region(2);tt('tt','thetext');" onMouseOut="region(1);tthide();">
 
 </MAP>
 <div id="tt"></div>
 
 
 </body>
 </html>[/CODE]

@mickapooauthorJun 10.2009 — #Thank you so much Vic, that's perfect!

Question about the tool tip... I changed the font of the tool tip successfully by modifying the style sheet, but how can I make the URL blue and underlined? I know the image is what is clickable and the URL itself won't be clickable, I just want the URL to be blue and underlined.

I tried several things, none of which worked.

1. Tried adding inline style using span:

[CODE]<AREA SHAPE="POLY" ALT="Region 1" COORDS="" HREF="http://www.volusia.org" onMouseOver="region(2);tt('tt','Volusia<br /><span style="color: #0000CC; text-decoration: underline;">http://www.volusia.org</span><br />Counties: Volusia');" onMouseOut="region(1);tthide();"> [/CODE]

2. Then I tried the same as above but substituting <DIV> for <SPAN>. That didn't work either.

3. Next I tried putting <DIV class="link"> around the URL and putting the info in the style sheet.

4. And then lastly I tried:

[CODE]<AREA SHAPE="POLY" ALT="Region 1" COORDS="" HREF="http://www.volusia.org" onMouseOver="region(2);tt('tt','Volusia<br /><font color="#0000CC"><u>http://www.volusia.org</u></font><br />Counties: Volusia');" onMouseOut="region(1);tthide();"> [/CODE]

I'm all out of ideas. I have tried everything I know of! Any help you can give is appreciated! Thanks again for all of your help.

@vwphillipsJun 10.2009 — #

[CODE] onMouseOver="region(2);tt('tt','Volusia<br /><span style='color:#0000CC;text-Decoration:underline;' >http://www.volusia.org</span><br />Counties: Volusia');"[/CODE]

@mickapooauthorJun 12.2009 — #Thank you Vic, so very much!

@inzzzomniaOct 23.2009 — #Wow, this is exactly what I was looking for, an image map that swaps images combined with a tooltip!

Let's say there's a list on the left hand side, with the different regions shown on the map (with the corresponding links). Is there a way to make the image swap when a link in the list is hoovered?

I would appreciate it, a lot!

@inzzzomniaOct 23.2009 — #To clarify, like this example (the second one): http://www.htmlite.com/faq011.php

@inzzzomniaOct 23.2009 — #I should have giving it a try before i asked for help, it turned out to be really easy, even for a novice...
[CODE]<a href="" onMouseOver="region(2);" onMouseOut="region(1);">This is linked text</a> [/CODE]

Also in #JavaScript _↴

How to detect Stylesheet's media in FF/NS ?Please Help -Deadline g etting hit !!! Javascirpt Activating JS msg box with text link?

Success!

Help @mickapoo spread the word by sharing this article on Twitter...

Tweet This

1 Image map and 11 image swaps

10 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

1 Image map and 11 image swaps

10 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #JavaScript _↴