PI5 Java Rollover Assistant

The Java Rollover Assistant is a bit of a misnomer, but who's going to quibble over the nomenclature when you can create the HTML code for original javascript rollover buttons right in the PI 5.0 work space?  Like the Component Designer, which uses pre-made buttons, you can use the Java Rollover Assistant to create a different look for normal, on mouseover, and on mousedown button states. Then use your HTML editor to insert the javascript code into your web page. Here's what it will look like:


For this tutorial, I've made three buttons, one each for the normal, on mouseover and on mousedown button states. When you make your buttons, make sure they are all exactly the same size, and that the buttons and text are in the same position in each image.

normal state

mouseover state

mousedown state

Start by opening up all three of the buttons up in the PI 5.0 work space. Choose File, New and make a new, True Color file 200 pixels wide X 300 pixels high. Copy and paste each of the buttons into the new image. Use the selection tool to move them so that they aren't overlapping each other. The order of the buttons doesn't matter. Click on one button to make it active, then hold down on the Shift key while clicking on each of the other two buttons. All of the buttons will be active at the same time, as shown below:

make all 3 buttons active

Choose Web, Java Rollover Assistant. When the dialog box opens, don't worry if the buttons appear in the wrong order. 

Java Rollover Assistant box

We'll select the Default, Mouseover and Mousedown buttons by clicking on the downward arrow under each category and choosing the correct button. For example, under the Default category, click the down arrow and choose the green Home button. Enter the URL for the button and ALT text (Home).

select Default button

Repeat these steps to select the blue button with the blue shadow for the Mouseover state, and the blue button with white text and no shadow for the Mousedown state.

Now that we've got the buttons associated with their correct state, we're ready to choose an image file type for the buttons. Click on the GIF button. We'll preview the rollover effect right in the work space by clicking on the Browser Preview button. Doing so opens your default browser. Roll the mouse over the green button to make sure that you see the mouseover effect. Click on the button to make sure you see the mousedown effect. It will probably take you to a browser error screen. If all is working well, close out your browser. 

To Export the images and the HTML code for the rollovers, click on the Export button. When the Save As box opens, browse your hard drive for the folder to which you wish to save. 

save html and images

The Java Rollover Assistant will save the javascript code as well as your images. Note that you don't have to name the buttons. They will be saved to the same folder to which you saved the HTML page, into a subdirectory called images,  and named accordingly, e.g., homebtn_normal.gif, homebtn_over.gif and homebtn_down.gif. 

Repeat this process of using the Java Rollover Assistant for any other buttons you plan to put on your web page. For example, if you have 3 more buttons called Gallery, Links and Awards, go through these steps again and name them gallerybtn.htm, linksbtn.htm and ringsbtn.htm, respectively. The images will be saved to the images folder as gallerybtn_normal.gif, gallerybtn_over.gif and gallerybtn_down.gif, etc.

Now we have to get the buttons and the javascript code into the web page. To do so, you must have an HTML editor and have some experience with inserting HTML into a web document. I'll walk you through the steps using my HTML editor.

In your HTML editor, open up the file called "homebtn.htm" which you created in the Java Rollover Assistant and saved to your hard drive. If you're using a WYSIWYG HTML editor, you'll see a blank page with the normal button at the top and this text:

" script and // . paste it into your HTML file to compile and // . define your rollover button. ------------>  

In your HTML editor, access the HTML code. You'll see the usual code in black, followed by the javascript code in brown for the rollover effect. It will look like this, only there's a lot more of it and it goes all the way across the page (I had to cut this screen shot to make it fit):

screen shot of html code

Leave everything after the </HEAD> and above the <BODY> tag alone or the javascript won't work. Immediately after the <BODY> tag are 2 sets of remarks about how to add more buttons by cutting and pasting HTML into your web page document. These remarks are not necessary for the rollover code to work. Leave them there as a reference, because they don't show up on the web page.

To add more rollover buttons to your page, you must do some copying and pasting in the two different places indicated in the remarks. The first of these says:

// . First:
// . You can copy the "AddImageToImageList(...)" script and
// . paste it into your HTML file to compile and
// . define your rollover button.
// . ------------

Copy into the Clipboard the line after the above remark:

AddImageToImageList("homebtn", "images/homebtn_normal.gif", "images/homebtn_over.gif", "images/homebtn_down.gif");

and paste it on the line below 3 times, if you are going to add 3 more buttons for Gallery, Links and Rings.  

For the Gallery, you will refer to the Gallery button names: gallerybtn_normal, gallerybtn_over.gif and gallerybtn_down.gif. The second line will look like this:

AddImageToImageList("gallerybtn", "images/gallerybtn_normal.gif", "images/gallerybtn_over.gif", "images/gallerybtn_down.gif");

Repeat this process for the Links and Rings buttons. Now we just have to copy and paste in one more place. Scroll down through the HTML to the remark:

<! ------------
// . Second:
// . You can copy the "<a href=......></a>" script and
// . paste it into your HTML file to compile and
// . define your rollover button.

Right below this remark you'll see this code:

<A HREF="index.htm"
ONMOUSEDOWN="if (bIsSupportOK) ReplaceImage('homebtn', MouseDownState);"
ONMOUSEUP="if (bIsSupportOK) ReplaceImage('homebtn', MouseOverState);"
ONMOUSEOUT="if (bIsSupportOK) ReplaceImage('homebtn',DefaultState);"
ONMOUSEOVER="if (bIsSupportOK) ReplaceImage('homebtn', MouseOverState);"
<IMG NAME="homebtn" SRC="/images/homebtn_normal.gif" ALT="Home" width="161" height="78" BORDER="0"></A>

Copy the entire block of code into the Clipboard, and paste it 3X directly below the last line of code. In other words, you'll have 4 identical blocks of code. 

In the second block of code, which references the Gallery button, be sure to put the correct button name. When you're done, it will look like this:

<A HREF="gallery.htm"
ONMOUSEDOWN="if (bIsSupportOK) ReplaceImage('gallerybtn', MouseDownState);"
ONMOUSEUP="if (bIsSupportOK) ReplaceImage('gallerybtn', MouseOverState);"
ONMOUSEOUT="if (bIsSupportOK) ReplaceImage('gallerybtn',DefaultState);"
ONMOUSEOVER="if (bIsSupportOK) ReplaceImage('gallerybtn', MouseOverState);"
<IMG NAME="gallerybtn" SRC="/images/gallerybtn_normal.gif" ALT="Gallery" width="161" height="78" BORDER="0"></A>

Repeat for the remaining 2 blocks of code for the Links and Rings buttons. Save the HTML document. To test it out, preview your HTML page in your browser. You should see a rollover effect when you roll the mouse over the button (the green part turns blue and you'll see the blue shadow), and another effect when you press the mouse down (text turns white and the shadow disappears). 

When you upload your HTML page and images to your server, you must make sure that the file structure of your web site is consistent with your HTML document.  Make sure all 12 of the images (3 each for Home, Gallery, Links and Rings) are in the Images file so that they can appear when the HTML page "calls" them. 

It may take you a few tries until you get it all working right. Fooling around with HTML isn't a lot of fun the first few times you do it. Just go back and make sure that you have the correct button name in each block of code. If you persist, your rollover buttons will work and you'll feel like a real "code warrior" for getting it right!

Do not duplicate, translate, copy, archive, appropriate or redistribute this document.



Back to Homepage