# Access another div from 'this'

**URL:** <https://forum.kirupa.com/t/access-another-div-from-this/286033>\
**Category:** web dev\
**Created:** [April 8, 2009, 11:19pm UTC](https://forum.kirupa.com/t/access-another-div-from-this/286033 "2009-04-08T23:19:02Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![rondog](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/rondog/32/2478_2.png) [@rondog](https://forum.kirupa.com/u/rondog)\
**Post date:** [April 8, 2009, 11:19pm UTC](https://forum.kirupa.com/t/access-another-div-from-this/286033/1 "2009-04-08T23:19:02Z")

</div>

I am trying to make play button appear on top of a thumbnail when you mouse over it. Just like the thumbs on [www.hulu.com](http://www.hulu.com). The code I have works for the first thumbnail. Any other thumbnail I mouse over, the first thumbnail’s play button appears.

I somehow need to use ‘this’ to get the next element in the div. ‘playbtn’ is the element I need to get at for each thumbnail. Here is my code:

the JS:

```auto

<script type="text/javascript">
function hoveron(item)
{
	document.getElementById("playbtn").style.display = 'inline';
}
function hoveroff(item)
{
	document.getElementById("playbtn").style.display = 'none';
}
</script>

```

the HTML:

```auto

<table width="800" cellpadding="5" cellspacing="20" border="0">
  <tr>
    <td class="courseTable" valign="top" width="33%">
    <div>
        <a href="somesite.com">
            <img id="thumb" border="0" src="thumb.jpg" onmouseover="hoveron(this);" onmouseout="hoveroff(this);"/>
            <div id="playbtn" style="position:relative; top: -20px; left: -90px; z-index:5; display:none;"><img border="0" src="images/btn-play-big.png" /></div>
        </a>
    </div>
    </td>
    <td class="courseTable" valign="top" width="33%">
    <div>
        <a href="somesite.com">
            <img id="thumb" border="0" src="thumb.jpg" onmouseover="hoveron(this);" onmouseout="hoveroff(this);"/>
            <div id="playbtn" style="position:relative; top: -20px; left: -90px; z-index:5; display:none;"><img border="0" src="images/btn-play-big.png" /></div>
        </a>
    </div>
    <td class="courseTable" valign="top" width="33%">
    <div>
        <a href="somesite.com">
            <img id="thumb" border="0" src="thumb.jpg" onmouseover="hoveron(this);" onmouseout="hoveroff(this);"/>
            <div id="playbtn" style="position:relative; top: -20px; left: -90px; z-index:5; display:none;"><img border="0" src="images/btn-play-big.png" /></div>
        </a>
    </div>
    </td>
  </tr>
</table>

```