• PC World
• » Software
• » Browsers & Add-Ons

Adapting Scripts: Road Map to a Site Upgrade

In creating our sample site, we developed two JavaScripts: a slide show and a rollover menu. Here's a quick rundown of how to adapt each of these scripts for your site.

Adding the Slide Show

1. Pull in your images: Change all the file names that follow 'imgsname[x]=' to the names of your slide-show image files. Include the complete file path to your images (A).

To add more images to the slide show, copy one of the lines under 'var imgsname=new Array()', and paste it into an empty line under the line that begins 'imgsname[3]='. Change the number appearing in the brackets to 4 for the first image you add, to 5 for the next one, and so on. Replace the existing image-file name with the name of your additional slide-show image.

2. Add links to your images: Change the file names following 'imgslink[x]=' to the names of the Web pages that you want the images to link to (B). Include the complete paths to the pages if these are stored in a different folder from the one where the page that uses the slide show appears.

3. Change the slide show's position: The slide show is currently set to run 20 pixels down and over from the upper left-hand corner of the browser window. To change the position of the slide show (C), reset the numbers after 'var imgstop=' and 'var imgsleft=' to the number of pixels from the top and left, respectively, that you wish to place it.

4. Change the speed of the transition effect: To make the transition effect run faster, reduce the number after 'var pause='. To slow it down, increase the number.

5. Change the length of time the images stand still: If you want to change how long each image remains on the screen, simply change the number after 'var standstill=' to the number of seconds you wish each image to be displayed.

NOTE: Be sure to add the file 'imgtransliner.js' to the folder holding the pages that the image slide show will appear on.

The Rollover Menu

1. Change the text of the menu selection: The menu items are located between the '<h3>' and '</h3>' tags in each row of the nested table. To change the text of the second item, for example, enter your text in place of 'Pick a Pet' (D).

2. Change the page that the item links to: Replace the file name in the quotes following '<a href=' with the name of the page you want to link to. Carefully include the full path to the page, and make sure that each menu item is within '<a href="x">' and '</a>' tags.

3. Change the rollover text: Replace the text within the single quotes after 'onmouseover="movein(this,' with a brief description of the page that the menu item following it links to. For example, the text that appears when someone mouses over the first menu item is 'Minibiographies of our adoptable critters'. The font face and font size are set in the last row of this nested table.

To add a new menu item, copy an entire row of the nested table and paste it onto an empty line immediately under your last menu item. Edit the new entry as described above.

• See more like this:
• web page,
• build web site,
• javascript,
• shopping cart,
• site host,
• smartdraw,
• cascading style sheet,
• domain name,
• isp,
• bcentral,
• slide show,
• wysiwyg