|
Easy Picture Panning Code
By Stephen Bucaro
If you have a wide-angle picture, you might want to display it on your website by panning
across it. You might have a travel related Web site, and rather than just display a scenic
photograph statically, you can give it some pizzazz by panning it. Or maybe you have a Real
Estate or apartment rental Web site. You can stitch together several views around a room and
then display a panning view of the room to let the customer feel as if they where standing
in the middle of the room looking around.
In this article, I provide you with code that will pan an image back and forth, as if you
where looking at a video. But this code does not require video, just a simple image and a
few lines of Java Script code. Instead of just giving you some code to plug a few numbers
into and then paste on your Web site, I'm going to explain the code in excruciating detail
so that you will feel comfortable using it and modifying it for your own purpose.
 I've never liked
code that you plug a few numbers into and then paste because if it stops working, since you
don't have a clue as to how it works, you can't debug it.
This code conforms with W3C CSS level 1. In other words, it won't work in real old browsers.
To develop code that will work in old browsers requires the addition of browser detection
code and separate code sections for each specific browser type and version. My Web site
statistics show that 99 percent of Internet users have a W3C CSS level 1 compatible browser.
It's not worth it to add that much extra code for those few people who are using an old browser,
and are not likely to purchase anything from your Web site anyway.
To follow along with this example, create a new folder, for example named "imagepan" and
place a copy of your image in that folder. Next open a simple ASCII text editor (like Windows
Notepad) and type in the code shown below.
<html>
<head>
</head>
<body>
<span><img src="delicate.jpg"></span>
</body>
</html>
This code creates the skeleton for a webpage and creates a span in the body section of the
webpage. The span contains an image. In the example above, I'm using a picture of the delicate
arch which is located in Arches National Monument. Replace the image name (delicate.jpg) in
the code with the file name of your image.
You might need to
use your favorite graphics application (or Windows Paint program) to crop your picture to a
proper "aspect ratio" for panning. You can't pan a square picture, it must be "thin" wide picture.
Save the file with a ".htm" extension, for example you might save it with the name pan.htm.
When you double-click on the file name it should open as a webpage in your browser and display
your picture (no panning yet).
Open the file in your text editor again and paste the code shown below into the head section
of the webpage (between the <head> and </head> tags).
<style type="text/css">
.cliparea
{
position: absolute;
top: 0px;
left: 0px;
clip: rect(0 143 143 0);
}
</style>
This code defines a Cascading Style Sheets (CSS) class named "cliparea". We will apply this
class to the span containing the image. The style rules in the class define that the span
will be positioned in the upper-left corner of it's containing element (the webpage body for
now) and it defines a rectangular shaped clipping region.
| 
Free Downloads
RSS Feed