Menu
Hi, I am using the following script which I found on the internet for a page where I want to have users hover over a link and have the div for that link come up. The problem with this script is that onmouseout the layer disappears therefore making it impossible for users to click on the links that I would place in the div. Is there any way that this script can be modified so that onmouseover the layer changes but does not disappear until the user goes over another link?
Thanks in advance
[code=html]
<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>
</BODY>
</HTML>