[Vomster]

I'm creating an image map and the image I'm working with is very small. I'm having trouble getting the correct coords for the poly aspect of it. I need these to be pretty accurate since they are small.

Is there a way to force a border around it so I can see that I'm on target? I've tried adding the border property but that doesn't seem to help. If I can get the first one down, then the rest shouldn't be a problem.

If anymore information in needed, just let me know.

[MacAnimeGirl]

Do you have any code I can look at?

[Vomster]

Sure

<map name="battleground">
<!-- This would be for the first image below. --> 
<area shape="poly" href="http://www.google.com/" coords="34,1,53,11,53,31,34,40,16,30,16,11">  
</map>

<!-- This is the actual image that will be the map but all it is is transparent but will lay over the code below. -->
<img src="filler.png" style="position:absolute; left:15px; z-index:2;" id="1" border="0" width="375" height="100" usemap="#battleground">

<!-- 
This section is a bunch of images with transparent background and a hexagon image on them. 
They are positioned to be flush up against each other. And these are underneath the image above.
-->
<img src="test.png" style="position:absolute; left:15px; z-index:1;" id="1" border="0" width="38" height="40">
<img src="test.png" style="position:absolute; left:53px; z-index:1;" id="2" border="0" width="38" height="40">
<img src="test.png" style="position:absolute; left:91px; z-index:1;" id="3" border="0" width="38" height="40">
<img src="test.png" style="position:absolute; left:129px; z-index:1;" id="4" border="0" width="38" height="40">
<img src="test.png" style="position:absolute; left:167px; z-index:1;" id="5" border="0" width="38" height="40">
<img src="test.png" style="position:absolute; left:205px; z-index:1;" id="6" border="0" width="38" height="40">
<img src="test.png" style="position:absolute; left:243px; z-index:1;" id="7" border="0" width="38" height="40">
<img src="test.png" style="position:absolute; left:281px; z-index:1;" id="8" border="0" width="38" height="40">
<img src="test.png" style="position:absolute; left:319px; z-index:1;" id="9" border="0" width="38" height="40">
<img src="test.png" style="position:absolute; left:357px; z-index:1;" id="10" border="0" width="38" height="40">

<img src="test.png" style="position:absolute; left:34px; top:39px; z-index:1;" id="1" border="0" width="38" height="40">
<img src="test.png" style="position:absolute; left:72px; top:39px; z-index:1;" id="1" border="0" width="38" height="40">
<img src="test.png" style="position:absolute; left:110px; top:39px; z-index:1;" id="1" border="0" width="38" height="40">
<img src="test.png" style="position:absolute; left:148px; top:39px; z-index:1;" id="1" border="0" width="38" height="40">
<img src="test.png" style="position:absolute; left:186px; top:39px; z-index:1;" id="1" border="0" width="38" height="40">
<img src="test.png" style="position:absolute; left:224px; top:39px; z-index:1;" id="1" border="0" width="38" height="40">
<img src="test.png" style="position:absolute; left:262px; top:39px; z-index:1;" id="1" border="0" width="38" height="40">
<img src="test.png" style="position:absolute; left:300px; top:39px; z-index:1;" id="1" border="0" width="38" height="40">
<img src="test.png" style="position:absolute; left:338px; top:39px; z-index:1;" id="1" border="0" width="38" height="40">

[xerxes333]

You can't add a border the a hot spot on an image map(that I'm aware of). What you will need to do is create a separate image (with the hot spot bordered) for each mouse over hot spot and pre-load them

[Vomster]

Let me start by saying, I'm not that good with Javascript...

I tried making it when I mouse over that area on the image that an outline would appear over the coords that were given in the <area shape> but it is not displaying the images. I made a n image with the outline on it so it would be a separate image.

<area shape="poly" href="http://www.google.com/" name="test" coords="34,1,53,11,53,31,34,40,16,30,16,11" onmouseover="document.test.src='test_outline.png'" style="z-index:2">

[Vomster]

I figured out what I was doing wrong...

I was trying to make the image map and accommodate for where the image was in the browser but I just needed to worry about what the location is in the image itself as long as... the background image lines up with top image.