simple layer visibility function

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • ballygowanboy
    New Member
    • Jul 2007
    • 47

    simple layer visibility function

    hi, i've got 5 thumbnail images.

    each one will have a brief decription, in a layer below it, set to visibility:hidd en;

    when the user mouse overs each image, the info will be displayed.

    i got the first one working using 2 functions, one to apear and one to disapear.

    how do i keep my script simple, and just use these functions to do the same effect on the other 4 images.

    at the moment, when you mouseover image 2, decription for both images is displayed.


    here's the javascript

    Code:
    <script language="javascript1.2">
    
    function tAppear()
    {
    	document.getElementById("t1").style.visibility = "visible";
    	document.getElementById("t2").style.visibility = "visible";
    
    }
    
    function tDisappear()
    {
    	document.getElementById("t1").style.visibility = "hidden";
    	document.getElementById("t2").style.visibility = "hidden";
    }
    
    
    </script>
    and the html

    Code:
    <table width="100%" border="0" cellspacing="5" cellpadding="6">
      <tr>
        <td bgcolor="#f9efda"><span onMouseOver="tAppear()" onMouseOut="tDisappear()"><img src="images/t1.jpg" width="100" height="75" /></span></td>
        <td bgcolor="#f9efda"><span onMouseOver="tAppear()" onMouseOut="tDisappear()"><img src="images/t2.jpg" width="100" height="75" /></span></td>
        <td bgcolor="#f9efda">&nbsp;</td>
        <td bgcolor="#f9efda">&nbsp;</td>
        <td bgcolor="#f9efda">&nbsp;</td>
      </tr>
      <tr>
        <td bgcolor="#f9efda"><div id="t1">Never Forget<br />€10</div></td>
        <td bgcolor="#f9efda"><div id="t2">Viva La Evolución <br />€10</div></td>
        <td bgcolor="#f9efda">&nbsp;</td>
        <td bgcolor="#f9efda">&nbsp;</td>
        <td bgcolor="#f9efda">&nbsp;</td>
      </tr>
    </table>

    thanks
  • acoder
    Recognized Expert MVP
    • Nov 2006
    • 16032

    #2
    Use an argument in your function, e.g.
    [CODE=javascript]function tAppear(id)
    {
    document.getEle mentById(id).st yle.visibility = "visible";
    }[/CODE]then you can re-use this function for all layers.

    Comment

    • ballygowanboy
      New Member
      • Jul 2007
      • 47

      #3
      thanks!!!!!!!!! !!!!!!!

      Comment

      • acoder
        Recognized Expert MVP
        • Nov 2006
        • 16032

        #4
        No problem, you're welcome :)

        Comment

        • helimeef
          New Member
          • Sep 2007
          • 77

          #5
          Originally posted by acoder
          Use an argument in your function, e.g.
          [CODE=javascript]function tAppear(id)
          {
          document.getEle mentById(id).st yle.visibility = "visible";
          }[/CODE]then you can re-use this function for all layers.
          Wouldn't it just be easier just to use DOM? I made some example code that uses it but he seems happy with the onclicks in his code... Oh how I hate onclick :)

          Comment

          • acoder
            Recognized Expert MVP
            • Nov 2006
            • 16032

            #6
            Originally posted by helimeef
            Wouldn't it just be easier just to use DOM? I made some example code that uses it but he seems happy with the onclicks in his code... Oh how I hate onclick :)
            I only suggested a simple change using the OP's code. You could, if you want, show your alternative solution.

            Comment

            Working...