Show/Hide Text Recipe

Purpose

This recipe can be used to create inline definitions of terms that appear when the user mouses over the affected text and disappear when the mouse leaves the area. It moves a step beyond the earlier tool tip recipe, since you can add any amount of text or graphics, formatted as desired.

Sample

test this text which should display a definition when your mouse moves over the defined term
definition goes here

Call within the element

previousText<SPAN onMouseOver="definitionID.style.display=''" onMouseOut="definitionID.style.display='none'"> definedTerm </SPAN> <P ID="definitionID" STYLE="display:none"> definition </P> followingText

where

	previousText	is the text that appears on the Web page right before the affected text;
	definedTerm	is the affected text. When the user moves the mouse over this text, the definition text pops up.
	definition	is the definition that appears when the user moves the mouse cursor over the definedTerm;
	definitionID	is an alphanumeric set of characters that you wish to use to identify this particular definedTerm/definition pair. If you use multiple occurrences of this recipe in the same HTML page, the definitionID must be unique for each occurrence. (For example, you could use something as simple as definitionID1, definitionID2,...)
	followingText	is the text that appears on the Web page right after the affected text.

Possible modifications

When the user mouses over the definedTerm, the definition appears. This recipe is flexible enough to include a small picture representing the definedTerm. To include a picture, add an <IMG> tag immediately after the definition text.