Image Map Coordinates for different browsers...

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!

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>

Genius! :clap:

Thanks Tino!

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.

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

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.php?main_page=page&id=27

It must be something trivial that I cannot see.

Ideas?

Thank you.

So...
With html the maps did not scale.
With CSS the image is not scaling.

Getting closer.

Any kind help welcome. :)

PS: Here is a simple tutorial for CSS image maps:
http://css.flepstudio.org/en/css-tutorials/image-map-in-css.html

Just resize your image to the size that is displayed on your website. That is the easiest and reduces the filesize as well. Doesnt make a lot of sense to have a large image and display it small.

That would be nice, but it does not work. Why?

Because if I size it for Firefox, it will spill over in IE and Chrome, and the maps will be off.

If I resize it for IE, then it will be short in Firefox.

Also, if I have a larger image, people can zoom up and the image will keep resolution.

So unfortunately I have to figure out what's wrong with my CSS that is not allowing the image to resize.

This is my current code:

#home_graphics_btm{
width: 66em;
height: 20em;
background: url(../images/home_graphics_btm.jpg) no-repeat;
display: block;
margin-top: 400px;
}
#newsletter {
float: left;
position:absolute;
width : 21em;
height: 11em;
margin-left: 0em;
margin-top: .75em;
}
#specials { 
float: left;
position:absolute;
width : 17em;
height: 11em;
margin-left: 23em;
margin-top: .75em;
}
#shipping {
float: left;
position:absolute;
width : 11em;
height: 11em;
margin-left: 42em;
margin-top: .75em;
}
#shopping { 
float: left;
position:absolute;
width : 11em;
height: 11em;
margin-left: 54em;
margin-top: .75em;
}

Thank you. :smile: