# JS show div onrollover issue

**URL:** <https://forum.kirupa.com/t/js-show-div-onrollover-issue/314126>\
**Category:** web dev\
**Created:** [September 19, 2010, 7:49am UTC](https://forum.kirupa.com/t/js-show-div-onrollover-issue/314126 "2010-09-19T07:49:31Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![theSchtickler](https://avatars.discourse-cdn.com/v4/letter/t/ba9def/32.png) [@theSchtickler](https://forum.kirupa.com/u/theSchtickler)\
**Post date:** [September 19, 2010, 7:49am UTC](https://forum.kirupa.com/t/js-show-div-onrollover-issue/314126/1 "2010-09-19T07:49:31Z")

</div>

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!

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

```
