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.
- Open the Image Tool by clicking on the Insert Image icon form the toolbar of the editor.
- Click the Upload Tab
- Browser for the mouse-over image first (landscape-mo.jpg)
- Click Send to the Server
- Click the Upload Tab again
- Browse for the regular image (landscape-reg.jpg)
- Click Send to the Server
- Set Border to 0 (zero)
- 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 when a mouse moves over the image; by adding:
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.
src="/userfiles/image/landscape-reg.jpg"
onMouseOver="this.src='/userfiles/image/landscape-mo.jpg';"
onMouseOut="this.src='/userfiles/image/landscale-reg.jpg';"
style="cursor:hand;" />
Step 2: The "exploded view" of the image.
And now for the full size image when the regular image is clicked (optional)
- Click on your image
- Click the Link Tool
- Click the Upload Tab
- Browse for the regular image (landscape-reg.jpg)
- Click Send to the Server
- Click the Target Tab
- Set the Target to <popup window>
- Set Target Frame Name to something unique (ie: myImage)
- Set the Width of the new window (1280)
- Set the Height of the new window (460)
- Click Ok
0 Comments