mouseover function on image map

gabbieshaw
gabbieshaw used Ask the Experts™
on
I am a novice to mouseover function. I am trying to create a mouseover function on an image map of the USA. Every time you mouseover a state I would like to have that state enlarge.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
First, you need to declare your image map - it can have circles, rectangles, or polygons.

<MAP name="USStates">
   <AREA shape="RECT" alt="Colorado" coords="420,5,510,30" href="javascript:popUp('Colorado');">
   <AREA shape="POLY" alt="Texas" coords"320,94,296,130,283,23,320,94,320,94" href="javascript:popUp('Texas');">
   <AREA shape="CIRCLE" alt="Hawaii" coords="611,700,30" href="javascript:popUp('Hawaii');">
</MAP>

For RECT, coords are the positions of the 4 corners.
For POLY, give coords of all vertices - this may take some trial and error.
For CIRCLE, give x and y location of center, then radius.

You then need your JavaScript function to perform the actions (in this case, popUp()).

When you insert your image of the US on your page, you add the ImgMap tag to define which map to use:

<IMG id="imgUS" src="images/usState.gif" useMap="#mapUSStates" border="0">

That's it!

Author

Commented:
I guess that is the part I am confused on.
here is my image map


<img src="C:\My Documents\senior project\states.jpg"  usemap="#nameplate" border=0 >
<map name="nameplate">
        <area shape=poly coords="111,199,153, 198, 153, 232, 209, 282, 206, 320, 181, 320, 157, 302, 148, 301, 114, 251, 114, 239, 109, 235, 112, 119" href="california.html" alt="California">
        <area shape=rect coords="257, 209, 323, 209, 323, 251, 257, 251, 257, 209" href="colorado.html" alt="Colorado">
        <area shape=poly coords="113, 148, 120, 148, 125, 154, 129, 154, 154, 149, 179, 150, 182, 154, 178, 171, 180, 173, 179, 199, 110, 199, 113, 148" href="oregon.html" alt="Oregon">
        <area shape=poly coords="3, 192, 117, 252" href="illinois.html" alt="Illinois">
        <area shape=poly coords="150, 197, 150, 197, 150, 197" href="utah.html" alt="Utah">
       
         

Where in this code do I place the mouseover stuff and how?

Commented:
I really would rethink this... it's going to be a HUGE headache, and really annoying for the user.

I want to mouseover Wyoming, but I have to mouseover a whole bunch of states before I get there, which means I'm going to have a whole mess of popups before I get to the one I want.

Don't make it a mouseover, make it onclick, and I wouldn't necessarily do individual states, but regions. That way you don't have to create a popup for RI (which is going to be hard to click on anyway), but one for New England, which is much easier to click on and will do a half-dozen states with one image.
CompTIA Security+

Learn the essential functions of CompTIA Security+, which establishes the core knowledge required of any cybersecurity role and leads professionals into intermediate-level cybersecurity jobs.

Author

Commented:
I guess that is the part I am confused on.
here is my image map


<img src="C:\My Documents\senior project\states.jpg"  usemap="#nameplate" border=0 >
<map name="nameplate">
        <area shape=poly coords="111,199,153, 198, 153, 232, 209, 282, 206, 320, 181, 320, 157, 302, 148, 301, 114, 251, 114, 239, 109, 235, 112, 119" href="california.html" alt="California">
        <area shape=rect coords="257, 209, 323, 209, 323, 251, 257, 251, 257, 209" href="colorado.html" alt="Colorado">
        <area shape=poly coords="113, 148, 120, 148, 125, 154, 129, 154, 154, 149, 179, 150, 182, 154, 178, 171, 180, 173, 179, 199, 110, 199, 113, 148" href="oregon.html" alt="Oregon">
        <area shape=poly coords="3, 192, 117, 252" href="illinois.html" alt="Illinois">
        <area shape=poly coords="150, 197, 150, 197, 150, 197" href="utah.html" alt="Utah">
       
         

Where in this code do I place the mouseover stuff and how?

