|
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
- 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
- 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
- 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
This page was written by and is maintained by turtle
|
