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.
IE, Opera, Safari and Chrome will cancel any selection whilst scrolling, but Firefox will keep the current selction on screen whilst scrolling.
copyright © stu nicholls - CSS play
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, Safari and Chrome.
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.
