Advanced Mouse Rollover Effects

Creating Mouse Rollover Effects

This is an advance tip for changing an image when a mouse moves over the image.
This is very helpful in letting your visitors know that an image is a link without the ugly border boxes.

In this example I have a regular landscape image (landscape-reg.jpg), a mouse-over image (landscape-mo.jpg) and a full-size image (landscape-full.jpg) to display when clicked. I am going to us just the image upload tool in the editor to upload all three images. The file Manage can be used to upload your images if you wish.
 

Step 1: The regular & mouse-over image effect.

1. Open the Image Tool by clicking on the Insert Image icon form the toolbar of the editor.
2. Click the Upload Tab
   1. Browser for the mouse-over image first (landscape-mo.jpg)
   2. Click Send to the Server
3. Click the Upload Tab again
   1. Browse for the regular image (landscape-reg.jpg)
   2. Click Send to the Server
4. Set Border to 0 (zero)
5. Click OK

Now that all three images are on the server we need to add a little source code to the image tag.
On the Editor Toolbar, click the Source Button; it should look something like:

We now need to tell it what to do if the mouse leaves the image.

As a special touch, since it is a link, let's change the cursor so the visitor knows it's a link (optional).

This what the final image tag should look like.

Step 2: The "exploded view" of the image.

And now for the full size image when the regular image is clicked (optional)

1. Click on your image
2. Click the Link Tool
3. Click the Upload Tab 
   1. Browse for the regular image (landscape-reg.jpg)
   2. Click Send to the Server
4. Click the Target Tab
   1. Set the Target to <popup window>
   2. Set Target Frame Name to something unique (ie: myImage)
   3. Set the Width of the new window (1280)
   4. Set the Height of the new window (460)
5. Click Ok