Commented:
download a copy of coffeecup image map maker pro plus premiere plenty pa pa pa COOKIES!!!!

Author

Commented:
webwoman. that is a good point but that is how it has to be, not my choice.
The company that is it for, so far only has 6 states that they are in but wants the code for all "just in case"

Author

Commented:
webwoman. that is a good point but that is how it has to be, not my choice.
The company that is it for, so far only has 6 states that they are in but wants the code for all "just in case"
When you add the UseMap tag to the image, it auto-add the mouseOver functionality. With a map attached, whenever you have your mouse in a defined region, it looks to see what link or code you have assigned to that region in the area shape tag.

Take your shape for Utah, for example.
right now, the href is "utah/html". So, whenever you mouseOver that region, it should try to load utah.html in your browser.

You would need to write a JavaScript that loads an inlarged image or Utah into a new window (or layer/div in your case). Then change the href to call that script, like:

href="javascript:popUp('Utah');"

this way you could use the same function, but just pass in what state you have.

For example, if you just wanted to open a new window with the state, your function could be:

<script language="javascript">
function popUp(state)
{
var newWindow;
newWindow = window.open('utah.html', 'Utah');
}
</script>
Oops,

for re-usability, the script should read:


<script language="javascript">
function popUp(state)
{
var page = state + '.html'
var newWindow = window.open(page, 'Utah');
}
</script>

Author

Commented:
pillbug22,

Will the code look like this?


<script language="javascript">
function popUp(state)
{
var page = state + '.html'
var newWindow = window.open(page, 'Utah');
}
</script>
</HEAD>

...

      <AREA shape=polygon coords="152,143 148,184 121,182 142,207 154,202 174,223 179,237 192,241 189,225 213,207 222,206 218,172 172,164 171,145" href="tx/index.html">
      <!-- UTAH -->
      <AREA shape=rect coords="150, 197, 150, 197, 150, 197" href="..\utah.html" href="javascript:popUp('Utah');">

Author

Commented:
pillbug22,

Will the code look like this?


<script language="javascript">
function popUp(state)
{
var page = state + '.html'
var newWindow = window.open(page, 'Utah');
}
</script>
</HEAD>

...

      <AREA shape=polygon coords="152,143 148,184 121,182 142,207 154,202 174,223 179,237 192,241 189,225 213,207 222,206 218,172 172,164 171,145" href="tx/index.html">
      <!-- UTAH -->
      <AREA shape=rect coords="150, 197, 150, 197, 150, 197" href="..\utah.html" href="javascript:popUp('Utah');">

Author

Commented:
one more question,
where do I place the second image?

Commented:
try this


<script language="javascript">
function popUp(state)
{
var page = state + '.html'
var newWindow = window.open(page, state);
}
</script>
</HEAD>

...

     <AREA shape=polygon coords="152,143 148,184 121,182 142,207 154,202 174,223 179,237 192,241 189,225 213,207 222,206 218,172 172,164 171,145" href="javascript:popUp('Tx');" >
     <!-- UTAH -->
     <AREA shape=rect coords="150, 197, 150, 197, 150, 197" href="javascript:popUp('Utah');">
That should do it.

Be aware though, that as it is (open a new window), for every pixel that you move you mouse over Utah, a new window will appear (could turn into quite a few).

From what it sounds like, you need to create seperate layers/div on the page that are hidden, then the javascript function sets the visibility = true. That way, when you mouseOver, the new layer with the state appears, but when you leave the region, it hides again.

Author

Commented:
one more question,
where do I place the second image?

Author

Commented:
one more question,
where do I place the second image?

Author

Commented:
one more question,
where do I place the second image?

Author

Commented:
oops! I hit the enter button tooo many times.

pillbug22,
So where do i place the code for the second image.

and does it look like this?
<AREA shape=rect coords="150, 197, 150, 197, 150, 197" href="javascript:popUp('Utah');" visibility = true>

Commented:
no thats incorrect pillbug22 href= not onmouseover=


that will only popup a window when you "CLICK" the "HREF" link. lol =)

