CSS

play

Experiments with Cascading Style Sheets

• NEW! FORUM
• HELP & ASSISTANCE
• FAQs
• CONTACT ME
• PRIVACY POLICY
• SITE MAP
• ACCESSKEYS
• SUPPORT
• 

• Demos
• Menus
• Layouts
• Boxes
• Mozilla
• Explorer
• Opacity
• Javascript

• HOME
• LIST
• PREVIOUS
• NEXT
• LAST
• COMMENTS
• TUTORIAL

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.