View All Tutorials | Home


Mouse-Over 2-Image Effect
Java Script Buttons II  - (c) Copyright 1998, 1999 by Lonewolf
Click here to download JBII Software

1 Prepare two image files and the HTML file that would serve as a link file when the image is clicked. On the example below, Image1.gif will show when image is not highlighted. Image2.gif will showup once you move your mouse cursor on top of the image. It will then load the page link.htm once clicked.

2 Run the program Java Script Buttons II. (Click here to see the screen shot). Go to the directory where you keep the images for the buttons and the pages that the buttons will present (links). On the example below, image and html files are located under c:\web\018\mo
Figure 1
Figure 1
3 Double-click your mouse on the image1.gif (Image of the first button), then image2.gif (image of the activated button), and finally the the page where the button will take you. Once double-clicked, it'll show all items on the list column.
Image1
Image1
Image2
Image2

Note: You can put as many buttons as you want

Figure 2
Figure 2
4 Click on [generate] button to create the code. A new window will popup showing you the code that it generated. Highlight the script portion and paste it right before the <HTML> tag (See shaded portion under on Figure 3).

Then, highlight the second part of the code where it says "<!--PLACE THE FOLLOWING WHERE YOU WANT [[[link.htm]]] TO APPEAR ON YOUR PAGE --> then paste it inside the <BODY> tag.

-or-

You can simply click on [save] button to save this to an htm file.

Screenshot
Figure 3
5 Click here to see the final result
IMPORTANT POINTERS
- With the [generate] button the code you will put on your page will be created
- With the [Save] button you can save the code in a HTM file
- With the [Test] button you can see the result :)
- With the [Syntax Check] button the program checks and locates any errors concerning the  items on the list
- With the [Change order] button you can alter the order of the items on the list

POPUP MENUS
- right-click on the files to Refresh / Update the files
- right-click on the button list to display a pop-up menu with the following choices:
- Insert Email URL
- Delete the last item
- Delete all Items
Back to Top / Translate this tutorial

Home | Tutorials | W3 Corner | Freebies | Pixel Arena | Message Board | Resources | Portfolio | E-mail  | About | Guest Book

Pinoy7 1999 - 2000 Richie Dumlao All Rights Reserved.
Paint Shop Pro and Animation Shop is a registered trademark of Jasc Inc.
Disclaimer   Privacy Statement