« Name the mountain area of China that is called the Mother of Gardens?
Deriving the trapezium rule from the formula used to find the area of a trapezium? »

How do I create a map area with CSS?

I have an image loaded into the background with text on it and I’m trying to make a link for the text. The text is part of the image. Is there a way to map coordinates using CSS?

That isn’t done with CSS, but with an HTML / XHTML trick, the image map. Here’s how it works…

<img src = "map.gif" map = "#myMap" alt = "map" />
<map id = "myMap">
<area shape = "rect"
coords = "0, 0, 100, 100"
href = "http://www.google.com"
alt = "google"></area>
</map>

This example makes the upper left corner of your image act as a link to google.com.

However, the image map trick isn’t really designed for background images, but for creating hot spots in images created with the <img> tag.

It sounds like you want to create your entire page as a huge graphic and simply make parts of it clickable, to avoid doing the layout work in HTML and CSS. This is possible through absolute positioning and JavaScript, but it’s really not a good idea.

It’s actually easier to just do things the right way and build your links as anchors. You can position them absolutely if you wish, but it’s better to have as much of your content as possible in plain text. This makes it easier to modify, easier for search engines, and much smaller to download than image-based sites.

Hope this helps…

This entry was posted on Tuesday, February 2nd, 2010 at 12:26 pm and is filed under area maps. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Responses to “How do I create a map area with CSS?”

  1. Not in CSS, but http://www.web-wise-wizard.com/web-graphics-design/html-server-side-image-maps.html

    It’s called Server Side Mapping, and there are a number of ways to do it. It’s growing whiskers as a technique, but there are still a lot of sites with information on how to do it.
    References :

  2. That isn’t done with CSS, but with an HTML / XHTML trick, the image map. Here’s how it works…

    <img src = "map.gif" map = "#myMap" alt = "map" />
    <map id = "myMap">
    <area shape = "rect"
    coords = "0, 0, 100, 100"
    href = "http://www.google.com"
    alt = "google"></area>
    </map>

    This example makes the upper left corner of your image act as a link to google.com.

    However, the image map trick isn’t really designed for background images, but for creating hot spots in images created with the <img> tag.

    It sounds like you want to create your entire page as a huge graphic and simply make parts of it clickable, to avoid doing the layout work in HTML and CSS. This is possible through absolute positioning and JavaScript, but it’s really not a good idea.

    It’s actually easier to just do things the right way and build your links as anchors. You can position them absolutely if you wish, but it’s better to have as much of your content as possible in plain text. This makes it easier to modify, easier for search engines, and much smaller to download than image-based sites.

    Hope this helps…
    References :
    HTML / XHTML / CSS All in One for Dummies (author)
    http://www.aharrisbooks.net/xfd

Leave a Reply