Mobile Friendly Website

CSSPLAY

Doing it with style

CSS DEMOSCSS image maps

Date : Pre 2006

For all modern browsers


This demo is too wide for your mobile screen.
Please view on a tablet or PC.

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


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.


Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.

  1. If you are using this on a personal web site then please retain the copyright comment in the stylesheet.
    A support donation is now required for this demonstration.
  2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and again a support donation is required.
  3. 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.

Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


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


Free, practical CSS menus, layouts, and examples


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page