Painter 5.5 Image Rollovers Tutorial

What do I do first?

Start by deciding how you want the end product to look, more or less.

For instance, we will create a basic navigation bar, with sections for

• Home
• Links
• Email

The bar will be a solid goldy bar, with a glow behind each word when you put the mouse over it.

Now, create your image. Use floaters for the parts of the image that you do not want to display, and for items on top, so that you can turn the images on and off.

A word about states.

When you roll the cursor over an image, it is in the "mouseover" state. When you move the cursor off the image, you are in the "mouseout" state. When you first view the image, it is most conventional to use the same image at the mouseout state. ('Cause, otherwise, you will never see that first image again unless you reload the page.)

Example

This is how the navigation bar will look when you load the page, and when the cursor is not over the image. This is the Default state. Notice in the floater list, some of the floaters are turned off?

Here is the same image with the floaters all turned on. This is the mouseover state. Remember, the image will never appear like this on the web page, because each word will be a separate rollover — and you can't rollover all three at once.

The Image Slicer is found on the Objects palette, under Plugin Floaters.

Set your image up in its default state, and apply the image slicer plug-in. Make sure that you do not have a floater selected when you apply the image slicer — because in that case, you will get an image slicer layer that is only as big as that floater — and in this case, we want to slice and dice the whole image.

Slice the image into 3 parts using the vertical slice tool by simply clicking where you want to cut. You can drag the cut into a different position, and you can delete it by holding down the control key and clicking with the slice tool.

Now you need to tell the Image Slicer which states each slice would have.

Select each image in turn, (each file is being automatically named here with the names image1, image2, etc. Normally, I would select unique and distinctive names, to avoid accidentally writing over them later.)

and select a rollover state, in this case, "Mouse over-out".

Then do the same for image2, and image3.

Now the image slicer knows that you want 3 images, and a default and a mouseover for each slice.

If you want each part of image to be a link — and for a navigation bar, you would, you also need to add an URL for each image while you are assigning the states.

In this case, image3 is the email part of the navigation bar, so we add the "mailto:" URL to get that to work.

Now click on "Export Settings for current image state". You will get a dialogue box like this.

The image slicer is going to create some files, in this case, 3 image off files, and one HTML page. The default location is the same folder that you saved the image that you are working with, but you can use the select button to change to another directory.

You need to select the "include Javascript" checkbox, and in this case, because we are doing the default images, click on the "Mouse out (default)" radiobutton.

And click "Export".

And you should receive a reminder that looks like this.

This is to remind you that you need to do the other set of images too.

If you check your directory, you will see that you have 4 new files. The HTML file, and the 3 "off" images.

How do I get the second set of images for the rollover?

To re-open the Image Slicer, double click on the image slicer floater in the floater list.

Again, click on "Export Settings . . . "

This time select the other radio button, "Mouse over", and click export.

This time, you will see an alert like this, confirming that you needed two sets of images.

And now you have 7 files.

How do I use what I have created?

You can open the file HtmlTable.html in any web or HTML editor, or a plain text editor, and you can copy and paste the code into whatever document you want it to appear in, like this.

In this case, if you click on home or links, you won't go anywhere, as I have not created files for those links. The email button will work, and you can use it to tell me if this tutorial was helpful.

There are comments in the code that make it clear what you need to cut and paste. The code looks like this.

<!-- JAVASCRIPT ROLLOVER CODE
         Insert the following block into the HEAD section of your HTML document.
         Be careful to paste this outside of any existing SCRIPT sections. -->

         <!------------ BEGIN COPY here for JavaScript rollover code ------------>

<SCRIPT LANGUAGE="JavaScript">
         <!--
         // This JavaScript code was automatically generated by
         // MetaCreations Painter 5.5 Web Edition
         // http://www.metacreations.com/

 if(document.images){
         mouseOverArray = new Array();
         // preload image 1
         mouseOverArray["Image1_off"] = new Image(130, 100);
         mouseOverArray["Image1_off"].src = "Image1_off.gif";
         mouseOverArray["Image1_on"] = new Image(130, 100);
         mouseOverArray["Image1_on"].src = "Image1_on.gif";
         mouseOverArray["Image1_text"] = "";

 // preload image 2
         mouseOverArray["Image2_off"] = new Image(124, 100);
         mouseOverArray["Image2_off"].src = "Image2_off.gif";
         mouseOverArray["Image2_on"] = new Image(124, 100);
         mouseOverArray["Image2_on"].src = "Image2_on.gif";
         mouseOverArray["Image2_text"] = "";

 // preload image 3
         mouseOverArray["Image3_off"] = new Image(246, 100);
         mouseOverArray["Image3_off"].src = "Image3_off.gif";
         mouseOverArray["Image3_on"] = new Image(246, 100);
         mouseOverArray["Image3_on"].src = "Image3_on.gif";
         mouseOverArray["Image3_text"] = "";

 }
         function doMouseOver( imgName, state ) {
         // performs mouseover image and status bar text swapping
         // imgName is the HTML image name specified in the <img> tag
         // state must be on, off or down
         // hide from browsers that don't support the image object
         if ( !document.images )
         return false;
         // replace image
         document.images[ imgName ].src = mouseOverArray[ imgName + "_"          + state ].src;
         // if needed, display or clear the status bar text
         if ( mouseOverArray[ imgName + "_text" ] != "" ) {
         if ( state != "off" ) {
         window.status = mouseOverArray[ imgName + "_text" ];
         return true; //supresses display of link URL in on MouseOver
         } else {
         window.status = "";
         return false;
         }
         }
         return false;
         }
         // -->
         </SCRIPT>
         </HEAD>
         <BODY>
         <!------------ END COPY here for JavaScript rollover code ------------>

<!-- SLICED IMAGE TABLE
         Insert the following block into the BODY section of your HTML document.          -->

         <!------------ BEGIN COPY here for sliced image table ------------>

<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0"          WIDTH="500">
         <TR>
         <TD WIDTH="130" HEIGHT="0"><SPACER TYPE="block"          WIDTH="130" HEIGHT="0"></TD>
         <TD WIDTH="124" HEIGHT="0"><SPACER TYPE="block"          WIDTH="124" HEIGHT="0"></TD>
         <TD WIDTH="245" HEIGHT="0"><SPACER TYPE="block"          WIDTH="245" HEIGHT="0"></TD>
         <TD WIDTH="0" HEIGHT="0"></TD>
         </TR>
         <TR>
         <TD WIDTH="130" HEIGHT="100"><A HREF="home.htm"
          onMouseOver="return doMouseOver('Image1', 'on');" onMouseOut="doMouseOver('Image1',
          'off');"><IMG SRC="Image1_off.gif" NAME="Image1"
          WIDTH="130" HEIGHT="100" ALT="" BORDER="0"></A></TD>
         <TD WIDTH="124" HEIGHT="100"><A HREF="links.htm"
          onMouseOver="return doMouseOver('Image2', 'on');" onMouseOut="doMouseOver('Image2',
          'off');"><IMG SRC="Image2_off.gif" NAME="Image2"
          WIDTH="124" HEIGHT="100" ALT="" BORDER="0"></A></TD>
         <TD WIDTH="246" HEIGHT="100"><A HREF="mailto:dwyn@compus.ca"
          onMouseOver="return doMouseOver('Image3', 'on');" onMouseOut="doMouseOver('Image3',
          'off');"><IMG SRC="Image3_off.gif" NAME="Image3"
          WIDTH="246" HEIGHT="100" ALT="" BORDER="0"></A></TD>
         <TD WIDTH="0" HEIGHT="99"></TD>
         </TR>
         </TABLE>

<!------------ END COPY here for sliced image table ------------>

Anything else I need to remember?

Remember to put all the image files into the same directory as the HTML files.

You will need to FTP these files to your web server, and voila! You have created your very own rollover with links.