Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jul 2008
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Access another div from 'this'

    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. 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:
    Code:
    <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:
    Code:
    <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>

  • #2
    New Coder
    Join Date
    Mar 2009
    Location
    Fabric Covered Box
    Posts
    69
    Thanks
    1
    Thanked 16 Times in 14 Posts
    An id must be unique -- you can't have a bunch of things with the same id. Anyway you don't need ids.

    Give this a whirl
    Code:
    function hoveron(item)
    {
    	item.parentNode.getElementsByTagName('div')[0].style.display = 'inline';
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •