Printable View
Im looking for a script to place in my chart of data in rows and columns, that will highlight the column and row the mouse rolls over. This will highlight areas a visitor scrolls over with the mouse arrow. Ive seen this effect before but cannot find the site that had it displayed. Im not sure if its called a transition or fade?
You could do this with jQuery.
More information:
http://docs.jquery.com/Selectors
http://docs.jquery.com/CSS
A very ugly and simple example of what I'm talking about. You could of course extend this and make it fade and look nicer.
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Highlighting Cells & Columns</title>
<style type="text/css">
thead td { color:red; }
td.selected { background:#000; color:#FFF; }
</style>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var heading = $('thead td');
$.each(heading, function(index, item) {
$(this).mouseover(function() {
$('td:nth-child('+(index+1)+')').addClass('selected');
});
$(this).mouseout(function() {
$('td:nth-child('+(index+1)+')').removeClass('selected');
});
})
});
</script>
</head>
<body>
<table id="playlist" cellspacing="0">
<thead>
<tr>
<td> </td>
<td>Title</td>
<td>Artist</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Lost In The Plot</td>
<td>The Dears</td>
</tr>
<tr>
<td>2</td>
<td>Poison</td>
<td>The Constantines</td>
</tr>
<tr>
<td>3</td>
<td>Plea From A Cat Named Virtute</td>
<td>The Weakerthans</td>
</tr>
<tr>
<td>4</td>
<td>Melissa Louise</td>
<td>Chixdiggit!</td>
</tr>
<tr>
<td>5</td>
<td>Living Room</td>
<td>Tegan And Sara</td>
</tr>
<tr>
<td>6</td>
<td>Speed</td>
<td>Bran Van 3000</td>
</tr>
<tr>
<td>7</td>
<td>Fast Money Blessing</td>
<td>King Cobb Steelie</td>
</tr>
<tr>
<td>8</td>
<td>Sore</td>
<td>Buck 65</td>
</tr>
<tr>
<td>9</td>
<td>Love Travel</td>
<td>Danko Jones</td>
</tr>
<tr>
<td>10</td>
<td>You Never Let Me Down</td>
<td>Furnaceface</td>
</tr>
</tbody>
</table>
</body>
</html>