Follow Me

how to add background color onmouseover using jquery

Fri, Jun 18, 2010

JQuery, PHP

Hi Friends,

In my recent project work, I need to add background color on table row (even rows) on mouse over. I used jquery for this. Its very easy to do that. You need to call two java script function – one for adding background color onmouseover and second for returning back to original background color onmouseout.

It is php dynamic listing so you need to use variable $i for separating even and odd listing rows.

<table border='0' cellpadding='0' cellspacing='0'>
<?php
$i=0;
loop start here
?>

<tr id="special_list<?php echo $i;?>" onmouseover="javascript:insertback(<?php echo $i;?>);" onmouseout="javascript:removeback(<?php echo $i;?>);">
<td>Dynamic Listing Data</td>
</tr>

<?php
 ++$i;
loop ends here
?>
</table>

In above code we just call two java script functions onmouseover and onmouseout for changing background of table rows.

Following are the code of those two javascript functions. Its a jquery code that simply uses its property of adding css.

function insertback(id)
{
	if(id%2==0)
	{
		$('#special_list'+id).css('background-color', '#cccccc');
	}
}

function removeback(id)
{
	if(id%2==0)
	{
		$('#special_list'+id).css('background-color', '#FFFFFF');
	}
}

Jquery uses its property of adding css to element’s id. Hope this script help you to improve your listing display.

Enjoy it :)

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Blogplay
  • blogmarks
  • Design Float
  • DZone
  • MySpace
  • Reddit
  • StumbleUpon
  • Twitter
, , , , ,

Related Posts:


Recent Posts:

  • Best collection of firefox addons for web designers and developers
  • .htaccess basic features with example
  • how to include an external css and js with javascript dynamically
  • How to preserve line breaks in textarea mysql data
  • how to generate excel report with php and mysql
  • Leave a Reply