In JavaScript, one can “stack” functions in a JavaScript event by separating them with a semicolon.  This is the key to the “multiple rollover” functionality you see above.

Note: It´s a really good idea to check out the Rollover JavaScript page before attempting this functionality.

Here´s the breakdown on how it works:

1. Place your two (or more) “initial” images on your page.
2. Add the “Rollover” images to the Assets View for each “initial” image.
• Go to the Assets View
• Select “New File Asset” from the “Assets” menu
• Point NOF at the new file
• Click on the “Always Publish” check box
• Click OK.
3. Add the Rollover Definition Script to each “initial” image, making sure to change the variable and file names so that they are unique for each image
    
• The Rollover Definition Script, once again, is
   

  <script language = "JavaScript"> <!-- if(document.images) { button1 = new Image() button1.src = "../assets/images/file1.gif" button2 = new Image() button2.src = "../assets/images/file2.gif" } // --> </script>

  
  
  ... the  variables you need to make unique for each image are in blue. The file names you need to make unique for each image are in red.
  
• For the image which will change with each mouseover on the other images, you will need to add additional “alternate image” definitions. For example, in the sample above, I have this Rollover Definition Script defined:
  
  

  <script language = "JavaScript"> <!-- Script for "Button3" if (document.images) { button3a = new Image() button3a.src = "../assets/images/bluecirc.gif" button3b = new Image() button3b.src = "../assets/images/bluesquare.gif" button3c = new Image() button3c.src = "../assets/images/greensquare.gif" } // --> </script>

  
  
  ... note the additional button3c definition.
  
4. Add the Element Name Script to each “initial” image, making sure to change the variable name so that it matches the Rollover Definition Script for each image.
    
• The Element Name Script is
  
  

  name = button

  
  
  ... with the variable name you ned to make unique for each image in blue.
   
5. Set the link and scripting for each Rollover button which has only one alternate image:
    
• Click the “Link” button in the Picture Properties window
• Click the “HTML” button in the “Link” dialog box
• In the “Inside Tag” field, type in the following code:
  
  

  onMouseOver = "if(document.images) { button1.src = button1b.src; button3.src = button3b.src }" onMouseOut = "if(document.images){ button1.src = button1a.src; button3.src = button3a.src}"

  
  
  ... with the variables in blue changed to match the appropriate variables for the rollover button images.
  (Note - you should type this codea as one continuous line)

Keep in mind that the Rollover Effect will not work until you publish the site, either locally or to your server.