How get MAP to work with mouseover

**Martyr2** · Apr 11 '06, 07:45 PM

Re: How get MAP to work with mouseover

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>Stripp er 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="th is.src='USred.g if';"
onmouseout="thi s.src='USblk.gi f';" >
</div>
<div style="position : absolute; top: 175px; left: 623px; ">
<img style = "" ALT=""
src='Ired.gif' onmouseover="th is.src='Iblk.gi f';"
onmouseout="thi s.src='Ired.gif ';" >
</div>
<div style="position : absolute; top: 150px; left: 444px; ">
<img style = "" ALT=""
src='IIred.gif' onmouseover="th is.src='IIblk.g if';"
onmouseout="thi s.src='IIred.gi f';" >
</div>
<div style="position : absolute; top: 334px; left: 372px; ">
<img style = "" ALT=""
src='IIIred.gif ' onmouseover="th is.src='IIIblk. gif';"
onmouseout="thi s.src='IIIred.g if';" >
</div>
<div style="position : absolute; top: 140px; left: 299px; ">
<img style = "" ALT=""
src='IVred.gif' onmouseover="th is.src='IVblk.g if';"
onmouseout="thi s.src='IVred.gi f';" >
</div>
<div style="position : absolute; top: 166px; left: 179px; ">
<img style = "" ALT=""
src='Vred.gif' onmouseover="th is.src='Vblk.gi f';"
onmouseout="thi s.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,17 3,148,182,148,1 89,
153,213,159,216 ,156,222,157,22 5,159,228,162,2 29,162,235,161, 239,166,254,169 ,
254,167,262,171 ,269,177,270,17 7,272,181,276,1 84,276,184,278, 185,280,191,280 ,
196,295,219,297 ,225,281,224,26 5,184,209,189,1 71"
href="gCA.htm" title="CA" >
<area shape="default" nohref="nohref" alt="" >
</map>
</div>
</body>
</html>

**Robert Baer** · Apr 11 '06, 10:15 PM

Re: How get MAP to work with mouseover

Martyr2 wrote:
[color=blue]
> 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>Stripp er 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="th is.src='USred.g if';"
> onmouseout="thi s.src='USblk.gi f';" >
> </div>
> <div style="position : absolute; top: 175px; left: 623px; ">
> <img style = "" ALT=""
> src='Ired.gif' onmouseover="th is.src='Iblk.gi f';"
> onmouseout="thi s.src='Ired.gif ';" >
> </div>
> <div style="position : absolute; top: 150px; left: 444px; ">
> <img style = "" ALT=""
> src='IIred.gif' onmouseover="th is.src='IIblk.g if';"
> onmouseout="thi s.src='IIred.gi f';" >
> </div>
> <div style="position : absolute; top: 334px; left: 372px; ">
> <img style = "" ALT=""
> src='IIIred.gif ' onmouseover="th is.src='IIIblk. gif';"
> onmouseout="thi s.src='IIIred.g if';" >
> </div>
> <div style="position : absolute; top: 140px; left: 299px; ">
> <img style = "" ALT=""
> src='IVred.gif' onmouseover="th is.src='IVblk.g if';"
> onmouseout="thi s.src='IVred.gi f';" >
> </div>
> <div style="position : absolute; top: 166px; left: 179px; ">
> <img style = "" ALT=""
> src='Vred.gif' onmouseover="th is.src='Vblk.gi f';"
> onmouseout="thi s.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,17 3,148,182,148,1 89,
> 153,213,159,216 ,156,222,157,22 5,159,228,162,2 29,162,235,161, 239,166,254,169 ,
> 254,167,262,171 ,269,177,270,17 7,272,181,276,1 84,276,184,278, 185,280,191,280 ,
> 196,295,219,297 ,225,281,224,26 5,184,209,189,1 71"
> href="gCA.htm" title="CA" >
> <area shape="default" nohref="nohref" alt="" >
> </map>
> </div>
> </body>
> </html>
>[/color]
I appreciate the comments as well as the fixed code; will check it
out later (the prog is on another drive and OS).

**Robert Baer** · Apr 12 '06, 12:15 AM

Re: MAP still not work with mouseover

