What is a 'Rollover Image'?
A rollover image is an image that changes when the mouse cursor is placed over it, for example (place your mouse cursor over the image below)
The rollover effect uses Event Attributes to create the effect. As event attributes are able to execute javascript, their use is disabled unless specifically enabled in an Editor Profile. Once they are enabled, the Rollover tab will be visible in the Image Manager.
As event attributes are able to execute javascript, these should only be enabled in profiles assigned to trusted users.
To enable Event Attributes
-
From the JCE Control Panel, click on the Editor Profiles button, then click on a profile to edit, eg: "Default"
-
Click on the Editor Parameters tab, then on the Advanced tab.
-
Set the Allow Event Attributes option to Yes. The Allow Event Attributes option will not be visible but will automatically be enabled if the Allow Javascript option is enabled.
The Rollover Image Tab
The Rollover tab contains two input fields, Mouseover and Mouseout.
Mouseover
Represents the onmouseover event attribute. This is the image displayed when the mouse cursor is placed over the image.
Mouseout
Represents the onmouseout event attribute. This is the image displayed when the mouse cursor is moved off the image. This is also usually the defualt image.
Create a Rollover image
- Select the image that is to be the default image, ie: the one that is displayed in the content item.
- Click the Rollover Image tab.
- Select the image that you would like as the mouse over image.
- You can now go back to the Image tab and adjust the parameters as required.
- Click Insert.
Remove a Rollover image
To remove a Rollover image, delete the contents of the Mouseover field in the Rollover tab.