Kimler Sidebar Menu
Kimler Adventure Pages: Journal Entries
PZ3 Enhanced ImageMaps
What do sunken ships have to do with Photo-Caption Zoom (PZ3) enhanced imagemaps? Find out, as history and technology collide on the Internet, in a demonstration that creatively extends PZ3 functionality and capability
PZ3: Putting the "Hot" in Hotspots!
Besides the problems associated with posting image maps in XHTML v1.1, there is very little information contained in such a construct, other than whatever the author might add to the "title" attribute. Along comes PZ3 to the rescue! It can add information images and text to a hovered hot-spot. In addition, it can "animate" the spot, so a visitor knows when it's been activated.
For a demonstration of this new technique, which extends the capability and versatility of the Photo-caption Zoom method, read on ....
The Artificial Reef Society of British Columbia
Vancouver Island is one of North America's premier scuba diving destinations. It's been named the top scuba diving location in North America for 3 years in a row, by Rodale's "Scuba Diving" magazine survey. It's great because of year-round accessibility, crystal clear water, a diversity and abundance of marine life and (in part) because of the efforts of ARSBC.
The ARSBC have sunk 7 ships and 1 airplane, providing habitat for reef-forming denizens and creating technically challenging, accessible and interesting scuba diving sites. The satellite map below, taken from their website, was used as to demonstrate this PZ3-enhanced imagemap.
Photo-Caption Zoom (v3) Enhanced Image Map Demonstration
Mouse over the X's in the satellite image for information about sunken ships.
It's been tested and works in IE v6, FFox v1.5 and Opera v9.
Ultimately, I need to add this demonstration to the PZ3 page, creating a technical tutorial, so that others can use this method, as well. As with all of the CSS, scripts and techniques developed at Randsco, it's free for personal use. (More information can be found on our copyright policy page). Donations are encouraged, to help defray some of the costs for development time. Please contact me if you have any questions or wish to utilize this technique on a commercial site.
Part of the challenge in deploying this demonstration was incorporating it into our regular blog. It piggy-backs on the existing "pz3.css" file and also utilizes a "custom CSS" script, developed at AstonishMe!, which inserts post-specific CSS into the <head> section. Because of this relatively non-trivial integration, the CSS contains more directives than is required to achieve the effect if it were deployed by itself. When I put together the tutorial, I'll post the CSS for both methods, standalone and integrated, for people wishing to use this technique alone or with their existing PZ3 setup.