Where your journey begins
Showcase your website at Fusion GalleriesNetObjects Fusion 7 Websites Portal



You want to have a mouseOver event that changes text in a remote location not an image

Step 1: Create the Script that Holds the Text

Write a JavaScript variable array that holds all of the descriptions

<script language="JavaScript"><!--
var description = new Array();
description[0] = "Make description 0 your default text and call it with onMouseOut";
description[1] = "Place Text in here to show what you want for the mouseOver";
description[2] = "You can embed <b>HTML</b> into what you want to show";
description[3] = "<i>Visit gotFusion for more helpful tutorials</i>";
description[4] = "Add as many as you want by adding more descriptions";
// --></script>

  • Place the array in the Layout HTML insert Between Head Tags if you wish these targeted text rollovers to be on one page
  • OR place the array in the MasterBorder HTML insert Between Head Tags if you want to use them on all pages

Read the gotFusion Script Function tutorial for information about placing scripts in the Head

Step 2:  Call in the target descriptions on Rollover
  • Create a 2 celled table with 2 columns and 1 row.
    If you do not want to see the table borders set them to 0

    You do not need to use the 2 cell table example for targeted rollovers to work.  You can place the target code anywhere for it to work, the 2 cell table is used here for this example only.

    Note: If you use a table make sure you set the height to pixels and make it tall enough to hold the largest text you will be using to avoid the table cell changing height when you mouseOver and your text is different row heights
  • Place the text you wish to use as the links in the cell on the left
  • Highlight each text link and create your internal, external, or file link as normal
  • Click the HTML button at the bottom left of the Link Properties Palette

HTML Insert button on Link Properties Palette

  • On the Inside Link tab enter your mouseOver code:
    onMouseOver="Words.innerHTML = description[#];" ; onMouseOut="Words.innerHTML = description[0];"(replace # with the number of the description text in your function
    use [0] as the mouseOut default

code to trigger the targeted text mouse over

  • Double click within the right table cell to enter edit mode
  • Enter your default text (what you want to see when the page is loaded) in the table cell
  • click just BEFORE the text and Press CTRL+T to bring up the HTML insert dialogue box
    Enter this <a id="Words"> and press OK

HTM Linsert anchor code

  • Click at the END of the default text and press CTRL+T to bring up the HTML dialogue box
    Close the anchor with </a> and press OK

This is what you will see and how it will work

Fusion Galleries

This will be the Default Text that visitors will see first it is changed when they mouseover the links. The Text will return to this when the page is reloaded


View the PREVIOUS page

Return to the TOP of this page

View the NEXT page in this tutorial

|  Fusion  |  Web Design  |  Hosting  |  Resources  |  gotFusion Store  | 

Problems with this page?  

All content copyright © 2001 - 2005 gotFusion LLC. The name gotFusion and the gotFusion ® logo are registered trademarks of gotFusion LLC
Copyright, legal notice & privacy statement