Outstanding photo shots do sometimes have interesting details to spot. High-resolution photos usually take lot of storage space and consume humongous amount of precious bandwidth. This is why webmasters tend to shrink photos to thumbnails and even reduce resolution to save valuable storage space and bring down bandwidth consumption. This may require multiple copies of the same photo to be stored, though: a thumbnail for quick previewing and the original one for closer examination. Serving many variations of the photo does not help preventing from losing costly web server resources.
One solution to this dilemma is to highlight and zoom in interesting parts in a photo. With a little help of cascading style sheets (CSS) this can be accomplished in minutes. The basic trick is to cut out interesting parts in the original photos as smaller pictures. These usually take only fraction of the disk space the original photo requires. The original photo is shrunk to its final size to be served on the net. Again, this should keep the file size small and thus consumes less space and bandwidth.
The actual spot appears whenever the mouse hovers over the photo. In this article a little yellow rectangle shows the interesting spot in the snapshot. You can try the effect with the sample photo by hovering the mouse over it. Furthermore, when the mouse hovers over the spot itself the detailed part of the picture is magnified and the highlighted area is zoomed in. All this is very easy to do with recommended CSS level 1. In case you prefer using level 2 setting up the spot would be even easier with precise positioning. As of writing this article in December 2006 level 2 is still in working draft state and for compatible reasons I’d like to first show how the trick is done with current tools available.
Preparing the photo
I first determine the interesting spot in the photo and cut out a 60 x 60 pixels square (see picture 1) and save this small image separately with different file name. In the next phase I shrink the original photo suitable for web presentation and again save it separately with new file name.
Setting up styles
The basic HTML code consists of two div elements. The outer element serves as photo frame and holds the actual picture as a background image. The styling properties set the size of this element so that the whole picture gets enough space to show through. This is the required HTML code.
<div id="frame">
<div id="spot">
<img alt="" src="ladyspot.jpg"/>
</div>
</div>
The margin property (see number 2 in picture 2) positions the inner div element right in its place. The inner element is the spot and first shows only a bordered square and later the detailed image when the mouse hovers over it. This element points out the spot as a rectangle in the actual size (in this sample 20 x 20 pixels) as it appears in the underlying photo. The other margin property (see number 1 in picture 2) places the rectangle in the middle of the place reserved for the spot and also repositions the larger image as it is in this sample 60 x 60 pixels in size. The spotted image is kept hidden until the mouse reaches the rectangle. The following styles set the properties discussed.
#frame {
background-image: url('ladybug.jpg');
background-repeat: no-repeat;
height: 300px;
width: 200px;
}
#spot {
margin: 175px 0 0 40px;
}
#spot img {
visibility: hidden;
}
As soon as the mouse hovers over the photo the little square appears to show the spot (see picture 3). At this point the styling code may show multiple rectangles with even different colors. If you plan to use more spots, just give them each a unique identification in id attribute. These styling properties make the fancy square.
#frame:hover #spot {
border: 2px solid #FC0;
height: 20px;
width: 20px;
}
When the mouse hovers over the square the following styling properties resize the rectangle and positions it according to its new size. At the same time the hidden image of the spot is revealed creating an effect of zooming in (see picture 4).
#frame:hover #spot:hover {
height: 60px;
margin: 155px 0 0 20px;
width: 60px;
}
#frame:hover #spot:hover img {
visibility: visible;
}Spotting with CSS level 2
As described earlier these steps suit best with CSS level 1 and are the safest choice when working with the current style sheet recommendation. Level 2 gives more sophisticated methods to acquire the same effects. There are only minor changes to the first solution and here are the properties.
#frame {
background-image: url('ladybug.jpg');
background-repeat: no-repeat;
height: 300px;
width: 200px;
}
#spot img {
visibility: hidden;
}
#frame:hover #spot {
border: 2px solid #FC0;
height: 20px;
left: 40px;
position: relative;
top: 175px;
width: 20px;
}
#frame:hover #spot:hover {
height: 60px;
left: 20px;
top: 155px;
width: 60px;
}
#frame:hover #spot:hover img {
visibility: visible;
}In case you prefer placing the images as CSS background images you may get rid off the img element. You will then set the background-image property when the mouse hovers over the spotted square. This approach may save some bytes of bandwidth as the style sheet file is usually loaded only once and the HTML contains less code. The following code does almost everything with the styling properties alone.
<style type="text/css">
#frame {
background-image: url('ladybug.jpg');
background-repeat: no-repeat;
height: 300px;
width: 200px;
}
#frame:hover #spot {
border: 2px solid #FC0;
height: 20px;
left: 40px;
position: relative;
top: 175px;
width: 20px;
}
#frame:hover #spot:hover {
background-image: url('ladyspot.jpg');
background-repeat: no-repeat;
height: 60px;
left: 20px;
top: 155px;
width: 60px;
}
</style>
<div id="frame"><div id="spot"></div></div>Final words
Spotting details in your photos surely draws the visitors’ attention and also saves valuable resources such as disk space and bandwidth allotment. The spotting technique introduced in this article is mainly based on CSS level 1. Although level 2 is currently quite widely supported by most common browsers some precautions are good to take into account. Even level 1 is not completely supported so you may want to test these techniques before submitting your work to production.
Photo: Christophe Libert, stock.xchng