In General, Tips, Tutorials Mar 25, 200920

CSS Image Map Techniques and Tutorials

A CSS Image Map by definition is using a single image with defining multiple clickable hotspots, whether to show information or as navigation. There are a multitude of solutions, below we have listed and demonstrated by far the best and the most helpful techniques and tutorials.

When the title says Image Map, It doesn’t mean basic image replacement, and when It says Pure CSS, It doesn’t mean CSS blended with javascript or ajax (which of course there are solutions), its CSS and only CSS. Lets make this perfect.

CSS Image Maps, Redux (Tutorial)

Tutorial URL : CSS Image Maps, Redux.

This CSS Image technique makes use of the Sliding Doors technique combined with a definition list. The sliding doors technique allows you to contain all your image rollover effects in one image file, and make use of the background-position CSS property to “shift” the image in any direction. By adding a :hover effect to your CSS, you can shift the image to a desired position.

CSS Image Maps With Pop-Up Tool Tips (Tutorial)

Tutorial URL : CSS Image Maps With Pop-Up Tool Tips.

Using an unordered list, a couple of images, and a little CSS, you can create an accessible “image map” with pop-up tool tips that will provide your readers with more information on the links the map contains. Unlike some image maps, the one outlined here has the advantage of working in older versions of Internet Explorer.

How do I… Use CSS to create an image map on my Web site? (Tutorial)

Tutorial URL : How do I… Use CSS to create an image map on my Web site?.

While Image maps are still considered valid HTML, you can use this CSS method to separate content from presentation. It also has the advantage of using less code for more complex image maps, and is good practice for knowing when to declare IDs rather than Classes in your CSS code.

Creating an Image Map using CSS only (Tutorial)

Tutorial URL : Creating an Image Map using CSS only.

With this tutorial you will be shown how to turn an ordinary Definition List into an Image Map, using nothing more than CSS that should work in all modern browsers. In this tut you will be walked through the styling one step at a time, fully explaining the reason for each style and showing the results of each step.

Night of the Image Map (Tutorial)

Tutorial URL : Night of the Image Map.

This tutorial dates back to 2003, don’t be put off by this, the depth and detail that the author gives will be helpful to anyone that wants to learn, understand and organize CSS.
In this tutorial you will use CSS to create invisible links and float them over the background image.

CSS Image Rollover Map (Tutorial)

Tutorial URL : CSS Image Rollover Map.

This tutorial is fairly advanced, roll your sleeves up and dig in. This map, including mouse over national flags, is constructed with one image and positioning on hover controlled with a css file.

Experiment with CSS Image Rollover Map (Technique )

URL : Experiment with CSS Image Rollover Map.

An image map of Europe, when you hover over each country the national flag will show.

Experiment with CSS Image Rollover Map (Technique )

URL : Experiment with CSS Image Rollover Map.

Hover your mouse over the image to reveal three areas of interest. Then hover over each area to reveal an enlarged detail with text.

Return of the Image Maps (Technique )

URL : Return of the Image Maps.

With this technique the image map that has pop up speech bubbles of various sizes with pointers on all four side. The speech bubbles also contain a short piece of text and links to further information on the web.

A Scrolling Image Map (technique )

URL : A Scrolling Image Map.

This is a horizontally scrolling image that has ten hotspots indicated by a white rectangle. Just click on any of these hotspots to see a larger image to the right and a small piece of information in the left hand corner of the scrolling image.

By Paul Andrew