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.

Steps

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.

1. In order to all this tutorial makes any sense, the XHTML Validation should be set to "Basic security checking", and the Security filter "Prevent javascript" must be disabled in the User Group of the user that will make the post. For more information, please read: Blogging Permissions Panel).
2. Go to the Advanced Settings of the collection that you are editing, specifically to the fieldset Skin and Style Panel.

3. Copy and paste the following code in the field Custom javascript section (before </body>):.

   
   <script type="text/javascript">
   $(function(){
      $('.swap').on('mouseenter mouseout', function(){
          var original = $(this).attr('src');
          var replacement = $(this).data('swap');
          $(this).attr('src', replacement).data('swap', original);
      });
   });
   </script>
   

4. Add the Image 1 to your post by following the instructions on this page: How to Include External Photos or Images
5. Swicth your editor to HTML view (if it wasn’t already).

6. Add the following line to the <img tag, replacing the sample URL with the real URL of your Image 2

   
   data-swap="http://example.com/media/blogs/blog/image_roll_over_2.jpg?mtime=1406866079"
   

7. The final code of the img tag 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" />