JS show div onrollover issue

programming web dev
1

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>
<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>