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> 11  2962 
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>
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).
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).
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.
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.
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
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.
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.
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.
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!
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. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: J. Makela |
last post by:
Hallo.
This should be a pretty entertaining question for you *real* javascript
writers.. I, being the lowly photoshop guy at an ad agency made the
mistake of actually saying "HTML" in a...
|
by: Alex |
last post by:
On my page I have a lot string like this:
<span onmouseover="callMe(this)" onmouseout="callMe(null)" >abc1</span>
<span onmouseover="callMe(this)" onmouseout="callMe(null)" >abc2</span>
<span...
|
by: scottyman |
last post by:
I can't make this script work properly. I've gone as far as I can with
it and the rest is out of my ability. I can do some html editing but
I'm lost in the Java world. The script at the bottom of...
|
by: Robert Baer |
last post by:
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...
|
by: lofty00 |
last post by:
hello,
sorry about the repost - I've been posting to several groups and I've
decided it's better to make a single repost to all of them rather than
an extra post in each.
I've been trying to...
|
by: Annette Acquaire |
last post by:
I have and image map with a dozen hotspot links on it that I'm trying to
get to open a new image over existing one on mouseover of each COORD. The
only thing I was able to do was swap image on...
|
by: Schannah |
last post by:
I'm trying to create a design which mimics the Radiohead website in the action on this page, but the problem is that they use PHP for the effect and I have no idea about PHP. I'm very amateur: fairly...
|
by: dave345 |
last post by:
This javascript issue is in an app using C# / .Net 2.0 running on XP.
First post, please mention if I mess up any conventions of this forum.
I’ve got a mouseover event that only works properly...
|
by: rjdougan |
last post by:
I am not a developer but need some help with scripts for a client.
I have a script to handle form validation and one that handle mouseover on menu.
The form validation script works fine by it...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
| |