the second image should acutally be in an html file, you should have 50. california.html, oregon.html, washington.html, idaho.html, etc etc etc. Put those in the same place as your page your loading or If you want to move them and load only pictures. you can do change this



<script language="javascript">
function popUp(state)
{
var page = '/images/' + state + '.gif'
var newWindow = window.open(page, state);
}
</script>
</HEAD>


then just save your images as yoursite.com/images/california.gif
yoursite.com/images/oregon.gif
yoursite.com/images/washington.gif

Commented:
loooool you might as well write the whole thing, including the <div stlye:absolute  tags for her, lol have fun pillbug22
That should do it.

Be ware, though, that as it is, you will open a new window for every pixel that your mouse moves over Utah...could be quite a few...

For your application, you probably want to make layers/divs for each of the states (with the enlarged image) that are hidden, then the popUp function sets the visibility = true.
Darn, posted twice...

anyway, you are correct xmetrix - my mistake...you would have to use onMouseOver = "javascript:popUp('Utah');" instead of href = ... The href would open the image when you click it, and the onMouseOver will do the MouseOver...

Author

Commented:
don't make fun of me because i don't know who to do something.
That is why I am asking for help!

Commented:
im not making fun of you. sorry. i just think you would benifit from a program like dreamweaver MX... it has all kinds of imagemap things....

Commented:
What's he's asking is that we come up with a way to make each state get visibly larger..not open in a popup window.  The difficulty with this task is that in order for the state to become bigger, you'd have to do one of two things:  a) Change the entire image or b) Write a snippet of code that toggles the visibility of 50 different DIV's that each contain a new image of the state in question.  In that case, you'd have to have each DIV prepositioned so that it only appeared exactly where you wanted it to.  What may in fact be easier, would be to simply create 50 different images, each with the state in question made larger.  With that in mind, the following code would work just fine.  Lets say that we roll our mouse over texas.  Here's what the code might look like:

<area shape="rect" coords="blahbahblah" href="blah.htm" onMouseOver="map.src='texasmap.jpg'" onMouseOut="map.src='map.jpg'">

texasmap.jpg would be an image of your original map with the State of texas appearing larger and as if it were "hovering" above the other states.  Such an effect can be accomplished in nearly any reasonable graphics program.  When the mouse moved into the area specified in your image map, the ENTIRE map would then be reloaded and replaced with the map that has texas enlarged.  Now, this would be rather taxing on some user's machines, and unless you predefined the sources of the images, would require that every time a user's mouse rolled over the state, that the new map be downloaded.  This obviously wouldn't be fast enough.  The alternative might go as follows, whereby you write a piece of javascript to pre-load the images at the same time the page is being downloaded:

<html>
<head>
<title>Image Map</title>

<script language="javascript">
var alabama = new Image;
alabama.src = "alabama.jpg";
...
var wyoming = new Image;
wyoming.src = "wyoming.jpg";

function flipIt(state,status) {
  if (status == "on") {
    map.src = eval(state + ".src");
  } else {
    map.src = "map.jpg";
  }
}
</script>

</head>
<body>

<img src="map.jpg" name="map" usemap="#states">

<map name="states">
<area shape="rect" coords="blahblah" onMouseOver="flipIt('alabama','on');" onMouseOut="flipIt('','off')">
</map>

</body>
</html>

In this code, blahblahblah is pretty obvsiouly going to be replaced by the more useful code.  and the "..." in between the script tags would be replaced by code for each individual state, which I'm sure you have the brains to figure out given what I've put there already.  You'll need to define your areas for each state, but other than that, this will work.  I hope this helps!  Let me know if you need anything else!
I agree, that woudl be the easiest and quickest way of doing it.

Probably the cleanest was woudl be to make 50 different DIV tags (including the enlarged state pic) that are hidden on PageLoad, and the function called by the mouseOver makes the correct DIV tage become visible. Then when you move to a new state, the first DIV (state) dissapears, and th new one shows up.

