Hi there, kinda stuck and was wondering if I could get some assistance.
Please let me know if I am doing this completely wrong too (that is a possibility!)....
I want to have an image, that when you rollover it, shows its title over the top of the said image. I have kinda got it working, but when I rollover the actual text or other part of the text div, it starts going mental! This will be a problem, as I want to have a transparent box over the whole image.
Anyone have any suggestions? Thanks!
HTML Code:
<html><head><style type="text/css">
#thetext{
width:200px;
height:100px;
margin: 10px 0 0 10px;
position: absolute;
background-color:#FFC;
display:block;
}
</style><script type="text/javascript">
function showIt(div){
obj=document.getElementById(div);
obj.style.display = "block";
}
function hideIt(div){
obj=document.getElementById(div);
obj.style.display = "none";
}
window.onload=function () {
hideIt('thetext');
}
</script></head><body><div><div id="thetext">Some other test would go here</div><a href="somepage.html" onmouseOver="showIt('thetext');" onmouseOut="hideIt('thetext');"><img src="http://landscaping.savvy-cafe.com/wp-content/uploads/2007/03/irish-landscape.jpg"width="500" height="375" /></a></div></body></html>
When the div is displayed, the link is displaced causing a mouseout event which hides it again, which causes a mouseover of the link etc.
The setup you want to have involves an image with a mouseover handler that displays a relatively-postioned div over the image.
The mouseout handler that hides that div should be assigned to the div rather than the image.
Reply With Quote
Confused ...
Bookmarks