By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,306 Members | 1,621 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,306 IT Pros & Developers. It's quick & easy.

How get MAP to work with mouseover

P: n/a
The following passes the test as valid, and the mouseover for the six
indicated areas also work.
I need various areas to link to another page, including the six
mentioned.
However either the MAP works by itself, or the below mouseover works,
but not both.
Would someone be kind as to lend some help?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Stripper wells and production</title>
<style type="text/css">
#centerImage {text-align: center;}
</style>
</head>

<body>
<div>
<img src="Usa52.gif" alt="USA map" usemap="#USMap"
style="position: top: 2px; left: 4px; height: 431px; width: 760px;
border-style:none" />
</div>

<div style="position: absolute; top: 64px; left: 264px; "
<img style = "" ALT=""
src='USblk.gif' onmouseover="this.src='USred.gif';"
onmouseout="this.src='USblk.gif';" >
</div>
<div style="position: absolute; top: 175px; left: 623px; "
<img style = "" ALT=""
src='Ired.gif' onmouseover="this.src='Iblk.gif';"
onmouseout="this.src='Ired.gif';" >
</div>
<div style="position: absolute; top: 150px; left: 444px; "
<img style = "" ALT=""
src='IIred.gif' onmouseover="this.src='IIblk.gif';"
onmouseout="this.src='IIred.gif';" >
</div>
<div style="position: absolute; top: 334px; left: 372px; "
<img style = "" ALT=""
src='IIIred.gif' onmouseover="this.src='IIIblk.gif';"
onmouseout="this.src='IIIred.gif';" >
</div>
<div style="position: absolute; top: 140px; left: 299px; "
<img style = "" ALT=""
src='IVred.gif' onmouseover="this.src='IVblk.gif';"
onmouseout="this.src='IVred.gif';" >
</div>
<div style="position: absolute; top: 166px; left: 179px; "
<img style = "" ALT=""
src='Vred.gif' onmouseover="this.src='Vblk.gif';"
onmouseout="this.src='Vred.gif';" >
</div>

<div>
<map id="Usa52" name="Usa52">
<area shape="rect" alt="US" coords="264,64,288,79"
href="gUS.htm" title="US" >
<area shape="poly" alt="CA" coords="157,164,151,168,151,173,148,182,148,189,
153,213,159,216,156,222,157,225,159,228,162,229,16 2,235,161,239,166,254,169,
254,167,262,171,269,177,270,177,272,181,276,184,27 6,184,278,185,280,191,280,
196,295,219,297,225,281,224,265,184,209,189,171"
href="gCA.htm" title="CA" >
<area shape="default" nohref="nohref" alt="" >
</map>
</div>
</body>
</html>
Apr 11 '06 #1
Share this Question
Share on Google+
11 Replies


P: n/a
Well, you got a few things wrong here, so let me just point them out.

First of all, I don't know if it was just a bad paste or what, but you
forgot right brackets on your opening div tags. So after your 'left"
property be sure to close the div tag with ">".

Secondly, your "usemap" attribute has to match the value of the "name"
attribute in your map tag.

Once you have these two things fixed, the rest is fine. Below is the
fixed code...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Stripper wells and production</title>
<style type="text/css">
#centerImage {text-align: center;}
</style>
</head>

<body>
<div>
<img src="Usa52.gif" alt="USA map" usemap="#USMap"
style="position: top: 2px; left: 4px; height: 431px; width:
760px; border-style:none" />
</div>

<div style="position: absolute; top: 64px; left: 264px; ">
<img style = "" ALT=""
src='USblk.gif' onmouseover="this.src='USred.gif';"
onmouseout="this.src='USblk.gif';" >
</div>
<div style="position: absolute; top: 175px; left: 623px; ">
<img style = "" ALT=""
src='Ired.gif' onmouseover="this.src='Iblk.gif';"
onmouseout="this.src='Ired.gif';" >
</div>
<div style="position: absolute; top: 150px; left: 444px; ">
<img style = "" ALT=""
src='IIred.gif' onmouseover="this.src='IIblk.gif';"
onmouseout="this.src='IIred.gif';" >
</div>
<div style="position: absolute; top: 334px; left: 372px; ">
<img style = "" ALT=""
src='IIIred.gif' onmouseover="this.src='IIIblk.gif';"
onmouseout="this.src='IIIred.gif';" >
</div>
<div style="position: absolute; top: 140px; left: 299px; ">
<img style = "" ALT=""
src='IVred.gif' onmouseover="this.src='IVblk.gif';"
onmouseout="this.src='IVred.gif';" >
</div>
<div style="position: absolute; top: 166px; left: 179px; ">
<img style = "" ALT=""
src='Vred.gif' onmouseover="this.src='Vblk.gif';"
onmouseout="this.src='Vred.gif';" >
</div>