Robert Baer wrote:[color=blue]
> Martyr2 wrote:
>[color=green]
>> 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>Stripp er 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="th is.src='USred.g if';"
>> onmouseout="thi s.src='USblk.gi f';" >
>> </div>
>> <div style="position : absolute; top: 175px; left: 623px; ">
>> <img style = "" ALT=""
>> src='Ired.gif' onmouseover="th is.src='Iblk.gi f';"
>> onmouseout="thi s.src='Ired.gif ';" >
>> </div>
>> <div style="position : absolute; top: 150px; left: 444px; ">
>> <img style = "" ALT=""
>> src='IIred.gif' onmouseover="th is.src='IIblk.g if';"
>> onmouseout="thi s.src='IIred.gi f';" >
>> </div>
>> <div style="position : absolute; top: 334px; left: 372px; ">
>> <img style = "" ALT=""
>> src='IIIred.gif ' onmouseover="th is.src='IIIblk. gif';"
>> onmouseout="thi s.src='IIIred.g if';" >
>> </div>
>> <div style="position : absolute; top: 140px; left: 299px; ">
>> <img style = "" ALT=""
>> src='IVred.gif' onmouseover="th is.src='IVblk.g if';"
>> onmouseout="thi s.src='IVred.gi f';" >
>> </div>
>> <div style="position : absolute; top: 166px; left: 179px; ">
>> <img style = "" ALT=""
>> src='Vred.gif' onmouseover="th is.src='Vblk.gi f';"
>> onmouseout="thi s.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,17 3,148,182,148,1 89,
>> 153,213,159,216 ,156,222,157,22 5,159,228,162,2 29,162,235,161, 239,166,254,169 ,
>>
>> 254,167,262,171 ,269,177,270,17 7,272,181,276,1 84,276,184,278, 185,280,191,280 ,
>>
>> 196,295,219,297 ,225,281,224,26 5,184,209,189,1 71"
>> href="gCA.htm" title="CA" >
>> <area shape="default" nohref="nohref" alt="" >
>> </map>
>> </div>
>> </body>
>> </html>
>>[/color]
> I appreciate the comments as well as the fixed code; will check it out
> later (the prog is on another drive and OS).[/color]

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="th is.src='USred.g if';" >
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).

**Martyr2** · Apr 12 '06, 02:55 AM

Re: MAP still not work with mouseover

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...

Web Class

http://msdn.microsoft.com/msdnmag/issues/01/04/web/

[color=blue]
>From this function you can then grab the image map parts (add an id[/color]
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.

**Robert Baer** · Apr 12 '06, 07:35 AM

Re: MAP & mouseover URLs for show and tell

Martyr2 wrote:
[color=blue]
> 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/
>[color=green]
>>From this function you can then grab the image map parts (add an id[/color]
> 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.
>[/color]
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
"onMouseOve r 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.

**Martyr2** · Apr 12 '06, 06:15 PM

Re: MAP & mouseover URLs for show and tell

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=#Us a52" 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...

Page not found – TeamClanX

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

**Robert Baer** · Apr 13 '06, 09:55 AM

Re: MAP & mouseover URLs for show and tell

Martyr2 wrote:[color=blue]
> 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=#Us a52" 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
>[/color]
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.

**Robert Baer** · Apr 13 '06, 10:15 AM

Re: MAP & mouseover URLs for show and tell

Martyr2 wrote:
[color=blue]
> 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=#Us a52" 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.[/color]
** 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.
[color=blue]
>
> 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
>[/color]
Thanks for the working demo; very much appreciated.

**Robert Baer** · Apr 13 '06, 09:45 PM

Re: MAP & mouseover URLs for show and tell

Martyr2 wrote:[color=blue]
> 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=#Us a52" 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
>[/color]
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.

**Martyr2** · Apr 14 '06, 01:25 AM

Re: MAP & mouseover URLs for show and tell

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!

**Robert Baer** · Apr 14 '06, 08:25 AM

Re: MAP & mouseover URLs for show and tell

Martyr2 wrote:
[color=blue]
> 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!
>[/color]
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.

How get MAP to work with mouseover

How get MAP to work with mouseover

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment