Mobile Friendly Website


Doing it with style

CSS DEMOSA scrolling image map

Date : 9th October 2007

For all modern browsers

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


Horizontally scroll the image above to see the Seattle skyline.

There are 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.

IE, Opera, Safari and Chrome will cancel any selection whilst scrolling, but Firefox will keep the current selction on screen whilst scrolling.


Are your image maps too large to fit on a page? If so then why not try the 'scrolling' image map.

This allows you to place hotspots on the scrolling image and at the same time have the hotspot information appear in a fixed position within the scrolling window and also outside of the scrolling window.

I have used this to show some descriptive text and a larger image, but you can use this to show anything you like.

Tested in IE6, IE7, Firefox, Netscape, Mozilla, Opera, Safari and Chrome.

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} 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.


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.


Facebook Twitter rss feed Facebook Fan Page