This kind of table has been around for years. It’s nice to finally know how to make them.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
| <html>
<head>
<title>jQuery day 2 of 15</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
$(document).ready(function() {
// this stripes our table very nicely
$("table tbody tr:odd").addClass("alt");
// now add the hover bit
$("table tbody tr").hover(
function() {
// over
$(this).addClass("highlight");
},
function() {
// out
$(this).removeClass("highlight");
}
);
});
</script>
<style>
table {
margin: 50px auto 0 auto;
border: 1px solid #666666;
}
thead tr {
background-color: #666666;
}
th {
font-weight: bold;
color: #ffffff;
padding: 5px;
}
td {
width: 200px;
padding: 5px;
}
.alt {
background-color: #cccccc;
}
.highlight {
background-color: #ff9900;
}
.highlight td {
border-top: 1px solid #666666;
border-bottom: 1px solid #666666;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
</tr>
</thead>
<tbody>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</tbody>
</table>
</body>
</html> |
We have a column of gallery names on the left, and a grid of thumbnails on the right. Each gallery name corresponds to a thumbnail, and they are both links to a gallery page. Like this:
We want the thumbnail to “light up” when you hover over the gallery name, and we want the gallery name to light up when you hover over the thumbnail. The solution was original written with a javascript function and a set of onMouseOver() onMouseOut() events. You had two huge javascript function calls for each text link and two huge javascript function calls for each thumbnail link. Ick.
So I rewrote it with jQuery, which I know nothing about. I was able to remove all the onMouseOver() and onMouseOut() crap from all of the links, and I added this jQuery code:
function textToNum(num) {
if (num == "one") { return "1"; }
if (num == "two") { return "2"; }
if (num == "three") { return "3"; }
if (num == "four") { return "4"; }
if (num == "five") { return "5"; }
if (num == "six") { return "6"; }
if (num == "seven") { return "7"; }
if (num == "eight") { return "8"; }
if (num == "nine") { return "9"; }
return "zero";
}
function numToText(num) {
if (num == "1") { return "one"; }
if (num == "2") { return "two"; }
if (num == "3") { return "three"; }
if (num == "4") { return "four"; }
if (num == "5") { return "five"; }
if (num == "6") { return "six"; }
if (num == "7") { return "seven"; }
if (num == "8") { return "eight"; }
if (num == "9") { return "nine"; }
return "0";
}
$(document).ready(function(){
// this adds the code to highlight the thumbnails when you hover over the text
$("#secondaryNavFive ul li a span").hover(
function() {
// over
var span_id = $(this).attr('id');
var image_id = textToNum(span_id); // one highlights image with id 1
$("#" + image_id).css('border-color', '#f89828');
},
function() {
// out (not hovering any more)
var span_id = $(this).attr('id');
var image_id = textToNum(span_id); // one highlights image with id 1
$("#" + image_id).css('border-color', '#333333');
}
);
// this adds the code to highlight the TEXT when you hover over the THUMBNAIL
$("#mainContentFour .thumbs a img").hover(
function() {
// over
var image_id = $(this).attr('id');
var span_id = numToText(image_id);
$("#" + span_id).css('color', '#f89828');
},
function() {
// out (not hovering any more)
var image_id = $(this).attr('id');
var span_id = numToText(image_id);
$("#" + span_id).css('color', '#aaaaaa');
}
);
});