Beyond Fusion
Follow us on Twitter
 
bug-grn
tutorial

Targeted Rollovers with JavaScript

This tutorial teaches you how to do targeted rollovers in Fusion pages.

A targeted rollover is used to display content on a page at a designated location when you mouseover another location to trigger the image swap. Instructions are provided for rollover images and image hotspots.

You can also substitute the onClick event for the onMouseover event to trigger the image swap with a mouse click instead of a mouse over.


Tutorial and code by: Chuck Joslin

Example

Mouse over the Fusion 11 box image to the right. You'll see the BF logo above change to an alternate design (by Rich deCruz). Mouse over the new image to revert back to the original.

Fusion 11

Note1: Take care to get your image paths correct. The path will be determined by how you arrange files when you publish.

Note2: Works best if you make your start image and all replacement images the same dimensions.

Note3: Repeat Step 3-1 and/or Step 3-2 as necessary for additional image swaps.



Step 1. In your page Layout HTML, insert this script on the Between the Head Tags tab.
 

    <SCRIPT LANGUAGE="JavaScript">
       function quickSwap( strNewPhoto ) {
          if( document.Main_Pic ) {
             if( document.Main_Pic.src ) {
                document.Main_Pic.src = strNewPhoto;
                return false;
             }
          }
          return true;
       }
    </SCRIPT>

     

Step 2. (modify the image path in step 2c to be the path to the start image)

Link code for the target image

  a. Place image on the page where you want the target. This will be the image initially displayed.

  b. On the image property window, click on the HTML button.

  c. Place the following on the Before Tag tab:

     <a href="#" onMouseover="document.Main_Pic.src='../path/to/startpic.jpg';">

  d. Place the following on the Inside Tag tab:

     NAME="Main_Pic"

  e. Place the following on the After Tag tab:

  </a>


Step 3-1. FOR IMAGE LINKS (modify the image path in step 3-1c to be the path to the target replacement image. Replacement images must be ftp'd to the web server if not already on the web server)

Link code for mouseover images

  a. Place rollover image on the page where you want it to appear. This is the image the visitor mouses over to trigger the swap of the image in Step 2.

  b. On the image property window, click on the HTML button.

  c. Place the following on the Before Tag tab:

     <A HREF="#" onMouseover="return quickSwap('../path/to/mouseoverpic.jpg');">

  d. Place the following on the After Tag tab:

  </a>

Step 3-2. FOR HOTSPOT LINKS (modify the image path in step 3-2d to be the path to the target replacement image)

Link code for mouseover images

  a. Place hotspot on the desired image

  b. In the Link Window, Choose Type: External Link, New Link: (none), Link: #

  c. On the hotspot property window, click on the HTML button.

  d. Place the following on the Inside Tag tab:

     onMouseover="return quickSwap('../path/to/mouseoverpic.jpg');"
 

©2004-2017

Buy AllWebMenus

Works with Fusion 2015

NetObjects Fusion is Registered Trademark of NetObjects, Inc.

Adobe 

Once You Know, You Newegg 

mariadb-badge-88x31