Image Maps - Revisited

5th March 2010

Area One
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum tempor commodo. Morbi at sapien sit amet enim dapibus tempus vel et magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In et fermentum nisi.
Area Two
Proin odio lectus, dignissim et lacinia id, hendrerit a magna. Integer aliquet lacus a ipsum pretium egestas. Nunc condimentum sollicitudin felis nec lacinia. Duis non magna tortor. Nulla dictum nisi sit amet velit sodales ut faucibus magna ultrices. Sed laoreet mi sed metus dictum pharetra.
Area Three
Donec nisi turpis, euismod in gravida ut, elementum in orci. Mauris molestie iaculis odio non tincidunt. Suspendisse ut magna neque, sed egestas orci. Curabitur molestie ultrices rhoncus. Cras molestie mi et erat semper venenatis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Area Four
Sed non leo non eros interdum pretium sit amet non sem. Cras porta tempus risus eget tristique. Etiam scelerisque imperdiet rhoncus. Cras ultrices egestas congue. Donec hendrerit molestie viverra. Ut ultricies purus cursus dui gravida sed facilisis erat laoreet. Maecenas et turpis ac nunc ultricies semper.
Area Five
In nibh ligula, aliquam non interdum vehicula, sodales ac orci. Donec eleifend ante elementum neque hendrerit sagittis. In a justo enim, non porta felis. Mauris nec nibh eu libero imperdiet egestas a sit amet ante. Nam vestibulum posuere adipiscing. Praesent vitae gravida dui. Cras quis imperdiet mauris.

copyright © stu nicholls - CSS play


It has been a little while since I have produced a new image map demonstration and as I have had many requests for a replacement to the html imagemap that can closely map irregular shapes I thought that I would show you a basic method for this.

The above 'map' shows interlocking irregular shapes that have been mapped using a series of rectangles combined into links so that you can hover any area to see it change from a raised edge to a flat color. The size of the rectangles governs the coarseness of the areas.

I have also added an information panel for each area that will show beneath the map.

So you can hover the map to see the area and text, and you can also click the area to hold it on screen.

Tested in IE6, IE7, IE7 emulation, IE8, Firefox, pera, Safari(PC), Chrome, Flock and SeaMonkey.

Safari and Chrome will not hold the information on click.

1st October 2011

Now working in Safari and Chrome.


You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.

Please Support CSS play

Please note that if your donation is for a demo/menu then you will need to email me with the url of the demo/menu after making the donation

For more CSS demonstrations I recommend that you visit the Dynamic Drive CSS Library.

Free, practical CSS menus, layouts, and examples

Soft Geometry Creative Industries

Soft Geometry Creative Industries
is a music-based design company located in Bristol UK.
I create artwork for albums, singles, posters and t-shirts.
My work is influenced by punk and post-punk poster and flyer design,
lo-fi photocopy aesthetics,
Francis Bacon and Mark Rothko.

I can provide a start to finish service with my own art and photography, put together work from images provided by yourself, and collaborate on an idea.

Follow CSS play

Facebook   Twitter   Facebook Fan Page