Magento How to : add prototype based image rollover

We will today work on a nice and easy fetaure of temlpate design : adding javascript and static images, with the objective of implementing a simple prototype based image rollover. We chose the simple unobstrusive rollover script by Herryanto Satiano.

  • download the zip and place the rollover.js file in your js/prototype folder (or in you js skin folder)
  • edit app/design/../layout/page.xml and add the following line in the header block :
    <action method="addJs"><script>prototype/rollover.js</script></action>
    Note that you can also add your javascript in your own magento skin via the following block action :
    <action method="addItem"><type>skin_js</type><name>js/prototype/rollover.js</name></action>
  • add the rollover instanciation in you rpage/head.phtml file :
      <script type="text/javascript">
        window.onload = function() {
          new Rollover('nav');
  • test on tow imagse with _over suffix.
1 reply
  1. Jacek
    Jacek says:

    No change of image after hoover unfortunately. Do not know the reason, cache cleared, all according to instructions.


Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *