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');
      }</script>

• test on tow imagse with _over suffix.