Kimler Sidebar Menu

Kimler Adventure Pages: Journal Entries

random top 40

PZ3 Enhanced ImageMaps

Filed in:CSS
Web Dev·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.

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: 37237 views
17 Comments · GuestBook
default pin-it button
Updated: 24-Sep-2006
Web View Count: 37237 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 http://randsco.com/_miscPgs/demos/gordie/quickcart-test-prob.html ">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:
11.flag Mike Robinson Comment
12/31/08
This is some great CSS code! So simple and elegant. I modified this example to use on my website. I'm sure everyone will be happy. Thank you so much.

I would not mind donating a bit to you for your script as well. Please let me know how I can do that.
12.flag stk Comment
12/31/08
Mike - Glad you like it! I had a quick peek at your link and have two comments:

1) Very nice utilization of the code! (You'll need to donate, as the site is a commercial site - check out our copyright and donation page).

2) I spent 2 months in Costa Rica in the early 80's, conducting a gravity and magnetics geophysical study whilst I was in graduate school! (Tramped around from Playa Jaco to Lago de Arenal and all over the Nicoya Penninsula). Good times!
13.flag Mike Robinson Comment
01/01/09
Not a problem. I just sent you a donation. Go and buy yourself something nice!
14.flag Mike Robinson Comment
01/01/09
P.S. Happy new year!
15.flag Mr. K Comment
01/10/09
can somebody send me a code for this mapping plssssssssssssssss i really really need it i need to study that code, it will be a big help for my tourism thesis. mail me at tagabukids@yahoo.com
16.flag Mr. K Comment
01/11/09
thanks for the email reply skimler@gmail.com i will study this codes
17.flag Lemuel Comment
03/19/09
This is an awesome implementation of the script. I'm trying to implement it as a standalone version on another map but have been running into a few problems. I think I am either not using the code properly or have gotten it mixed up somewhere along the way. Can someone send me the code i should be using? Email me at omegadev21@gmail.com