skip to content
Advertise here

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 ©2010 stu nicholls - cssplay.co.uk

CSS play Support


CSS play Recommend

Free, practical CSS menus, layouts, and examples

Follow CSS play

Facebook  Twitter  Facebook Fan Page



Just CSS | Designs for the future

Like the CSS Zen Garden?
Then why not visit Just CSS and see it you can design for the future.




PREVIOUSNEXT

Information

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.




Copyright

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.




  • Each week the Creare Group produce video tutorials for SEO and tips and tricks for the web design industry.
  • We offer nothing but the highest quality SEO, Social Media Optimisation And PPC services to businesses in London

 

CSS play Testimonial

"The citroen.co.uk web site uses
CSS play code for the site drop down menus.
This code works seamlessly in IE 6 & 7, and is an excellent solution to the Creative requirements of the site."

Damon Clark - Brandwidth

CSS play Links