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 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
    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
    •