How get MAP to work with mouseover

Robert Baer

unread,

Apr 10, 2006, 10:59:09 PM4/10/06

to

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>

Martyr2

unread,

Apr 11, 2006, 3:32:43 PM4/11/06

to

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

Robert Baer

unread,

Apr 11, 2006, 6:05:17 PM4/11/06

to

Martyr2 wrote:

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

unread,

Apr 11, 2006, 7:59:11 PM4/11/06

to

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

Martyr2

unread,

Apr 11, 2006, 10:41:34 PM4/11/06

to

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.

Robert Baer

unread,

Apr 12, 2006, 3:17:59 AM4/12/06

to

Martyr2 wrote:

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.

Martyr2

unread,

Apr 12, 2006, 1:59:10 PM4/12/06

to

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

Robert Baer

unread,

Apr 13, 2006, 5:47:40 AM4/13/06

to

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

unread,

Apr 13, 2006, 6:03:46 AM4/13/06

to

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.

Robert Baer

unread,

Apr 13, 2006, 5:33:15 PM4/13/06

to

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

unread,

Apr 13, 2006, 9:17:04 PM4/13/06

to

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

unread,

Apr 14, 2006, 4:11:24 AM4/14/06

to

Martyr2 wrote:

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.