That route would take knowledge of setting DIV stypes (borders, colors, vivibility, positioning, etc), but would probbaly return the best results for your application.

Commented:
Once again, the problem with using DIV tags would be the fact that you'd have to use absolute positioning, which can change depending on a person's screen resolution or the dimensions of their browser window.  It is by no means "clean" to position items in this manner, and 50 DIV tags would be a GREAT DEAL more code to write (and hence code that could have errors in it) than the code I pasted would be.  I don't recommend that route at all.  You're talking about a lot of code for something that can be accomplished with what I've pasted above.  And DIV tags render differently across browsers.  The rollover function I created should be cross-browser compatible.

Commented:
Not only is it a ton of code, a headache for the user, and a monster to handle, it's going to take FOREVER to load.

One decent size map, *50* smaller images, all the code, 50 divs... it's a nightmare.

You COULD do it in Flash, which would still be a bear but only one piece, and it would still be a major annoyance for the user.

I've got a mouseover thing somewhere that worked on divs...won't work in NN6 or Mozilla, but it will for IE and NN4+. Keyed off the cursor position, so the popup was where it was supposed to be regardless of the screen size. It worked on click, but you could certainly change it to work off mouseover. If nothing else, it would show them how stupid and annoying it's going to be, and save you a HELL of a lot of useless work.

Let me see if I can find it when I get home... post something else in this thread to remind me. ;-)

Commented:
One thing you haven't mentioned is exaclty how large this map is.  If its not that big, my system would work pretty well.  If its too large and its not compressed properly, it'd take such a great deal of time to download, that it wouldn't be worth it.  Its up to you.

Author

Commented:
I hope the last question.

is this correct?

<!--Alabama-->
       <area shape="poly" coords="462,278,484,278,492,306,488,312,491,319,466,319,466,328,456,329,454,311," onMouseOver="flipIt('california','on');" onMouseOut="flipIt('','off')" href="california.html" alt="California">
      <!-- ALASKA -->
      <AREA shape=polygon coords="" onMouseOver="flipIt('alaska','on');" onMouseOut="flipIt('','off')" href="alaska.html" alt="Alaska">

Commented:
You need to set up divs for each of your enlarged state graphics.

Can I ask what your client thinks this is going to accomplish that can't be done with just a list of their locations?

Author

Commented:
Don't ask.
That was my point but...they said they will be expanding a lot and want them ALL done now. So ...
I don't know anything about DIVS

Commented:
give me the pictures, html file, and i'll div it up for you, and explain how it all works. ;)

Author

Commented:
ok
what is your email

Commented:
xmetrix@xmetrix.net

Author

Commented:
can i get an example of what div looks like in this

<!--Alabama-->
      <area shape="poly" coords="462,278,484,278,492,306,488,312,491,319,466,319,466,328,456,329,454,311," onMouseOver="flipIt('california','on');" onMouseOut="flipIt('','off')" href="california.html" alt="California">

please and thank you;-)

Author

Commented:
I have to have this done by noon and it is 8am
any suggestions?

Author

Commented:
can anyone help me? please?????

Commented:
You've got the code right.  I was waiting for a long time to see your response.  Sorry I took so long.

Commented:
By the way..the DIV idea is VERY bad.  You DO NOT need to do that lol.  This is what I've been trying to explain.  The problem is that someone suggested that you need to put your DIV code in AFTER I explained that it was unnecessary and that it would work fine if you simply followed my instructions.  I aplogize for the confusion, but my code would've worked fine if there weren't conflicting ideas posted afterward.  

Commented:
However, your code swaps out the ENTIRE map everytime you mouse over something, and as soon as you do that you lose the reference for the mouseovers. Not the best idea.

You need divs, and you need to show/hide the divs with the images based on the mouseover. Or windows, which is likely to obscure the map.

Ask them to show you an example. Make THEM find something you can work from. (Bet they can't find any... or if they do find something, it's going to immediately show them how stupid the idea is) ;-)

Author

Commented:
more confused than ever.

here is what i have so far...

var California = new Image;
California.src = "\images\states_california.jpg";
....
function flipIt(state,status) {
 if (status == "on") {
   map.src = eval(state + ".src");
 } else {
   map.src = "\images\states.jpg";
 }
}
</script>
....
<!--California-->
      <area shape="poly" coords="462,278,484,278,492,306,488,312,491,319,466,319,466,328,456,329,454,311," onMouseOver="flipIt('california','on');" onMouseOut="flipIt('','off')" href="california.html" alt="California">


it all works except for the second image doesn't appear.


Commented:
When you say the second image doesn't appear, do you mean that when you roll the mouse over the link, the new image doesn't appear?  In order for the effect to work, you have to make sure you've actually created an image to replace the original when you put the mouse over the link.  

You DO NOT lose the references for the mouseovers if you swap out the image.  The code I wrote simply replaces the source of the image with another.  The image map is still being used just fine.  I've tested this myself.  I've posted a working example (though very crude) at the following link:

http://duositex.exenex.com/map/testfile.htm

The code I used on that site is a very simple version of what I posted above.  It can be easily modified and optimized for your needs.  Let me know if thats the effect you're looking for by rolling your mouse cursor over the state of kansas.

Commented:
Btw webwoman, I've done a little work as you suggested, and I find it to be a great idea.  :p

Commented:
>>The code I wrote simply replaces the source of the image with another.  The image map is still being used just fine.

Yes, but how can you tell what is what? And why swap out the ENTIRE image? I doubt that's what they're looking for, or that the maps are the same size as the US one.

gabbieshaw, is that what you're looking for? An image map that swaps out the ENTIRE map, leaving the user with no frame for reference for why their images are flickering between different maps?

Commented:
Check this...
http://www.anotherwebsite.com/motest/cs-main.html
(none of the links work, I didn't upload any of the other parts of the site -- it's old).
 
I think it's probably more what you're looking for. Note how long it takes to load on a dialup connection (probably close to a minute at least), and take into consideration that there are only ***6*** mouseovers and divs. For ***50** of them, it's going to take close to FIVE MINUTES (or more) to load on a dialup connection.

And note too that there is a TON of coding, it DOES use divs, and it would need to be re-written to some extent to work for NN6/Mozilla.

Commented:
No offense, but you seem to have no idea what you're talking about.

>>Yes, but how can you tell what is what? And why swap out the ENTIRE image?

What is that supposed to mean?  The whole idea here is that you've specified areas of an image to be links.  In this case they are the individual states.  When you put the mouse cursor over the state, the image changes to be replaced with an image thats entirely the same with one difference.  That difference being that the state you put the mouse over is now enlarged and is "hovering" over the rest of the map just like in my example.  VERY VERY simple.  Why swap out the entire image?  Because coded 50 div tags, and positioning them all absolutey would be an unheard of pain in the rear end.  

>>I doubt that's what they're looking for, or that the maps are the same size as the US one.

What?  What is that supposed to mean?  The whole idea is that the map appears to be "overlayed" by an enlarged version of the state that the mouse hovers over.  When you swap out the entire map, you're replacing it with one that has the EXACT SAME dimensions.  Nothing tricky here folks.  It works just fine and its not that complicated.  Note that I can't note how long it takes to load on a dialup connection because I don't have one.  The idea I had will be a bandwidth hog only for a few seconds. Those two sample images I did were 7k (the first map) and 9k (the new map) and I made NO effort whatsoever in compressing them well.  Thats not THAT bad in terms of bandwidth.  I'll come up with another solution if you insist on saying this one is no good, but it will work essentially the same with one minor exception: it won't take forever to load.  Please understand, I'm not trying to ruin anyone's life.  I just came up with a simple solution for a problem that, at first, seems like it would be daunting.

Commented:
Btw..your sample is pretty good webwoman.  That looks like it was a lot of work!  Perhaps the long loads could've been avoided by making some of the text inside each ballon HTML?  That way you could simply use that balloon as the background for the DIV tags, and and it would only have to load once!  Make sense?  Also, the page re-downloads all of your mouseover graphics (not the bubbles) which means that someone with a slow connection has to wait for their modem to send them a new image when you put the mouse over a link.  If you pre-load all of the images, you avoid this.

