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.
0°
5°
11°
17°
23°
29°
34°
40°
46°
52°
58°
63°
69°
75°
81°
87°
92°
98°
104°
110°
116°
121°
127°
133°
139°
145°
150°
156°
162°
168°
174°
180°
Hover your mouse over the slider
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.