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
    CRA
    CRA is offline
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Table background change using Javascript

    Hi there, I'm trying to make a javascript menu. As a start, I want the background of the cell to change to a specific image on mouseOver. Does it not work because of the "background-image" translation from CSS to JAVASCRIPT or could it be something else. Thank you.


    Code:
    <html>
    <head>
    <title>Untitled Document</title>
    <link rel="stylesheet" href="main.css" />
    <script language="javascript">
    function change() 
    {
    		document.getElementById("homebtn").style.backgroundImage="imgs/btn_black2.gif">;
    }
    </script>
    
    </head>
    <body>
    
    <table width="100" >
    		<td>
    				<tr style="background-image:url(imgs/btn_black.gif)" class="myFont" onMouseOver="change()" id="homebtn">- Home</tr>
    				<tr>asdfsdf</tr>
    				<tr>asdfsdf</tr>
    		
    		</td>
    </table>
    </body>
    </html>

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Yes, the syntax was incorrect. should be
    Code:
    document.getElementById('homebtn').style.backgroundImage='url(imgs/btn_black2.gif)'
    But the worst thing is that you have switched the HTML code in your table. The rows are nesting the cells, not inverse. It should be:

    <table>
    <tr>
    <td></td>
    <td></td>
    <td></td>

    </tr>
    </table>

    And you may also use the this self reference, and shorten the code:
    Code:
    <td style="background-image:url(imgs/btn_black.gif)" class="myFont" onmouseover="this.style.backgroundImage='url(imgs/btn_black2.gif)'" id="homebtn">- Home</td>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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