CSS image maps

Pre 2006

Map #1

Snow white and the seven dwarfs
Snow White
Sleepy
Happy
Doc
Dopey
Grumpy
Bashful
Sneezy

Map #2

A Group of People
Nancy
Betty
Andy
Mike
Phil
Bob
Jill
Tom

Map #3
Colours of the Rainbow

COLOURS
OF THE
RAINBOW
Red
Orange
Yellow
Green
Blue
Indigo
Violet

copyright © stu nicholls - CSS play

Information

Map #1

Find out their names

This is a CSS version of an image map that also works in IE5.5 and IE6 (IE5.01 does not hover well but the links work).

Just hover your mouse over the image to display areas that can be used as links to other pages.

Hover over each highlighted area to get the name of each dwarf (and Snow White). You will note that this will then be the ONLY active area on the image until you move your mouse off the active area. The links by the way do not lead to anywhere but are just to show in the task bar.

Map #2

Find out their names

This is similar to the Snow White image map but using a slightly different method for highlighting each figure. The names are produced using their href 'titles' and the Definition List text.

Why?

There have been a few sites recently that have produced image maps that either use css AND javascript or will not work in IE. So I decided to have a go at producing a cross browser version of my own. This one is JUST CSS and a standard DEFINITION LIST.

Rainbow

Scan the grey areas with your mouse to reveal the colours of the rainbow.

Once more done with just CSS and a DEFINITION LIST. No images were used in the making of this rainbow.


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.



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

Follow CSS play


Facebook   Twitter   Facebook Fan Page