Forum Moderators: not2easy
The script is :
function MM_showHideLayers() { //v6.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; }
The actual body content is:
Show the layer <a href="#" onMouseOver="MM_showHideLayers('Layer1','','show')" onMouseOut="MM_showHideLayers('Layer1','','hide')">now</a>
<div id="Layer1" style="position:absolute; width:340px; height:22px; z-index:1; visibility: hidden; background-color: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000;">WCMC
Reference </div> on top of this text.
With this in place, it works fine, but the layer is only displayed there when I don't place this text inside a <p> tag. Any idea how I can keep the text and layer in line inside a paragraph?
Cheers!
Germain
I don't do scripts and I can't get that one to work, but maybe someone else can help with that..
What I can say is that changing the div to a span works.. but whether you can work that with the script I don't know ;)
That is because the <div> is a block level element so it's creating its own "block level box".. you actually need the text to be "inline" which is why the span works it's an inline element..
You can also style the div so it's display: inline; too... but then you'll need to set the display of the <p> that it's inside to display: inline too..
I stripped the Javascript and this should demo what the CSS is doing.. toggle the visibility (uncomment it) to see
<style type="text/css" media="screen">
p.one {display: inline;}#Layer1 {display: inline;}
#Layer1, #Layer2 {
position: absolute;
width: 340px;
height: 22px;
z-index: 1;
background: #ffc;
border: 1px solid #000;
/* visibility: hidden; */
}
</style>
</head>
<body>
<p class="one">Show the layer <a href="#">now</a> <div id="Layer1">WCMC Reference </div> on top of this text.</p><p>Show the layer <a href="#">now</a> <span id="Layer2">WCMC Reference </span> on top of this text.</p>
Suzy
