TECHNICAL xhtml, css, textpattern and coding articles
Expanding Images
(This article was originally at 4-ever.org)
I have often wanted some images down the side columns which were clear and large enough but which did not dominate the rest of the page. Small images may look good on the page but are not very clear. Large images may be clear but their size then spoils the balance of the layout and colour scheme.
My Solution
Someone must have done this before because it is so simple. I have not seen it documented though, so I will try to be clear and concise. I have simply tried to get the best of both worlds by expanding the images on hover. Here are the steps I took to create this simple Expanding Images Example:
1 Decide the maximum size of the image to fit nicely in the column. For my purposes I found it best to make the images all the same width.For example, my images are 175px wide
2 Save a good clear image at full size. Note the width and height in pixels and use these in the web page html.eg, <img src="short.gif" width="175px" height="100px" alt="short" class="image short" />
3 Decide the optimum minimum size of the image. Again I found all the same width was best for me.eg, width 88px
4 Convert this min width from pixels into ems.eg, 88px = 8.8em. (Read about ems below)
5 Convert the heights of the small images into ems.eg, 50px = 5ems. (Read about ems below)
6 Give two classes to each image, one the same for all, one different.<img src="short.gif" width="175px" height="100px" alt="short" class="image short" /><img src="tall.gif" width="175px" height="300px" alt="lankie" class="image tall" />
7 In the css, assign the small em width to the similar classes, and assign the heights in ems to the other image classes. (If all your images are the same size, of course, you only need one class for each)eg, .image {width: 8.8em; } .short {height: 5em; } .tall {height: 15em; }
8 In the css, assign a font-size to the hover. On hover, the image width will expand from its min to its max and the height will also expand with it. To get the right font-size read about ems below.eg, .expand a:hover {font-size: 2em; }
9 You can get the full example html and css by looking at the source of this Expanding Images Example
Erm, Ems?
If you don't use ems already, why not? OK, you may have good reasons but precision is just as possible with ems as with pixels. There are several good articles about sizing with ems. This Clagnut one by Richard Rutter is as good as any and is a must-read if you are interested in easy resizing of text or images. It is very easy if you resize your main font to .625em, as Richard describes. This allows simple conversion from pixels to ems. (If you do not wish to resize your main font, then use a calculator and divide the pixels by 16 to get the em size) You can then provide more accessible and user-friendly options as well as tricks like expanding images.