Kimler Sidebar Menu

Kimler Adventure Pages: Journal Entries

random top 40
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 ....

Read full story...

(Permalink)
Views: 47323 views
17 Comments · GuestBook
default pin-it button
Updated: 24-Sep-2006
Web View Count: 47323 viewsLast Web Update: 24-Sep-2006

Photo-Caption Zoom v3

April 10th, 2006  · stk

Introducing Photo-caption Zoom (version 3)! If you liked earlier versions, you'll love PZ3. The IE z-index bug is squashed, no more image resizing, choose thumb sizes 'on-the-fly' & do it with 70% less code. The easiest PZ ever. This version does more, with much less.

EZ PZ3 - Better, easier, lighter.

Latest Version: v080630 Changes: see red text w/yellow background, where applicable.

Images in this article utilize the newest, third version of a pure-CSS image zooming technique I've named "Photo-caption Zoom" ( or PZ3 ). When you move your mouse over an image, it will 'zoom' to reveal a larger image with a caption. There are a variety of pure-CSS image zooming methods, but this was the first to combine an image with a caption. It saves page real estate, it looks nice and this third version is more robust and easier to use than ever.

Although the end results of PZ3 appear identical to the last version (PZ2), the underlying CSS methodology is completely different! PZ3 offers significant improvements over PZ2 and does it with nearly 70% less code. It does more, with a lot less!

PZ3 satisfies most everything on my original wish list for a photo-caption solution. This version is the culmination of over a year's-worth of trial & error, of CSS/XHTML learning & experimentation and of countless hours searching the Internet for existing solutions. The results of PZ3 speak for themselves.

- PZ HZtory -
Photo-caption Zoom is a pure-CSS, xhtml-valid technique that I developed over a year ago. It zooms a thumbnail image on mouseover, showing a larger picture with a caption. It uses a single, simple image for both the thumbnail and zoom. It's designed to be easily deployed.

  • PZ1 - Jan 31, 2005: The original. It rearranges page flow, making room for the zoomed image and its caption. (i.e., one can still read the document when the image is zoomed).
  • PZ2 - Jun 15, 2005: Version 2. The zoomed image overlays the document, which means that page elements no longer shift or migrate. (A IE z-index bug is documented and a work-a-round is achieved, which limits usage).
  • PZ3 - Apr 11, 2006: This third version supercedes its predecessor - PZ2. The IE z-index bug that limits PZ2 has been fixed, it's 70% lighter (less code), and pixel-perfect thumb/zoom sizes are defined in the HTML. Basically, it rocks! It's so easy, I'm calling it EZ-PZ.
  • PZ3 - 30-Jun-2008: Version numbers added (dated version numbers, starting with "v080630", have been added to the CSS file, so users can tell at a glance if they have the latest CSS/XHTML code)

    CSS corrected to allow correct toggling of the caption (Cap|noCap option)

If you're new to the Photo-caption Zoom technique, I recommend you begin here, which has links to all the Photo-caption Zoom pages on this website and covers 9 different methods, in detail. (Even those that I investigated early on). Each has cut'n-paste CSS/XHTML code you can use on your own pages.

Collaborating to develop PZ3 proves that two heads are better than one. This code resulted from batting it back and forth, across the Atlantic Ocean, to my U.K. business partner and mate, ¥åßßå. I owe him a deep debt of gratitude for his efforts and the time he spent helping me. Thanks ¥åßßå!

Feature List
(Items in RED are enhancements over PZ2)

•  Valid XHTML code
•  Pure-CSS (no javascript)
•  Cross-browser/Cross-platform compliant
•  Single image for both thumb/zoom
•  Nice-looking (customizable) caption
•  Overlays document (no layout shifting)
•  IE z-index bug: SQUASHED!
•  No image resizing necessary!
•  Thumb sizes defined on the fly!
•  Toggle borders on|off
•  Toggle link cursor on|off
•  Toggle caption on|off
•  Code reduced by nearly 70%
•  Quirks-mode support
•  30-Jun-2008 - Version numbers added
•  Easiest PZ ever - EZ-PZ!

The code is cross-browser/platform compatible: PC Browsers tested - MSIE (IE6, IE7 & IE8), Firefox (v1.5, v2.0 & v3.x), Netscape (v8 & v9), & Opera (v8.x, v9.02§, v9.x); winSafari; Google Chrome (v1 & v2); Flock (v1 & v2); Mac Browsers tested - Firefox, Opera and Safari (v2.x & v3.x).

To date, there have been no reported browser problems. Please comment on viewbility if you're using a different [O/S|browser] combination.

To get the code and learn more about PZ3, please continue ...


§ Problems with Opera v9.02?

Read full story...

(Permalink)
Views: 244740 views
158 Comments · GuestBook
default pin-it button
Updated: 6-Sep-2011
Web View Count: 244740 viewsLast Web Update: 6-Sep-2011

Astonish Me

December 11th, 2005  · stk
b2evo

After a year working with b2evolution, I've decided to join forces with a British programmer, combining our efforts and creating a value-added website presence at a soon-to-be-announced web location. Initially, our goal will be to provide b2evo-specific add-on features, tutorials and plug-ins. Many of these features will be free, in the spirit of Open Source software, but because we both hope to continue full-time development, we'll be accepting donations, offering site subscriptions, and taking on website consulting work. And we're planning on extending support, articles and features beyond b2evolution, covering such diverse topics as CSS, XHTML, site maintenance, design and a number of other open source applications.

