MouseOver Image

This function allows you to create a roll over image. A roll over image is an image that appears to change to another image when the mouse cursor is moved over the initial image. A common use for this is to add a mouse over to buttons on your page.

Example

1. If you do not wish to use your website pages for testing you can visit http://www.ezeditor.net/ and click on the EZEDITOR DEMO page. Once there click the Login button to be logged in as Guest Administrator. After logging in click on the TEST AREA page then click the Edit button at the top of the page. Once the page reloads in Edit Mode you can move on to Step 6 and begin this exercise.



2. If you wish to use your own website for testing then Login to your website as Administrator.



3. Go to a page with eZ Editor installed.



4. Do not save any of the changes you make while performing this exercise if you do not want to affect the current contents of the page you are using.



5. Once logged in switch into Edit Mode on the page that you will be performing this exercise on.



6. Before continuing this example make sure that you have 2 different .jpg, .gif or .bmp image files on your computer. The first image will be used as the roll over trigger image. The second image will be the roll over image. If you do not have any image files on your computer then you can right click and save the images below to your computer for use in this example.


Image 1 - Trigger Image


Image 2 - Roll Over Image

 

7. Position the mouse cursor anywhere inside the Editor Workarea by clicking the left mouse button at the point where you would like to insert the first image.


Cursor positioned at top left inside the Editor Workarea (outlined in red).
The Image will be inserted at the cursor position.

 

8. With the cursor at the position where you wish to insert the first image click the Insert Image button on the Editor Toolbar to open the Insert Image dialog box.



 

9. From the Insert Image dialog box click the Browse button to open the File Chooser dialog box.



10. Locate and select the image file that you wish to insert.



11. Once you have selected the image file to use click the Open button from the File Chooser dialog box.



 

12. The Insert Image dialog box should display a preview of image that you selected.



 

13. Click the OK button on the Insert Image dialog box to insert the image into the Editor Workarea.



 

14. To create the roll over image you must select the image that will be the Trigger Image. Click the the image that you just inserted to select it.



15. With the Trigger Image selected click the Mouseover Image button on the Editor Toolbar to open the Mouseover Image dialog box.



 

16. From the Mouseover Image dialog box click the Browse button to open the File Chooser dialog box.



17. Locate and select the image file that you wish to use as the Mouse Over Image.



18. Once you have selected the image file to use click the Open button from the File Chooser dialog box.



19. The Mouseover Image dialog box should display a preview of image that you selected.



 

20. Check the Fade Effect checkbox.



21. Enter a value of 2 into the Duration field.



 

22. The Fade Effect allows you to create an effect which fades the Trigger Image into the Mouseover Image over the number of seconds entered into the Duration field. This gives the roll over a smoother effect.



23. Click the OK button on the Mouseover Image dialog box to link the Trigger Image and the Mouseover Image together and create the Mouseover effect.



24. In order to test the Mouseover Image image the page must be saved and you must switch back into View Mode.



25. In View Mode place your mouse over the Trigger Image to view the roll over effect.


Pop-Up Image