Author

Commented:
gabbystestarea.8m.com

here is examples of the maps

you tell me what is the best way to make it happen!

Commented:
Here's some updated code that actually works..its the same principle, just simplified and corrected.  Sorry for the mixup:

<html>
<head>

<title>Test</title>

<script language="javascript">
original = new Image;
original.src = "states.jpg";

california = new Image;
california.src = "california.jpg";

function on(state) {
    usaimage.src = eval(state + ".src");
}

function off() {
    usaimage.src = original.src;
}

</script>

</head>
<body>

<img src="states.jpg" alt="United States" border=0 usemap="#usamap" name="usaimage">

<map name="usamap">
<area shape="poly" coords="blahblahblah" href="blahblah.htm" onMouseOver="on('california');" onMouseOut="off();">
</map>

</body>
</html>

====== END CODE ========

I'm sure you can derive from that exactly what you need.  One BIG suggestion:  Crop your jpg image to make it smaller, and redo the coordinates.  You've got a gigantic image file there thats entirely unecessary.  Here is a link to my working example:

http://duositex.exenex.com/map/index.htm

Commented:
One quick note:

If the user has their browser set to check for new versions of stored pages (in MSIE) ever visit to the page, this method will become very tedious for their browser.  If they have it set to check automatically, the images load all at once in the background due to the javascript image objects being created inside the script tags (california = new Image).  This way, when I person rolls their mouse over the image, the new files are already on the user's hard drive, and don't resort to downloading them again in order for them to work.  If you ask me, this is a glitch in the interpretation of JavaScript on the behalf of Microsoft.  Images set to load in this fashion inside Javascript should always be preloaded, and should not be affected by the user's temporary internet files settings.  You have been warned.  I'm now going to create an example using DIV tags, to appease the masses.  Will report back soon.

Commented:
Discovery:

If you use the div tags method, and the graphics specified by gabbieshaw, it is impossible to complete the request.  When you make the div tag visible, it covers your image map, making it impossible to hide it again unless an "onClick" is specified.  I other words, I've been right all along, and I was criticized for it.  My method works fine, and the DIV tags method, as I said originally, is either impractical, doesn't meet the needs of gabbieshaw, or doesn't work at all.  Thankyou for shopping.
Commented:
Update:

I'm pretty darn clever...here's the WORKING divmap code, to contradict myself immensely.  Sorry for putting my foot in my mouth, and my humblest of apologies to webwoman for contradicting her in regards to DIV tags being possible.  Not only are they possible, but they're quite simple.  Here's the code:

<html>
<head>

<title>Test</title>

<style type="text/css">
.newState {
    position: absolute;
    visibility: hidden;
    z-index: 1;
}
</style>

<script language="javascript">
function toggle(state) {
    var show = eval(state).style.visibility;
    (show == "visible") ? eval(state).style.visibility = "hidden" : eval(state).style.visibility = "visible";
}
</script>

</head>
<body>

<div class="newState" id="california"><img src="california.jpg" border=0 usemap="#divmap"></div>
<img src="states.jpg" alt="United States" border=0 usemap="#usamap" name="usaimage">

<map name="usamap">
<area shape="poly" coords="111,197,150,197,151,231,207,283,208,301,181,299,156,282,149,280,124,247,114,228,114,222,108,212" href="#" onMouseOver="toggle('california');">
</map>

<map name="divmap">
<area shape="poly" coords="111,197,150,197,151,231,207,283,208,301,181,299,156,282,149,280,124,247,114,228,114,222,108,212" href="#" onMouseOut="toggle('california');">
</map>

</body>
</html>

====== End Code ======

