Invigorate Your Site with JavaScript

The Internet has become a competitive place these days. You have to vie with more people than ever for the attention of potential clients–and 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?

One way is to use effects that make your site dynamic. Rather than presenting static information, which is what you get with HTML alone, you can bring your Web pages to life by adding some JavaScript (an easy-to-learn scripting language). But it’s not enough to use the same JavaScript effects already prevalent on the Internet. For instance, image rollovers (images that /change when a user moves the cursor over a button or link) make a site interactive, but you see them everywhere. And that annoyance, the scrolling status bar (another JavaScript effect), is better off dying its long-deserved death. What really breathes new life into a Web site is some original use of JavaScript.

This article demonstrates a new way you can use JavaScript to show off your work or products. You can add a slide show to your Web site even if you’ve never written a speck of JavaScript–just follow the step-by-step example in this article and use the actual scripts with minor modifications (you can download them from Macworld Online at “The Slide Show Script”).

The example shows how to write a script that shows off your entire portfolio on your site (see “Create a JavaScript Slide Show”). With this script, you can let users view your images one at a time at their own pace. Once you set up the Web page with the new script, all the user has to do to see the slide show is simply to click on a button on the page.

I have also posted another step-by-step example on Macworld Online of a second JavaScript technique that can set your Web page apart from the pack. This technique lets you put a random image on a Web page. Every time a Web surfer loads the page, a JavaScript randomly displays one of the images from your portfolio. With this script and enough images in your portfolio, your page can look different every time the surfer sees it.

What Is JavaScript, Anyway?

See the page (“Display Random Images”) See the javascript (“Sequential Images Javascript”)

A common–and confusing–misconception about JavaScript is that it’s related to Java. In reality, there is no connection between these two programming languages. Netscape invented JavaScript (originally called LiveScript) as an add-on to Netscape Navigator 2. Netscape changed the name of LiveScript to JavaScript, probably hoping that some of the hype about Sun’s Java programming language would rub off. The change did indeed attract attention, but it also permanently confused the relationship between Java and JavaScript. Here’s the true story: these two languages have no relationship at all.

JavaScript is a scripting language that’s much simpler to learn than Java. To put JavaScript effects on your Web pages, you just add a little bit of code to your HTML inside a new tag: ‹SCRIPT› (see “The Slide Show Script” for an example).

One of the advantages to using JavaScript is that it lets you manipulate images. To understand how image manipulation works, let’s look at the example of image rollovers. When you create a rollover, the HTML on your page starts off looking as it always has, with one change: the addition of a NAME attribute to the IMG tag. Giving a name to an image object (the part of a JavaScript that reserves a spot on your Web page for changing images) empowers JavaScript to manipulate images. An image object can display many different images, one at a time. For instance, your page can have two images, homeOn.jpg and homeOff.jpg, that are both associated with one image object called home. Which of the images the browser displays depends on whether the user’s cursor is on or off the home image object. These two images, combined with a single image object, produce the rollover effect.

The JavaScript for creating a slide show also requires an image object–in “The Slide Show Script” it’s called slider. Just as with the rollover effect, this image object displays multiple images–those in the slide show. Instead of rolling over a button to change images, the user clicks on a button on your page.

JavaScript Tools

WHAT YOU NEED Text editor JavaScriptable browser    Netscape Navigator 3 or later    Microsoft Internet Explorer: Mac    3.1 or later, Windows 4 or later

All you need to write JavaScript code is a text editor. Any old text editor will do. I use Bare Bones Software’s BBEdit. But you can use Adobe GoLive 4, Macromedia Dreamweaver 2, or SoftPress Freeway 2 if you like. In fact, you can even use something as basic as Apple’s SimpleText. And to test your JavaScript code, you just need a collection of browsers.

Not every browser lets users view JavaScript effects (see “What You Need” for a list of JavaScriptable browsers). Be sure to test your pages with a variety of old and new browsers and with JavaScript turned on and off. That way you won’t exclude anyone from navigating your site, even if they can’t see all your innovative techniques.

DORI SMITH is a coauthor of the upcoming JavaScript for the World Wide Web: Visual QuickStart Guide, third edition (Peachpit Press, 1999).

July 1999 page: 111

Create a JavaScript Slide Show

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.

Lights, JavaScript, Action! All you need is the right JavaScript to let viewers click through your portfolio one image at a time.

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 adjustments–for 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.