<div>
<map id="Usa52" name="USMap">
<area shape="rect" alt="US" coords="264,64,288,79"
href="gUS.htm" title="US" >
<area shape="poly" alt="CA"
coords="157,164,151,168,151,173,148,182,148,189,
153,213,159,216,156,222,157,225,159,228,162,229,16 2,235,161,239,166,254,169,
254,167,262,171,269,177,270,177,272,181,276,184,27 6,184,278,185,280,191,280,
196,295,219,297,225,281,224,265,184,209,189,171"
href="gCA.htm" title="CA" >
<area shape="default" nohref="nohref" alt="" >
</map>
</div>
</body>
</html>

Apr 11 '06 #2

P: n/a
Martyr2 wrote:
Well, you got a few things wrong here, so let me just point them out.

First of all, I don't know if it was just a bad paste or what, but you
forgot right brackets on your opening div tags. So after your 'left"
property be sure to close the div tag with ">".

Secondly, your "usemap" attribute has to match the value of the "name"
attribute in your map tag.

Once you have these two things fixed, the rest is fine. Below is the
fixed code...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Stripper wells and production</title>
<style type="text/css">
#centerImage {text-align: center;}
</style>
</head>

<body>
<div>
<img src="Usa52.gif" alt="USA map" usemap="#USMap"
style="position: top: 2px; left: 4px; height: 431px; width:
760px; border-style:none" />
</div>

<div style="position: absolute; top: 64px; left: 264px; ">
<img style = "" ALT=""
src='USblk.gif' onmouseover="this.src='USred.gif';"
onmouseout="this.src='USblk.gif';" >
</div>
<div style="position: absolute; top: 175px; left: 623px; ">
<img style = "" ALT=""
src='Ired.gif' onmouseover="this.src='Iblk.gif';"
onmouseout="this.src='Ired.gif';" >
</div>
<div style="position: absolute; top: 150px; left: 444px; ">
<img style = "" ALT=""
src='IIred.gif' onmouseover="this.src='IIblk.gif';"
onmouseout="this.src='IIred.gif';" >
</div>
<div style="position: absolute; top: 334px; left: 372px; ">
<img style = "" ALT=""
src='IIIred.gif' onmouseover="this.src='IIIblk.gif';"
onmouseout="this.src='IIIred.gif';" >
</div>
<div style="position: absolute; top: 140px; left: 299px; ">
<img style = "" ALT=""
src='IVred.gif' onmouseover="this.src='IVblk.gif';"
onmouseout="this.src='IVred.gif';" >
</div>
<div style="position: absolute; top: 166px; left: 179px; ">
<img style = "" ALT=""
src='Vred.gif' onmouseover="this.src='Vblk.gif';"
onmouseout="this.src='Vred.gif';" >
</div>

<div>
<map id="Usa52" name="USMap">
<area shape="rect" alt="US" coords="264,64,288,79"
href="gUS.htm" title="US" >
<area shape="poly" alt="CA"
coords="157,164,151,168,151,173,148,182,148,189,
153,213,159,216,156,222,157,225,159,228,162,229,16 2,235,161,239,166,254,169,
254,167,262,171,269,177,270,177,272,181,276,184,27 6,184,278,185,280,191,280,
196,295,219,297,225,281,224,265,184,209,189,171"
href="gCA.htm" title="CA" >
<area shape="default" nohref="nohref" alt="" >
</map>
</div>
</body>
</html>

I appreciate the comments as well as the fixed code; will check it
out later (the prog is on another drive and OS).
Apr 11 '06 #3

P: n/a
Robert Baer wrote:
Martyr2 wrote:
Well, you got a few things wrong here, so let me just point them out.

