Changing cell's Color when mouse over

[ballouta]

Hello

 

Is it possible to change a cell color when moving the mouse over it? How?

 

Am I able to make a nice decoration on the left, i saw before some cells have a small colored column on the left before the text? can this be done by html code or it is an image background?

 

i have thi simple table (menu):

 

	<table border="1" width="11%" id="table1" bgcolor="#808000" cellspacing="0" cellpadding="0" bordercolor="#000000">
	<tr>
		<td>
		<p dir="ltr">Button 1</td>
	</tr>
	<tr>
		<td>
		<p dir="ltr">Button 2</td>
	</tr>
	<tr>
		<td>
		<p dir="ltr">Button 3</td>
	</tr>
</table>

 

thank you

[atl_andy]

It's quite simple to do.  Google is your friend.

[ToonMariner]

us the td:hover in your css...

 

you will have to use javascript to add a onmouseover and onmouseout event for ie6...

[Skittalz]

Hey ballouta,

 

To change a cell's color when you hover the mouse over it, simply add this code to the TD element

 

bgcolor='#HEXADECIMAL' onmouseover="style.backgroundColor='#HEXADECIMAL" onmouseout="style.backgroundColor='#HEXADECIMAL'"

 

If you want a smooth flowing highlight, 'bgcolor' and 'onmouseout' should be the same color or hexadecimal.

 

So in your case for your button, the code would look like this

 

	<table border="1" width="11%" id="table1" bgcolor="#808000" cellspacing="0" cellpadding="0" bordercolor="#000000">
	<tr>
		<td bgcolor="#808000" onmouseover="style.backgroundColor='#404040'" onmouseout="style.backgroundColor='#808000'">
		<p dir="ltr">Button 1</p> <!--Remember to close your tags! It will help when you learn XHTML! -->
                                      </td>
	</tr>
	<tr>
                                      <td bgcolor="#808000" onmouseover="style.backgroundColor='#404040'" onmouseout="style.backgroundColor='#808000'">
		<p dir="ltr">Button 2</p> 

	</tr>
	<tr>
                                      <td bgcolor="#808000" onmouseover="style.backgroundColor='#404040'" onmouseout="style.backgroundColor='#808000'">
		<p dir="ltr">Button 3</p> 
	</tr>
</table>

 

 

The decoration you probably saw could have been an image. To use an image for roll over, its a bit different.

 

To use and change images when you hover your mouse, use the following code

 

background='imageurl/bgimage.gif' onmouseover=style.backgroundImage="url('imageurl/bgimage2')"; onmouseout=style.backgroundImage="url('imageurl/bgimage.gif')";

 

Just file in the correct image url and you should be flying

 

Hope this helped!

 

SKitTalZ