1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

JavaScript addin mouse over table with CSS

Discussion in 'Web Development' started by kalnera, Nov 4, 2007.

  1. kalnera

    kalnera New Member

    Hi all

    I want to use this table where the row changes collor when mouse go over it but I do not know how to put it in CSS and than call one simple tag to add the row to existing table. I don't know if it is possible but if it is can anyone help me with this

    Thank you in advance


    HTML:
    table width="300" border="1">
      <tr onMouseover="this.bgColor='#EEEEEE'"onMouseout="this.bgColor='#FFFFFF'">
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
     
  2. student101

    student101 New Member

  3. kalnera

    kalnera New Member

    This example is very good. However it applies to only one cell. I tried applying the collor change to the row (i.e. <tr> tag) but was unsuccessfull. Would you be able to help me with that pls?

    thank you
     
  4. kalnera

    kalnera New Member

  5. student101

    student101 New Member

    I posted that already, must have read it wrong.
    Here are others:
    PHP:
    <STYLE>
    <!--
      
    tr background-color#DDDDDD}
      
    .initial background-color#DDDDDD; color:#000000 }
      
    .normal background-color#CCCCCC }
      
    .highlight background-color#8888FF }
    //-->
    </style>
     
    <
    table border="0" cellspacing="0" bgcolor="#CCCCCC" cellpadding="0">
    <
    tr>
      <
    td bgcolor="#FFCC00" WIDTH="100"><b>Brand</b></td>
      <
    td bgcolor="#FFCC00" WIDTH="100"><b>Dimensions</b></td>
      <
    td bgcolor="#FFCC00" WIDTH="100"><b>Price</b></td>
      <
    td bgcolor="#FFCC00" WIDTH="100"><b>Size</b></td>
      <
    td bgcolor="#FFCC00" WIDTH="100"><b>Color</b></td>
      <
    td bgcolor="#FFCC00" WIDTH="100"><b>&nbsp;Type</b></td>
      <
    td bgcolor="#FFCC00" WIDTH="100"><b>Comment</b></td>
    </
    tr>
    <
    tr style="background-color:#CCCCCC;" 
      
    onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'">
      <
    td>Row A</td>
      <
    td>200x300</td>
      <
    td>$200,000.00</td>
      <
    td>small</td>
      <
    td>white&nbsp;</td>
      <
    td>good</td>
    <
    td>2 doors</td>
    </
    tr>
    <
    tr 
      onMouseOver
    ="this.className='highlight'" onMouseOut="this.className='normal'">
      <
    td>Row B</td>
      <
    td>256x1000</td>
      <
    td>$232,300.00</td>
      <
    td>large</td>
      <
    td>yellow&nbsp;</td>
      <
    td>good</td>
      <
    td>nice</td>
    </
    tr>
    <
    tr class="initial" 
      
    onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'">
      <
    td>Row 3</td>
      <
    td>543x300</td>
      <
    td>$122,111.00</td>
      <
    td>medium</td>
      <
    td>yellow&nbsp;</td>
      <
    td>good</td>
      <
    td>expensive</td>
    </
    tr>
    ....
    Cheers