Menu
Posted this in the CSS area but got no response… Maybe this is a better spot for it???
I need some text and an image to appear on mouseover and disappear when the mouse moves away. There are multiple instances (all with different images & text) on one page in a table layout.
Here’s what I’ve tried:
I have a CSS style called popTxt
.popTxt {
position:absolute; left:-45; top:20px;
border-style:solid;
border-width:2;
border-color:ffffff;
background-color:#999999;
padding: 5px;
color: ffffff;
z-index:2;
visibility:hidden;
}
and a page with the following JS:
<script language=”JavaScript”>
function ShowPopTxt(id)
{
document.getElementById(id).style.visibility = “visible”;
}
function HidePopTxt(id)
{
document.getElementById(id).style.visibility = “hidden”;
}
</script>
and then the following chunk of HTML:
<span style=”position:relative;”><span id=”term1″ class=”popTxt” style=”width:160;”>
This is the text that will appear inside the first popup window <img src=”tmp/myimage.jpg”> </span><a href=”javascript:void(0);” onMouseover=”ShowPopTxt(‘term1’);” onMouseout=”HidePopTxt(‘term1’);”>[Popup Text]</a></span>
Everything works fine… BUT…
If I use the chunk of HTML multiple times (with different span IDs of course) and the image in the HTML overlaps another instance of popTxt, I can see the text for the other instance on top of the image.
e.g. if my page looked like the following, and the image that appears when I mouseover [Popup Text 1] is big enough to overlap with [Popup Text 2], I can still read [Popup Text 2]
[Popup Text 1]
[Popup Text 2]
[Popup Text 3]
Now thinking about it, I realized that every instance of PopTxt is set with z-index=2, so maybe that was the problem.
So I changed the ShowPopTxt and HidePopTxt functions to:
function ShowPopTxt(id)
{
document.getElementById(id).style.visibility = “visible”;
document.getElementById(id).style.zIndex = “99”;
}
function HidePopTxt(id)
{
document.getElementById(id).style.visibility = “hidden”;
document.getElementById(id).style.zIndex = “2”;
}
But that made exactly no visible difference.
Any ideas on how to solve this would be greatly appreciated. I am relatively new to JavaScript and CSS, so please don’t assume I am smart enough not to have done something really stupid.
Thanks in advance…