Pooling our efforts should result in more popular and well-documented plug-ins and features for the b2evolution blogging community at large. We want to promote a savvy, active and strong b2evo community, raising the bar, across the board. Both as a tribute and acknowledgement, we'll be donating 10% of our gross to b2evolution.net (or to whichever open source application we've earned money from).

To start, it will be the two of us, but we're interested in adding to the team and we're looking for dynamic, prolific, well-organized, enthusiastic contributors that can add value to our services. If you're interested, please drop us a line.

We're excited by our joint venture and hope that you will be too. By combining talents, one with 20+ years in programming and developemnt and the other with a similar experience in user support and technical computing, we hope to offer superior enhancements which are easily deployed and well documented.

With a major version release on the horizon (i.e., "Phoenix"), our efforts are timely. We can increase the adoption rate, provide sought-after features and in the process, strenghten the b2evo blogging community. We're both active on the b2evo forums and will remain so. Our individual blogs will continue to be a source of information, but will likely direct you to the new website for detail and downloads. Our goal isn't to make a financial "killing", but we do hope that there's enough monetary support to justify a full-time effort.

Make a list of your desired enhancement requests and features, because we'll be looking to you to help set our direction. What would YOU like to do with b2evolution that you can't do now?

(Permalink)
Views: 4769 views
8 Comments · GuestBook
default pin-it button
Updated: 6-Feb-2006
Web View Count: 4769 viewsLast Web Update: 6-Feb-2006

The Oop Carves a Pumkin

October 30th, 2005  · stk

Last year, Alex wasn't walking. This year, she's going to be motoring down the street like a smaller version of most kids. THIS will be Alex's very first time "Trick-or-Treating". I doubt we'll be out long, but our little angel (appropriately dressed as one), will no-doubt be excited by the adventure! When you're just two, EVERYTHING is so brand new.

A pure CSS, XHTML-valid Slide Show (slideshow) viewer. No javascript is needed. Features: (1) Single image file used for both ZOOM image and thumbnail image. This means faster load speeds. (2) Optionally, two image files can be used (the thumbnail can be one image, the css zoom another, like the “about” image). (3) This method or technique is pure-css and is XHTML valid (all flavors, transitional, strict, version 1.1, XHTML1.1, XHTML-strict, loose, frames, etc.) (4) There isn't any javascript needed. No need to preload images, no worrying if client machines have javascripting turned off. (5) You can use an thumbnail image, a number image, text number or text as the zoom "buttons". The zoomed or blow-up images are shown in a single (resizable) window location. This means that lots of images can be shown, utilizing or using page real estate wisely. The CSS and XHTML footprint is small and the code is well-formed. If you're looking for a pure CSS, xhtml-valid slideshow viewer ... one such as this might be the ticket. Contact scott kimler using the contact link in the banner of this page.

A Short Slide-Show

Last year, Alex wasn't walking. This year, she's going to be motoring down the street like a smaller version of most kids. THIS will be Alex's very first time "Trick-or-Treating". I doubt we'll be out long, but our little angel (appropriately dressed as one), will no-doubt be excited by the adventure! When you're just two, EVERYTHING is so brand new.

She was very eager to help 'carve' the pumpkin, though she did far more seed plucking and table smearing, than she did carving. (Sharp knives and tiny toddlers don't mix). Still, she was excited at first, then apprehensive about sticking her hand in the gooey pumpkin. She managed, with a little persuading ... then the inborn glee of making an absolute MESS took over and she didn't look back.

It's been years since Rachel or I have carved a pumpkin and we have to thank Alex, for opening our eyes to childhood wonder, for a second time! It was very fun, especially for the first-timer.

Happy Halloween!

(Permalink)
Views: 13173 views
3 Comments · GuestBook
default pin-it button
Updated: 6-Aug-2008
Web View Count: 13173 viewsLast Web Update: 6-Aug-2008
Filed in:CSS
b2evo

PZ2 - How2

October 14th, 2005  · stk

Getting Photo-Caption Zoom (version 2) Up & Running on Your Site
(Instructions, Examples & Considerations)

In an effort to deflect a myriad of questions from readers who wanting to implement the pure-CSS photo/caption zoom (version 2) on their site - demonstrated with the photo here - I'm making this "How-to" guide. It contains the information needed to install and use it.

This photo/caption zoom technique is written to CSS 2.0 and XHTML 1.1 standards (which you can verify, using the validation buttons at the bottom of this page, if you so desire). It's been tested on both IE and FireFox. (Note: When IE7 comes out - which will support the :hover pseudo-class for all elements - the code will likely be re-written more succinctly).

PZ2 is the second version of "photo/caption zoom". This newer version overlays the text (eliminating 'text and element migration'), it allows larger images to be displayed on a page (because the image can overlay menu items and other DIVS) and it has some built-in display toggles (you can turn the caption on/off, for example). All that good stuff, unfortunately, comes at a price. The code is longer, more complex and therefore, trickier to use. (Hence the need for this tutorial.)

If you're new to the "photo/caption zoom" method displayed here, it's recommended that you read "CSS Photo-Caption Zoom" to start. It provides a history behind its development, as well as a demonstration of various 'photo zoom' techniques.

If you just want to get PZ2 working on your page (special instructions for b2evolution users), by all means, READ ON ...

(Permalink)
Views: 58415 views
13 Comments · GuestBook
default pin-it button
Updated: 26-Feb-2006
Web View Count: 58415 viewsLast Web Update: 26-Feb-2006