<HTML>
<HEAD>
<TITLE>JavaScript Demo Example 2</TITLE>
<script language="javascript" type="text/javascript">
<!-- Hide script from older browsers
function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length)
{
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return
x;
}
function MM_showHideLayers() { //v3.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) {
v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v;
}
obj.visibility=v; }
}
//-->
</script>
</HEAD>
<BODY BGCOLOR="WHITE">
<H3> Pass the mouse pointer over the words below to display text in a
specific
area. <a href="example_2_html.htm">View source.</a></H3>
<table width="100%">
<tr>
<td align="center">
<a href="#"
onMouseOver="MM_showHideLayers('Initial','','hide','Jefferson','','show')"
onMouseOut="MM_showHideLayers('Initial','','show','Jefferson','','hide')"
onClick="return false">Jefferson</a>
<a href="#"
onMouseOver="MM_showHideLayers('Initial','','hide','Lincoln','','show')"
onMouseOut="MM_showHideLayers('Initial','','show','Lincoln','','hide')"
onClick="return false">Lincoln</a>
<a href="#"
onMouseOver="MM_showHideLayers('Initial','','hide','Roosevelt','','show')"
onMouseOut="MM_showHideLayers('Initial','','show','Roosevelt','','hide')"
onClick="return false">Roosevelt</a>
<a href="#"
onMouseOver="MM_showHideLayers('Initial','','hide','Kennedy','','show')"
onMouseOut="MM_showHideLayers('Initial','','show','Kennedy','','hide')"
onClick="return false">Kennedy</a>
<a href="#"
onMouseOver="MM_showHideLayers('Initial','','hide','Nixon','','show')"
onMouseOut="MM_showHideLayers('Initial','','show','Nixon','','hide')"
onClick="return false">Nixon</a>
<a href="#"
onMouseOver="MM_showHideLayers('Initial','','hide','Reagan','','show')"
onMouseOut="MM_showHideLayers('Initial','','show','Reagan','','hide')"
onClick="return false">Reagan</a>
</td>
</tr>
<tr>
<td>
<p> </p>
<p> </p>
</td>
</tr>
</table>
<div id="Initial" style="position:absolute; width:751px; height:51px; z-index:1;
top: 82px; visibility: visible; left: 16px">
<p align="center"><b>(This text will be replaced when you pass the
mouse pointer over a president's name.)</b></p>
</div>
<div id="Jefferson" style="position:absolute; width:751px; height:51px; z-index:1;
top: 82px; visibility: hidden; left: 16px">
<p align="center"><b>I would rather be exposed to the inconveniences
attending too much liberty than to those attending too small a degree of it.</b></p>
</div>
<div id="Lincoln" style="position:absolute; width:751px; height:51px; z-index:1;
top: 82px; visibility: hidden; left: 16px">
<p align="center"><b>If I were two-faced, would I be wearing this
one?</b></p>
</div>
<div id="Roosevelt" style="position:absolute; width:751px; height:51px; z-index:1;
top: 82px; visibility: hidden; left: 16px">
<p align="center"><b>We have nothing to fear, but fear itself.</b></p>
</div>
<div id="Kennedy" style="position:absolute; width:751px; height:51px; z-index:1;
top: 82px; visibility: hidden; left: 16px">
<p align="center"><b>Ask not what your country can do for you, but
what you can do
for your country.</b></p>
</div>
<div id="Nixon" style="position:absolute; width:751px; height:51px; z-index:1;
top: 82px; visibility: hidden; left: 16px">
<p align="center"><b>I am not a crook!</b></p>
</div>
<div id="Reagan" style="position:absolute; width:751px; height:51px; z-index:1;
top: 82px; visibility: hidden; left: 16px">
<p align="center"><b>Trust but verify.</b></p>
</div>
<p><b>This example uses <i>onMouseOver</i> and <i>onMouseOut</i>
<i>event-handlers</i>,
the <i>visibility property</i> of the <i>layers object</i>,
and a function "MM_showHideLayers".
The phrases are stored within layers defined as HTML divisions. The onMouseOver
and onMouseOut event-handlers call a function "MM_showHideLayers"
and pass parameters (information) to it, causing the layers to be displayed
and hidden by changing the <i>value</i> of the visibility property
from <i>hidden</i>
to <i>visible</i> and vice versa. The JavaScript event-handlers
and functions
were inserted into the HTML file by Dreamweaver.</b></p>
<p> </p>
<p><a href="JavaScriptDemo.htm">Return to Having Fun with JavaScript</a>.</p>
</BODY>
</HTML>