Stu Nicholls | CSSplay | CSS scrolling image map

A scrolling image map

9th October 2007

Pellentesque
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ante. Pellentesque vel augue vel enim imperdiet malesuada. Praesent at nisi in ante posuere pretium.
Suspendisse
Suspendisse mollis, mauris vel aliquam sodales, nunc felis egestas pede, et mollis risus lorem vel magna. Duis ultrices risus. Nunc quis nulla eget lacus lacinia volutpat.
Vestibulum
Aliquam dictum neque a dolor. Suspendisse eleifend, nunc id pharetra blandit, metus lectus pharetra erat, non congue sem ante ut lectus.
Aenean
Pellentesque lacus risus, suscipit tristique, consectetuer quis, venenatis a, enim. Suspendisse vehicula. Proin non lacus. Mauris fermentum risus ut orci.
Fusce
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec id leo. Quisque pulvinar dapibus dui. Fusce tincidunt.
Mauris
Vivamus libero odio, bibendum et, porta vel, ultrices a, mi. Ut metus dui, laoreet ac, nonummy eu, gravida et, est. Duis auctor pulvinar felis.
Maecenas
Curabitur porta tristique quam. Curabitur feugiat aliquam elit. Fusce mollis. Vestibulum tortor pede, gravida quis, pulvinar sit amet, gravida et, magna.
Phasellus
Sed ac erat. Etiam vitae nibh vel odio congue gravida. Duis vel mauris. Nulla facilisi. Suspendisse velit libero, ultrices nec, molestie in, scelerisque ut, pede.
Donec
Phasellus aliquam, magna nec molestie ullamcorper, sem eros dapibus neque, non tempus purus libero ac ipsum. Proin fringilla auctor felis.
Aliquam
Duis dictum leo ut sapien convallis aliquam. Integer in leo ac est fringilla semper. Curabitur vehicula. Mauris eget nulla. Nunc pretium aliquam magna.

Instructions

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.

Internet Explorer will cancel any selection whilst scrolling, but Firefox will keep the current selction on screen whilst scrolling.

Safari will need you to keep the mouse button pressed to see the large image and the text, Opera 9.23 doesn't quite make it BUT Opera 9.50 Alpha works the same way as Internet Explorer.

Information

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 9.50 Alpha and Safari PC. Safari users will need to keep the mouse button held to see the pop-up information. Opera 9.50 Alpha works the same way a Internet Explorer but applies a vertical scroll bar when the large image is shown(?), this scrollbar can be removed by placing the large image level with the base of the scrolling image.

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.