// Set font size limits in pixels.
$minFS = 6;
$maxFS = 40;

// Set font color limits between 0 and 255.
$minFC = 127;
$maxFC = 255;

/*
Get the lowest number of tags at this point using
for example this MySQL query to retrieve the count.
Store the count in $min variable.

SELECT COUNT(*) AS CNT
FROM YOUR_TABLE_HERE
GROUP BY Value
ORDER BY CNT
LIMIT 1;

Get the highest number of tags likewise using
for example this MySQL query to retrieve the count.
Store the count in $max variable.

SELECT COUNT(*) AS CNT
FROM YOUR_TABLE_HERE
GROUP BY Value
ORDER BY CNT DESC
LIMIT 1;
*/

// Loop through the tags.
while () {

// Retrieve the number of each tag
// and store it in $cnt variable.

// Calculate weight of the current tag count
// related to upper and lower limits.
$wg = (log($cnt) - log($min)) / (log($max) - log($min));

// Calculate font size.
$fs = $minFS + round(($maxFS - $minFS) * $wg);

// Calculate font color.
$fc = $minFC + round(($maxFC - $minFC) * $wg);

/*
You have now all required values to print out
the tag with variable font sizes and colors.
Use style attribute to implement inline styling,
like in this example:

style="background-color: transparent;
font-size: $fs px;
color: rgb($fc, $fc, $fc);"
*/
}

Posted by Matti Mattila on Wednesday, Jul 25, 2007 at 8:44 PM

Scrolling panoramic pictures with CSS

Modern photo editing software helps creating panoramic pictures from a set of single photos. You can easily create such wide view with Photoshop. I have created this sample view with Photoshop Elements 3.0 using Photomerge Panorama feature. These pictures were taken from the roof of St. Paul’s Cathedral in London. The Golden Gallery on the cathedral roof offers magnificent view over the City to take series of pictures. I took mine up there and later adjusted contrast and brightness so that each picture will fit next to each other. Panorama feature then automagically assembles selected pictures creating an outstanding 180 degrees view like the sample displayed with this article.

Such panorama views tend to grow in width. Pictures too wide are difficult to display on a web page without substantially shrinking the image. Pictures shrank this way lose their details and give only a glimpse of the object they try to portrait. One solution would be panning the picture horizontally. Panning is not a standard HTML feature and some web designers have solved this using JavaScript. In addition to scripting panorama panning is easy to implement using standard CSS attributes. This panorama viewer has one div element and contains a list of 32 li elements. Each list element shows the background image from 32 different positions. Whenever the user hovers the mouse over the list element the corresponding background image is displayed at that position. Try the viewer by hovering your mouse over the gray sliding area below the picture.

Setting up the code

The panoramic picture is first placed as a background image of the container element as well as the p element of each list item. The container element is 320 pixels wide and, in this case, 260 pixels high. The image height is actually only 240 pixels, but I have reserved 20 pixels for the slider below the picture.

#panspace,
#panspace ul li p {
  background-image: url(panorama.jpg);
}
#panspace {
  border: 1px solid #FFF;
  height: 260px;
  width: 320px;
}
#panspace ul {
  height: 20px;
  list-style-type: none;
  margin-top: 240px;
  padding: 0;
  width: 320px;
}
#panspace ul li {
  background-color: #CCC;
  color: #666;
  display: block;
  float: left;
  height: 20px;
  position: relative;
  width: 10px;
}
#panspace ul li p {
  background-position: 0 0;
  display: none;
  height: 240px;
  left: 0;
  position: absolute;
  top: -240px;
  width: 320px;
  text-align: center;
}
#panspace ul li:hover p {
  display: block;
}

The next step is to initialize the list of 32 items. Each item in this list shows the wide picture from different view horizontally. For example, the first item shows 240 pixels of the picture from the left. Second item shows next 240 pixels, now 10 pixels from the left. Third item shows 20 pixels from left and so on.

#panspace ul li:hover p#p1 {
  background-position: 0 0;
  left: 0;
}
#panspace ul li:hover p#p2 {
  background-position: -30px 0;
  left: -10px;
}
#panspace ul li:hover p#p3 {
  background-position: -61px 0;
  left: -20px;
}
...
#panspace ul li:hover p#p32 {
  background-position: -960px 0;
  left: -310px;
}

Finally, each time the mouse hovers over an item, it will show part of the wide picture from the corresponding starting position. Moving the mouse rapidly over the slider area makes a moving effect depending on the browser. Each element has unique id and left position as well as background position. When calculating the position I first subtracted the width of the view 240 pixels from the original panorama width 1 280 pixels. Then I divided the resulting 960 pixels by 31 to calculate the interval between each step. Note, that the view starts from 0, which is actually the 32nd item, thus not part of the divider.

<div id="panspace">
  <ul>
    <li><p id="p1">0°</p></li>
    <li><p id="p2">5°</p></li>
    <li><p id="p3">11°</p></li>
    ...
    <li><p id="p32">180°</p></li>
  </ul>
</div>

Final words

Cascading stylesheets, or just CSS, technique gives excellent tools to set up the layout and looks of a web page. It is also a powerful tool to create outstanding effects, like the sample of panning wide pictures without scripting or other techniques. Thanks to Stu Nicholls for the original idea to this panoramic scroller. Feel free to visit Stu’s website CSSplay for more professional information and ideas on how to supercharge CSS beyond the basics.

Photo: Matti Mattila

• Write a Comment
• CSS
• Link

Posted by Matti Mattila on Friday, Dec 29, 2006 at 7:22 PM

Spotting photo details

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

• Write a Comment
• Read comment
• CSS
• Link