CSS Map Creator

why work hard? BETA

CSS Maps

Usually, using the regular HTML map is enough, however, if you're building a page on Facebook (using FBML), or you want to manipulate the map in various ways such as highlighting the areas, the HTML Map will not suffice. The best alternative is the CSS map – The CSS Map is basically a <div> element with your image as a backround, and blank anchor tags as the areas. Using the CSS Map will allow you to style the areas however you like including adding a hover style to them using standart CSS rules.

Click here to create a CSS Map now



Areas inside a CSS map

The downside of the CSS Map is that the areas inside are basically simple anchor(<a>) tags. The anchor tags are less flexible than the <area> tags in terms of shape - the area tag supports circles and custom polygons and the anchor tags don't. However, some of the desired effects can be achieved using CSS3. With CSS3 you can round the corners of the anchor until it's an ellipse or a circle (using the border-radius rule), and you can even rotate the anchor to any angle (using the transform: rotate() rule). Combining these two features of CSS3 will cover most uses of the area tag.

*Note that CSS3 will not display properly on older web browsers.