Notice that I have a duplicate of the image map, with two different names.  One contains the OnMouseOver event, and the other contains the OnMouseOut event.  The code is structured so that the newly visible DIV tag contains an image that uses the second image map (called divmap) to supply the "clickability" and "hoverability" of the effect.  In other words, once the DIV becomes visible, it has the same image map applied to it that the original image did, thus giving it the appearance that only the state has appeared and the map itself hasn't changed.  So there we have it.  Two working examples that meet the clients needs.  Both are relatively annoying.  However, they function.  Let me know if you have any questions about polishing up either method to make them more applicable to your situation gabbieshaw.

Author

Commented:
MAN YOU ARE GOOD!! IT WORKS!! IT WORKS!!

Commented:
So do I get the points?? :)

Commented:
Like I said, mine was old. Totally unoptimized, horribly bloated, and never completely finished. But it did demonstrate the point.

I didn't realize that you were doing the entire map with only the one state enlarged, I thought you were doing just the state in place of the US map. Don't know why I had that in my head. With the state overlayed, it makes perfect sense to swap the images.

The advantage of the divs is that you can have more than just the map -- you can have different links on each div, or text, or other info... whatever you want.

Your code is much simpler than mine, which was one of the first complicated javascripts I did, and it shows. ;-) Glad you could improve on it.

Author

Commented:
Yes, after one more question.
;-)

coming shortly I want to try something real fast

Author

Commented:
ok, here is the question.

I am adding the other states and it will only let me display ONLY one state. example, I have california and colorado and it only displays california because it is first.

It is totally possible and probable that I am not doing it correctly.
So, are these the three sections that I change for each state?
<div class="newState" id="california"><img src="california.jpg" border=0 usemap="#divmap"></div>
<img src="states.jpg" alt="United States" border=0 usemap="#usamap" name="usaimage">

<map name="usamap">
<area shape="poly" coords="111,197,150,197,151,231,207,283,208,301,181,299,156,282,149,280,124,247,114,228,114,222,108,212" href="#" onMouseOver="toggle('california');">
</map>

<map name="divmap">
<area shape="poly" coords="111,197,150,197,151,231,207,283,208,301,181,299,156,282,149,280,124,247,114,228,114,222,108,212" href="#" onMouseOut="toggle('california');">

but for some reason I don't think that is correct but since I am just learning this part, what do i know!

thank you again for all of your help!!!!!

Author

Commented:
for example

<!--California-->
<div class="newState" id="california"><img src="\images\states_california.jpg" border=0 usemap="#divmap"></div>
<img src="\images\states.jpg" alt="United States" border=0 usemap="#usamap" name="usaimage">

<map name="usamap">
<area shape="poly" coords="111,197,150,197,151,231,207,283,208,301,181,299,156,282,149,280,124,247,114,228,114,222,108,212" href="california.html" onMouseOver="toggle('california');">
</map>

<map name="divmap">
<area shape="poly" coords="111,197,150,197,151,231,207,283,208,301,181,299,156,282,149,280,124,247,114,228,114,222,108,212" href="california.html" onMouseOut="toggle('california');">
</map>

<!--Nevada-->

<div class="newState" id="nevada"><img src="\images\states_nevada.jpg" border=0 usemap="#divmap"></div>
<img src="\images\states.jpg" alt="United States" border=0 usemap="#usamap" name="usaimage">

<map name="usamap">
<area shape="poly" coords="322,210,320,253,256,252,255,210" href="nevada.html" onMouseOver="toggle('nevada');">
</map>

<map name="divmap">
<area shape="poly" coords="322,210,320,253,256,252,255,210" href="nevada.html" onMouseOut="toggle('nevada');">
</map>

Author

Commented:
NEVER MIND

I got it. I am smart too!!

The points are yours

Author

Commented:
thanks for all of your help!

Commented:
Glad I could help!  Thanks!  All you needed to do was add the separate area lines to each map :)  That way the coordinates for the area you want to click are the SAME on each image (both the enlarged/overlayed state image and the original map).  See?  Just make sure you keep adding them to both.  If you forget any, you'll be able to flip the image on with the link, but then it won't disappear again!  There ya go!

Author

Commented:
i am getting runtime errors LOTS of them
any ideas

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial