Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

Easy Java Script 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.