Image Map Coordinates for different browsers...

[hedron]

How do I created an image map that will work on all browsers?

This code (within define_main_page) works only with Firefox. It does not work with IE and Chrome, since they shrink the image relative to Firefox and therefore the map coordinates are no longer valid.

Is there a way to make the coordinates relative to the size of the image?

<style type="text/css">
div.home
img {
width:66em;
}
</style>

<div class="home">
<img border="0" usemap="#Map" src="images/home.jpg" /> 
<map name="Map"> 
  <area href="Link 1" coords="0,13,275,188" shape="rect" />
  <area href="Link 2" coords="310,12,530,187" shape="rect" />
  <area href="Link 3" coords="560,12,700,187" shape="rect" />
  <area href="Link 4" coords="715,12,860,187" shape="rect" />
</map>
</div>

Thank you!

[tino.schlegel]

Define the width and the height of your image and it wont be shrunk by other browsers.

<style type="text/css">
div.home
img {
width:66em;
}
</style>

<div class="home">
<img border="0" width="200px" height="200px" usemap="#Map" src="images/home.jpg" /> 
<map name="Map"> 
  <area href="Link 1" coords="0,13,275,188" shape="rect" />
  <area href="Link 2" coords="310,12,530,187" shape="rect" />
  <area href="Link 3" coords="560,12,700,187" shape="rect" />
  <area href="Link 4" coords="715,12,860,187" shape="rect" />
</map>
</div>

[hedron]

Genius!

Thanks Tino!

[hedron]

Well, somehow that still does not work.

I mapped the coordinates on the original image.

Here is the site:
http://www.saleyla.com

I did not include height because it stretches the image vertically.

Ideas?

Thank you.

[hedron]

Unless there is a solution with the current html code, maybe I should do the maps in CSS, using em for coordinates?

[hedron]

I did the maps in CSS with em coordinates and they appear consistent on all browsers, however somehow I cannot get the image to show up. I have a test page here:
http://www.saleyla.com/store/index.p...age=page&id=27

It must be something trivial that I cannot see.

Ideas?

Thank you.