CSS/Javascript Photo Zoom - Example 4

Scott Kimler's Simple Photo Zoom

Jan 30, 2005


CSS/Javascript Photo Zoom

Demonstration of the technique

MIT's toy 'Topobo'

I wasn't planning on using javascript. I did, when my efforts to bend CSS to my will hit a brick wall. (One can only bang their head into the wall so many times.) I must have rattled something loose, because suddenly, I was (boo, hiss) suddenly using javascript. And why not?

The result is elegantly simple. Very little CSS code is needed. I mean, very little. Using javascript mouseovers automatically moves the image sizing from the external CSS file, into the HTML code - right where I wanted it in the first place.

While striving for a pure CSS solution was my goal, one can't help but consider the merits of this javascripting image-zoom method. Look at the code below. Only one (that's right ONE) CSS selector is needed. And the HTML? A <div> & an anchor tag. Boom. Simple and elegant. I don't know why, but I feel 'bad' even mentioning 'javascript'. Why do I feel this way? Is there something inherently wrong about using javascript? If there is, I don't know what it is. And according to W3Schools stats about 90% of surfers have javascripting enabled and that percentage is stable. So this simple javascript solution may be the best photo zoom option.

Take your pick! But, if you think that javascript is bad, please let me know why, because, frankly, it looks like a great solution.

Notes on the method

CSS/Javascript Photo Zoom Code

CSS

/* Photo Zoom CSS */

div.zoom img { float:right;
margin:0px 0px 5px 10px;
border:1px solid #369 }

/* End Photo Zoom CSS */

HTML

<!-- Photo Zoom HTML Code -->

<div class="zoom">

<img src="cssZoom04.jpg" style="width:100px;" onmouseover="this.style.width='250px'" onmouseout="this.style.width='100px'" alt="MIT's toy 'Topobo'" title=" Construct & program your own bot. " />

</div>

<!-- end Zoom code -->

This led to: Kimler Caption #3

Click the above link to see this technique with a caption. It is, perhaps, the best of the photo-caption zoom options. It has everything that I originally desired, with the exception that it is not a pure-css solution. The caption version includes the following enhancements:

My wife says I'm a smart-ass, maybe she's right! Ha.