Include an image rollover in a post
In this page you will learn how to include rollover images in your posts. The final result will be an image that swaps to a different one when we rollover it.Image 1: Original image
Image 2: Image shown when the mouse is over it
This demo will show you the simple code behind this example.
Note: the step 1 might imply a security risk to your site. If you are administrator, our recomendation is to make these changes, publish your post and then switch back to the default values in the Blogging Permissions fieldset.
- Go to the Advanced Settings of the collection that you are editing, specifically to the fieldset Skin and Style Panel.
- Add the Image 1 to your post by following the instructions on this page: How to Include External Photos or Images
- Swicth your editor to HTML view (if it wasn’t already).
Add the following line to the
<imgtag, replacing the sample URL with the real URL of your Image 2
The final code of the
imgtag should look like this:
<img class="swap" src="http://example.com/media/blogs/blog/image_roll_over_1.jpg?mtime=1406866079" data-swap="http://example.com/media/blogs/blog/image_roll_over_2.jpg?mtime=1406866079" />