First of all, I don't know if it was just a bad paste or what, but you
forgot right brackets on your opening div tags. So after your 'left"
property be sure to close the div tag with ">".

Secondly, your "usemap" attribute has to match the value of the "name"
attribute in your map tag.

Once you have these two things fixed, the rest is fine. Below is the
fixed code...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Stripper wells and production</title>
<style type="text/css">
#centerImage {text-align: center;}
</style>
</head>

<body>
<div>
<img src="Usa52.gif" alt="USA map" usemap="#USMap"
style="position: top: 2px; left: 4px; height: 431px; width:
760px; border-style:none" />
</div>

<div style="position: absolute; top: 64px; left: 264px; ">
<img style = "" ALT=""
src='USblk.gif' onmouseover="this.src='USred.gif';"
onmouseout="this.src='USblk.gif';" >
</div>
<div style="position: absolute; top: 175px; left: 623px; ">
<img style = "" ALT=""
src='Ired.gif' onmouseover="this.src='Iblk.gif';"
onmouseout="this.src='Ired.gif';" >
</div>
<div style="position: absolute; top: 150px; left: 444px; ">
<img style = "" ALT=""
src='IIred.gif' onmouseover="this.src='IIblk.gif';"
onmouseout="this.src='IIred.gif';" >
</div>
<div style="position: absolute; top: 334px; left: 372px; ">
<img style = "" ALT=""
src='IIIred.gif' onmouseover="this.src='IIIblk.gif';"
onmouseout="this.src='IIIred.gif';" >
</div>
<div style="position: absolute; top: 140px; left: 299px; ">
<img style = "" ALT=""
src='IVred.gif' onmouseover="this.src='IVblk.gif';"
onmouseout="this.src='IVred.gif';" >
</div>
<div style="position: absolute; top: 166px; left: 179px; ">
<img style = "" ALT=""
src='Vred.gif' onmouseover="this.src='Vblk.gif';"
onmouseout="this.src='Vred.gif';" >
</div>

<div>
<map id="Usa52" name="USMap">
<area shape="rect" alt="US" coords="264,64,288,79"
href="gUS.htm" title="US" >
<area shape="poly" alt="CA"
coords="157,164,151,168,151,173,148,182,148,189,
153,213,159,216,156,222,157,225,159,228,162,229,16 2,235,161,239,166,254,169,

254,167,262,171,269,177,270,177,272,181,276,184,27 6,184,278,185,280,191,280,

196,295,219,297,225,281,224,265,184,209,189,171"
href="gCA.htm" title="CA" >
<area shape="default" nohref="nohref" alt="" >
</map>
</div>
</body>
</html>

I appreciate the comments as well as the fixed code; will check it out
later (the prog is on another drive and OS).


I do appreciate the suggestions, but the MAP part still does not work.
Presumedly, something like:
<area shape="rect" alt="US" coords="264,64,288,79"
href="gUS.htm" title="US" onMouseOver="this.src='USred.gif';" >
is supposed to allow JavaScript (and work).
What is shown here after onMouseOver is a "stolen" working equivalent.
But JavaScript does not work either.
Seems i can get JavaScript, or equivalent to work, *or* map to work,
BUT i need both.
What i want:
Mouse pointer moves to specified area, color changes *and* URL is
available (seen in line at bottom of browser).
Apr 12 '06 #4

P: n/a
The answer and code I provided does work as everything you shown was
meant to. The links rollover, the map areas are detected, and that is
everything your code was doing.I fully tested it before posting the
solution to you.

To do anymore on top of this, I suggest you create a separate
JavaScript function and through the onMouseOver event, call the
function. Put an alert in the function and then just test that. Make
sure it fires when you mouseover the area. Look at the link below,
first question for an example of this...

http://msdn.microsoft.com/msdnmag/issues/01/04/web/
From this function you can then grab the image map parts (add an id

attribute to each section) and change the source. Unfortunately I spent
all my time with this on the answering of the first question. This is
all I can advise you of from now on.

Apr 12 '06 #5

P: n/a
Martyr2 wrote:
The answer and code I provided does work as everything you shown was
meant to. The links rollover, the map areas are detected, and that is
everything your code was doing.I fully tested it before posting the
solution to you.

