Image Map

Border for image map

Page 1 of 1

5 Replies - 1718 Views - Last Post: 27 October 2008 - 12:31 PM

#1 Vomster  Icon User is offline

  • D.I.C Head

Reputation: 13
  • View blog
  • Posts: 198
  • Joined: 15-May 08

Image Map

Post icon  Posted 23 October 2008 - 07:49 AM

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.

Is This A Good Question/Topic? 0
  • +

Replies To: Image Map

#2 MacAnimeGirl  Icon User is offline

  • D.I.C Regular

Reputation: 8
  • View blog
  • Posts: 282
  • Joined: 30-September 08

Re: Image Map

Posted 23 October 2008 - 09:15 AM

Do you have any code I can look at?
Was This Post Helpful? 0
  • +
  • -

#3 Vomster  Icon User is offline

  • D.I.C Head

Reputation: 13
  • View blog
  • Posts: 198
  • Joined: 15-May 08

Re: Image Map

Posted 23 October 2008 - 09:48 AM

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




Was This Post Helpful? 0
  • +
  • -

#4 xerxes333  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 31
  • View blog
  • Posts: 504
  • Joined: 05-July 07

Re: Image Map

Posted 23 October 2008 - 12:30 PM

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
Was This Post Helpful? 0
  • +
  • -

#5 Vomster  Icon User is offline

  • D.I.C Head

Reputation: 13
  • View blog
  • Posts: 198
  • Joined: 15-May 08

Re: Image Map

Posted 23 October 2008 - 01:04 PM

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



Was This Post Helpful? 0
  • +
  • -

#6 Vomster  Icon User is offline

  • D.I.C Head

Reputation: 13
  • View blog
  • Posts: 198
  • Joined: 15-May 08

Re: Image Map

Posted 27 October 2008 - 12:31 PM

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.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1