The Internet has become a competitive place these days. You have to vie with more people than ever for the attention of potential clientsand guess what, yours isn't the only site that has animated images and plug-in detection. What can you do to make your site stand out?
See the page ("Display Random Images")
WHAT YOU NEED
Netscape Navigator 3 or later
Microsoft Internet Explorer: Mac
3.1 or later, Windows 4 or later
Show off artwork at your visitors' own pace. Once you install this script, visitors simply click on a button to see every image in your portfolio one at a time. Even better, a viewer can choose to go forward or backward.
Before you get started with the scripting, put all your images in order. Give consecutive names to the images that will go in your slide show. I use the naming scheme slide1.jpg, slide2.jpg, and so on. If you choose a different naming scheme, be sure to modify the script appropriately. I put the images in a folder called "images," which you should also do unless you prefer to make changes to the script.
All of your images must have exactly the same dimensions. If they don't, as in the images shown at the right (see "Get in Order"), you need to make the necessary adjustmentsfor example, changing the image size in Adobe Photoshop.
Before you begin, you should also create the graphics for the buttons users can click on to move forward and backward in your slide show. I label the buttons on my example Web page "next" and "prev." Put those files in the images folder as well.
Once you prepare your images, it's time to jump in and start writing the script. Each of the following steps explains how to do that. Some portions of the code that I describe are difficult to see in the sample script, so they are highlighted in bold text to make them easy to find.
Get In Order
To make your slide show work, give your images consecutive names and make adjustments so that all the images have the same dimensions.
However, if users click on a button so many times that they pass the beginning or end of the slide show, the script needs to adjust the current image number so that the number isn't too high or low. The next few lines of code make the slide show start again at the other end. If thisImg is less than 1, the script resets it to the highest image number (imgCt). If thisImg is greater than the number of slides available, the script resets it to 1.
Now that the script has an image number that's within the proper range, it's time to reset the image. In order to do so, set document.slider.src to the location of the new image. Concatenating the parts of the image name, as I have done in my sample script, makes your script calculate the location on the fly.
You have a portfolio full of gorgeous images, and you can't choose which one to put on the front page of your Web site? With this script, you'll be able to put all of them on-one at a time, anyway. This script randomly picks one image from your portfolio to display on the page. When the page reloads, a different image will display. Click here to download the actual script that produces this effect, and then follow along to learn what you need to know to modify the script for your own site.
Step 1. Before you start writing any code, first label the images that will appear on your site. If you want to use my sample script, it's a good idea to follow my naming scheme. My images have sequential names:
image2.jpg. It's also useful to organize your images by putting them into one folder, which the script will call upon. The folder name I use is "images."
NAMEattribute to the
IMGtag; in this case, I named the image object
You can add the variable
spacer.gifto the same tag so that when the page starts loading, a spacer gif appears until the real image takes its place.
imgCtto the number of images that you want to display randomly on your page. In my example I use two images, but you can use as many as you want, and you can add more in the future by simply increasing this number.
Step 4. The next step is to build a calculation function into your script that tells the script which of your random images to display each time a user goes to your page. The function
choosePic( )calculates what image to display and updates the browser window to show the chosen image. Here's how this function works.
The code starts by checking to see if the object
document.imagesexists in the browser that's accessing your site. If this object exists, the script knows that the user's browser supports image manipulation. This is a handy way to avoid having to check individual browser versions; if the browser doesn't support image manipulation, it will ignore the code inside the braces (true) that follows the
Math.random( )that returns a fractional value between 0 and 1. Multiplying this number by
imgCtresults in a number between 0 and
Math.floor( )in your code, and the script will take just the integer part of that number. Add one to this number, and the result will be between 1 and
imgCt(inclusive). The code then saves this number in the variable
In order to change the image that
randomImgdisplays, all that the script needs to do is change that image object's
src(read as "source") property to the file name and location (such as the folder name) of an image. So if the script sets
"images/image1.jpg", the first image appears; if the script sets
"images/image2.jpg", the second image displays.
Step 5. The last step is to make a random image display right when your Web page finishes loading. To do this, use the