To do anymore on top of this, I suggest you create a separate
JavaScript function and through the onMouseOver event, call the
function. Put an alert in the function and then just test that. Make
sure it fires when you mouseover the area. Look at the link below,
first question for an example of this...

http://msdn.microsoft.com/msdnmag/issues/01/04/web/
From this function you can then grab the image map parts (add an id

attribute to each section) and change the source. Unfortunately I spent
all my time with this on the answering of the first question. This is
all I can advise you of from now on.

I used your code, and the fact is that only part worked for me.
So far, i have not been able to get both "MAP visiting" and
"onMouseOver for URL" to work.
Here are the URLs that show only one (MAP or onMouseOver) works, and
not both.
If anyone can tell me how to get both to work, i would appreciate it.
http://oil4lessllc.com/omy2.htm
http://oil4lessllc.com/sw4.htm

Please no bitching that this is a retail site; it was the only way i
could get the (posted) code to a URL site.
Apr 12 '06 #6

P: n/a
I told you, the example at omy2.htm does not have a "usemap" attribute
that matches the name of your <map name=""> tag. Those two have to
match for images maps to work. Secondly, you are missing right angle
brackets ">".

Add the attribute "usemap=#Usa52" to your Usa52.gif. Just doing that
will get your map to start working. Then close those opening div tags
with right angle brackets and your links will start working. The code
you have at omy2.htm is not valid html and your map image is not
anchored to your <map> tag at all (which is why the map doesn't work).

Now, after a second look I even found more problems. In your header
declaration, you need to put quotes after text/html and after the
equals in charset=.

Lastly, I broke out the functionality into a function like I had
mentioned before. I then attached each region of the map to the
function and pass the correct pad number. The result is that when you
hover over a state, it will highlight the corresponding pad number. I
also made each image a link to the corresponding gPad.htm.

Also I must mention that your pad regions of the map coordinates were
outside the bounds of your image, so they were useless. I gather you
are totally ripping off this code from another site which is a no no
because otherwise you would have known all these mistakes.

I am hoping this is solves everything. I have gone as far as posting
you a working demo at the following link... I went way overboard
helping with this. Consider yourself lucky. Next time save yourself
some trouble and word your problem better.

Working demo...

http://www.team-clanx.org/map/example.htm

Apr 12 '06 #7

P: n/a
Martyr2 wrote:
I told you, the example at omy2.htm does not have a "usemap" attribute
that matches the name of your <map name=""> tag. Those two have to
match for images maps to work. Secondly, you are missing right angle
brackets ">".

Add the attribute "usemap=#Usa52" to your Usa52.gif. Just doing that
will get your map to start working. Then close those opening div tags
with right angle brackets and your links will start working. The code
you have at omy2.htm is not valid html and your map image is not
anchored to your <map> tag at all (which is why the map doesn't work).

Now, after a second look I even found more problems. In your header
declaration, you need to put quotes after text/html and after the
equals in charset=.

Lastly, I broke out the functionality into a function like I had
mentioned before. I then attached each region of the map to the
function and pass the correct pad number. The result is that when you
hover over a state, it will highlight the corresponding pad number. I
also made each image a link to the corresponding gPad.htm.

Also I must mention that your pad regions of the map coordinates were
outside the bounds of your image, so they were useless. I gather you
are totally ripping off this code from another site which is a no no
because otherwise you would have known all these mistakes.

I am hoping this is solves everything. I have gone as far as posting
you a working demo at the following link... I went way overboard
helping with this. Consider yourself lucky. Next time save yourself
some trouble and word your problem better.

Working demo...

http://www.team-clanx.org/map/example.htm

I ran omy2.htm thru the validator at http://validator.w3.org/ and it
passes, so i do not understand why it is not valid.
I will try your suggetions; thanks.
Apr 13 '06 #8

P: n/a
Martyr2 wrote:
I told you, the example at omy2.htm does not have a "usemap" attribute
that matches the name of your <map name=""> tag. Those two have to
match for images maps to work. Secondly, you are missing right angle
brackets ">".

Add the attribute "usemap=#Usa52" to your Usa52.gif. Just doing that
will get your map to start working. Then close those opening div tags
with right angle brackets and your links will start working. The code
you have at omy2.htm is not valid html and your map image is not
anchored to your <map> tag at all (which is why the map doesn't work).

Now, after a second look I even found more problems. In your header
declaration, you need to put quotes after text/html and after the
equals in charset=.

Lastly, I broke out the functionality into a function like I had
mentioned before. I then attached each region of the map to the
function and pass the correct pad number. The result is that when you
hover over a state, it will highlight the corresponding pad number. I
also made each image a link to the corresponding gPad.htm.

Also I must mention that your pad regions of the map coordinates were
outside the bounds of your image, so they were useless. I gather you
are totally ripping off this code from another site which is a no no
because otherwise you would have known all these mistakes. ** The MAP pad regions were made by (crude) tracing of the roman
numerals themselves (in MapEdit - the generator for the outlines), and
the overlay images Vblk.gif, Vred.gif are obviously rectangles.
I have done all of the work myself, including the breaking apart of a
US map into the various regions.
I can always go back and either hand-edit the POLY to RECT and fiddle
with the corners.
You will note that i did not use center, because the placement of
those PAD images and the US images could only be done with absolute.

I am hoping this is solves everything. I have gone as far as posting
you a working demo at the following link... I went way overboard
helping with this. Consider yourself lucky. Next time save yourself
some trouble and word your problem better.

Working demo...

http://www.team-clanx.org/map/example.htm

Thanks for the working demo; very much appreciated.
Apr 13 '06 #9

P: n/a
Martyr2 wrote:
I told you, the example at omy2.htm does not have a "usemap" attribute
that matches the name of your <map name=""> tag. Those two have to
match for images maps to work. Secondly, you are missing right angle
brackets ">".

Add the attribute "usemap=#Usa52" to your Usa52.gif. Just doing that
will get your map to start working. Then close those opening div tags
with right angle brackets and your links will start working. The code
you have at omy2.htm is not valid html and your map image is not
anchored to your <map> tag at all (which is why the map doesn't work).

Now, after a second look I even found more problems. In your header
declaration, you need to put quotes after text/html and after the
equals in charset=.

Lastly, I broke out the functionality into a function like I had
mentioned before. I then attached each region of the map to the
function and pass the correct pad number. The result is that when you
hover over a state, it will highlight the corresponding pad number. I
also made each image a link to the corresponding gPad.htm.

Also I must mention that your pad regions of the map coordinates were
outside the bounds of your image, so they were useless. I gather you
are totally ripping off this code from another site which is a no no
because otherwise you would have known all these mistakes.

I am hoping this is solves everything. I have gone as far as posting
you a working demo at the following link... I went way overboard
helping with this. Consider yourself lucky. Next time save yourself
some trouble and word your problem better.

Working demo...

http://www.team-clanx.org/map/example.htm

WOW! It does both!
Not exactly the way i had in mind, but that is a rather minor detail
i have fixed.
Even tho what i have works, it seems it needs fixing;
http://validator.w3.org/check barfs with 5 errors.
This is what i have at present: http://oil4lessllc.com/StripperWells.htm
I *do* appreciate your great help, and wonder if i should add a
comment in the code giving you some kind of credit, as you did a lot to
get this going.
So, the question is: what kind of statement would you like to see; do
not be shy - i will shamelessly quote what you tell me to say.
And if ther is some kind of donation that you would like to see go
somewhere, state that also.
Apr 13 '06 #10

P: n/a
Yeah I didn't bother checking validity because I did it real quick
while I was at work. However, I don't need a quote or anything. Just
the acknowledgement that I did know what I am talking about is good
enough for me. Glad I got it working for you.

Maybe you should stay on the group until you answer three peoples
questions with good answers. Pay it forward man!

Just kidding. Enjoy!

Apr 14 '06 #11

P: n/a
Martyr2 wrote:
Yeah I didn't bother checking validity because I did it real quick
while I was at work. However, I don't need a quote or anything. Just
the acknowledgement that I did know what I am talking about is good
enough for me. Glad I got it working for you.

Maybe you should stay on the group until you answer three peoples
questions with good answers. Pay it forward man!

Just kidding. Enjoy!

Still...i think i will add credit to the file; say that you did at
least 95% of the coding from my pile of rotten bones.
Apr 14 '06 #12

This discussion thread is closed

Replies have been disabled for this discussion.