Start the script by naming the image object (the part of the code that reserves a spot on your Web page for your slide-show images). In this case, it’s called slider.

Here’s where the JavaScript actually starts. Set the variable imgCt to the number of images you plan to use. In my example slide show, I have nine images (two of which appear at left). You also need to set up a second variable, thisImg, so that it keeps track of which image a visitor’s browser is displaying. Since the Web page starts off by displaying the first image, set thisImg to 1.

Next, build into your script the function newSlide( ), which lets users click on screen to see your slide-show images one by one. By using this function in conjunction with the direction parameter, you allow users to go forward and backward in the show. Here’s where all the heavy lifting happens, so I’ll explain in detail how to write this part of the code.

slide1.jpg	slide2.jpg
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.

Start off by having the script check the user’s browser for the object document.images to see whether the browser is JavaScriptable. Next, add the direction parameter to thisImg. In most cases this parameter tells the script which image to display. It does so by passing the value 1 to the script if a user clicks on the Next button, or 1 if the user clicks on the Prev button.

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.

To tell the newSlide( ) function that users want to move forward when they click on the Next button, pass newSlide( ) a parameter of 1.

Similarly, pass the newSlide( ) function a parameter of 1 to tell the function that users want to view the previous image in the sequence when they click on the Prev button.

The Slide Show Script

	<HTML>
	<HEAD>
	<TITLE>slide show</TITLE>
	<SCRIPT>
	&lt!-- Hide script from older browsers
	thisImg = 1
	imgCt = 9
	function newSlide(direction) {
	if (document.images) {
	thisImg = thisImg + direction
	if (thisImg < 1) {
	thisImg = imgCt
	}
	if (thisImg > imgCt) {
	thisImg = 1
	}
	document.slider.src =
	"images/slide"
	+ thisImg + ".jpg"
	}
	}
	//
	stop hiding script --&gt
	</SCRIPT>
	</HEAD>
	<BODY BGCOLOR=WHITE>
	<CENTER>
	<TABLE BORDER=0 CELLPADDING=0
	CELLSPACING=0>
	<TR>
	<TD VALIGN=BOTTOM>
	<IMG HEIGHT=56 WIDTH=57
	SRC="images/prev.jpg">
	</TD>
	<TD>
	<A HREF="javascript:newSlide(1)">
	<IMG HEIGHT=75 WIDTH=104
	SRC="images/nextbutton.jpg"
	ALIGN=LEFT BORDER=0></A>
	<IMG HEIGHT=70 WIDTH=170
	SRC="images/slideshowtext.jpg"
	ALIGN=RIGHT><BR CLEAR=ALL>
	<IMG HEIGHT=314 WIDTH=300
	SRC="images/slide1.jpg"
	NAME="slider"><BR>
	<A HREF="javascript:newSlide(-1)">
	<IMG HEIGHT=56 WIDTH=35
	SRC="images/prevbutton.jpg"
	BORDER=0></A>
	</TD>
	</TR>
	</TABLE>
	</CENTER>
	</BODY>
	</HTML>
	

Display Random Images

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:

image1.jpg

and

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.”

Step 2. Next, name your image object (the part of the JavaScript that reserves a spot on your Web page for random images). This ensures that your JavaScript code will refer to exactly the image you want. To name an image object, add a

NAME

attribute to the

IMG

tag; in this case, I named the image object

randomImg

.

You can add the variable

spacer.gif

to the same tag so that when the page starts loading, a spacer gif appears until the real image takes its place.

Step 3. Here’s where the JavaScript starts. Set the variable

imgCt

to 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.images

exists 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

if

clause.

If the browser does support JavaScript image-object manipulation, the script then figures out which image to show. JavaScript has a built-in function called

Math.random( )

that returns a fractional value between 0 and 1. Multiplying this number by

imgCt

results in a number between 0 and

imgCt

(exclusive). Include the JavaScript function

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

thisImg

.

In order to change the image that

randomImg

displays, 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

document.randomImg.src

to

"images/image1.jpg"

, the first image appears; if the script sets

document.randomImg.src

to

"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

onLoad

event handler in the

tag. This event handler takes charge when all the page elements have finished loading and runs the JavaScript statement assigned to it. In this example, the statement is the

"choosePic( )"

function.

See the javascript (“Random Images Javascript”). See the javascript (“Sequential Images Javascript”).

Sequential Images Javascript websites.macworld.[“1999”].[“07”].create.[“#script”].yjs