Kimler Sidebar Menu

Kimler Adventure Pages: Journal Entries

search cloudRandom Searches
random top 40

Weather Forecast for Yellow Point, B.C.

Today

Partly Cloudy

Partly Cloudy

14° C

POP - 20%

Tonight

Partly Cloudy

Partly Cloudy

7° C

POP - 20%

Sat 10-May

Few Showers

Few Showers

12° C 7° C

POP - 30%

Sun 11-May

Showers

Showers

11° C 6° C

POP - 40%

Mon 12-May

Mostly Cloudy

Mostly Cloudy

13° C 8° C

POP - 20%

Tue 13-May

Showers

Showers

11° C 9° C

POP - 50%

Weather data provided by weather.com®

PZ3 Enhanced ImageMaps

Filed in:CSS
Technical·b2evo

PZ3 Enhanced ImageMaps

July 15th, 2006  · stk

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.

"Look Ma, no JavaScript, XHTML-valid, pure-CSS, cross-browser ... what could be finer?!"

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.

Commissioned in 1959, this 366-foot (12 Officers, 237 crew) Restigouche Destroyer Escort became the 4th artificial reef, in June 1996. Sunk off Maud Island, near Discovery Passage.xcolumbia dde 260
Commissioned in 1959, this 366-foot (12 Officers, 237 crew) Restigouche Destroyer Escort became the 2nd artificial reef, in Dec 1992. Sunk off Kunechin Point, near Sechelt.xChaudiere
Commissioned in 1962, this 366-foot (12 Officers, 233 crew) Mackenzie Destroyer Escort became the 3rd artificial reef, in Sep 1995. Sunk off Gooch Island, near Sidney.xMackenzie
Commissioned in 1963, this 366-foot (12 Officers, 233 crew) Mackenzie Destroyer Escort became the 5th artificial reef, in Jun 1997. Sunk off Snake Island, near Nanaimo.xSaskatchewan
Built in England in 1943, this 175-foot Coastal Freighter, hauled rare earth minerals and later, explosives. It was the 1st artificial reef, in Aug 1991. Sunk off Portland Island, near Sidney.xg.b. church
Commissioned in 1959, this 442-foot (20 Officers, 270 crew) Escort Maintenance Ship became the 7th artificial reef, in Oct 2001. Sunk off Snake Island, near Nanaimo.xHMCS Cape Breton
Boeing's most popular plane since 1965, this 100-foot (up to 215 passenger) medium-range commercial jet, became the 8th artificial reef, in Jan 2006. Sunk off the coast of Chemainus.xXihwu Boeing 737

Not only does the technique provide more information, but it doesn't use JavaScript (so it won't fail for visitors that have JavaScript disabled). It uses XHTML-valid code with the same CSS used in the regular version of PZ3, with the addition of some image-specific CSS. If you're using a modern browser that understands CSS, then you should see sunken ship images and text boxes, when you place your mouse over each "X".

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.

(Permalink)
Views: 11745 views
10 Comments · Email Story
Updated: 24-Sep-2006
Web View Count: 11745 viewsLast Web Update: 24-Sep-2006

Your Two Sense:

XHTML tags allowed. URLs & such will be converted to links.


Subscribe to Comments

Auto convert line breaks to <br />

1.flag Chris (Batman) Comment
07/18/07
This is a great script, and I'm trying to implement it, but I'm a novice in CSS - I'm trying to get the individual states in a US Map to enlarge and hyperlink a few cities to another page. I like what you've done with the ships/x's - it seems like it's close if not exactly what I need. Any help would be greatly appreciated.

- Chris
2.flag Gordie Comment
02/03/08
Help! I'v got an IE alignment problem and I can't find the solution. If you look here, you'll see the shoe rollovers are OKAY in firefox, but not in IE6 (and IE7) & MSN (yes, people still use it). There is a 20 pixel (guess) top-align offset between the browsers.

Oddly, this works fine.

The shoes-page has CSS that's built into the quickcart page. (Quickcart does have a section to add style settings, so, maybe I have to put something there to get them to show in the right place?)

Any ideas?
3.flag stk Comment
02/03/08
Gordie,

Very creative use of photo-caption zoom. ;) I remember working on your front page and thank you again for your support / donations.

There's good news! :D I see the problem and it isn't a photo-caption zoom issue. ;)

You're positioning the round "shoe" images using TOP & LEFT directives that reference the page origin. The distance to the top of the page is different in different browsers (compare FF and IE, you'll see a gap between the "cart icon" and "printer friendly").

Solutions:

(1) Find what's causing the difference (probably a browser default for margin/padding on some intervening element). I think it's the <FORM> margin.

(2) Position the first TD (containing the images) as "relative". This should reset the origin to the TD element, side-stepping the issue.

(3) Lastly (recommended only as a last resort), you can use an IE conditional to give IE a different TOP value (+20px).

Personally, I'd do BOTH (1) and (2). (1) just to get a more identical-looking page and (2) b/c it will mean the image positioning won't be affected by every element between the top of the page and the 1st TD of the TABLE ("ae_noborder").
4.flag Gordie Comment
02/03/08
Well, the td position:relative was a major bust.

Can you give me a bit more of an implementation clue on options 1 and 3? I tried to set the global style sheet's body margin, top, to 0, 20 and -20... no effect.

I'm really stuck. I don't know why the beanies work and the shoes don't.

Gordie
5.flag Gordie Comment
02/04/08
I should add that in order to keep the script embedded with the page quickcart delivers, I can't use javascriptl. I think the IE conditional solution would require javascript.
6.flag stk Comment
02/05/08
Gordie - Thanks for sending a copy of the page.

FYI - IE conditionals don't require javascript. ;)

I played with the broken page and then fixed it.

The problem was as I described above.

Unfortunately, applying "position:relative" to the TD element didn't work, so I added an inner DIV wrapper and positioned that, instead.

(I colored the images, fixing the first one, so you can see that it now yields identical results in FireFox, IE6 and IE7).
7.flag Gordie Comment
02/05/08
Dude, you are major-awesome!

Man, I have so much more tech to learn... Then there's flash, then there's ajax, ruby, flavor-of-the-month.
8.flag stk Comment
02/05/08
Glad I was able to sort it for you.

I'm not big on flash or ajax, as it requires people have stuff "installed". I prefer XHTML/CSS web standards, accessibility and optimizing for search engines. But hey ... to each their own, eh?
9.flag James Comment
03/24/08
Hi could you please paste the codes to acheive the same as you have on the map above, i will be most likely be able to work it out myself thanks

James
10.flag stk Comment
03/25/08
James - Will my UK mate think I'm succinct enough if I reply with: "View Source"? :roll: