How to add a rollover image with FCKeditor

Unlike TinyMCE, FCKeditor has no inbuilt functionality that allows a rollover image to be added. This does not mean that the same effect cannot be achieved however.

Rollover images require two images for operation, one that shows the normal state when a mouse is not hovering over the image, and one that shows the image when it is. The following two images are a typical example.

The effect is set up so that the image normally appears as it does on the left, changing to the one on the right when the mouse is rolled over it. Because the images are identical, it will appear as if it is just the text that is changing colour, or ‘highlighting’.

To achieve this with FCKeditor first upload the two required images to your images directory, then open the page you want to edit in the FCKeditor and click the ‘Source’ button in the toolbar. Scroll down to where you want to insert the code and paste the following (after reading the note below):

<img title="Buy Now" 
onmouseover="this.src='http://www.yourdomain.com.au/order_over.png';"
onmouseout="this.src='http://www.yourdomain.com.au/order.png';" 
src="http://www.yourdomain.com.au/order.png" 
alt="buy now" width="120" height="31" />

In this example the normal image is ‘order.png’ and the hover (mouse over) image is ‘order_over.png’.

When using this code remember to edit it with your own domain name, image names and image directory path.

Finally it is normally the case that the button is to be linked. In this case you must simple add the appropriate anchor tags around the above code. e.g.

<a href="order.php">
<img title="Buy Now" 
onmouseover="this.src='http://www.yourdomain.com.au/order_over.png';"
onmouseout="this.src='http://www.yourdomain.com.au/order.png';" 
src="http://www.yourdomain.com.au/order.png" 
alt="buy now" width="120" height="31" />
</a>

NOTE: I have added line breaks in the above code to make it easier to read in this post. These should be removed before pasting the code into your editor. In other words the code from <a href=“order.php”> … to … </a> should be on a single line.

.