Ok, let’s start:
I have already created PNG image with two backgrounds. width 600px height 100px. (Save image to the same folder as your html)
Create TABLE with tableRowHover class and with TR class trHover.
{CODE type:php;}
<table border=”0″ cellpadding=”0″ cellspacing=”0″ class=”tableRowHover”>
<tr>
<th>Time</th>
<th>Date</th>
<th>City</th>
<th>Price</th>
</tr>
<tr class=”trHover”>
<td>06:00</td>
<td>14 May 2010</td>
<td>New York</td>
<td>$700</td>
</tr>
</table>
{/CODE}
Add CSS:
{CODE type:php;}
<style>
table.tableRowHover {
width: 600px;
}
table.tableRowHover tr.trHover {
background: url(row-bg.png) no-repeat 0 0;
position: relative;
}
table.tableRowHover tr:hover {
background-position: 0 -50px;
}
table.tableRowHover td {
height: 50px;
background-image: none;
}
</style>
{/CODE}
Explanation:
For TR we added position: relative and for TD background-image: none – This is background fix for IE!
We create TABLE with fixed width 600px, same width has our background image.
For TD we added fixed height 50px (half of our double image), so, for hover in TR:HOVER we added negative Y background position -50px;
Note: in top of HTML page have to be:
{CODE type:php;}<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>{/CODE}
otherwise in IE rollover will not work
Now, You have to get this. (will open in new browser window)
It works in all browsers except Mac Safari. So if you don’t need this browser this is it.
Safari ROW background rollover fix, its time for rain dance. We will use background-position method.
In our Html code we have to add classes to our TH’s: header1, header2, header3, header4 and for TD’s: cell1, cell2, cell3, cell4.
{CODE type:php;}
<table border=”0″ cellpadding=”0″ cellspacing=”0″ class=”tableRowHover”>
<tr>
<tr>
<th class=”header1″>Time</th>
<th class=”header2″>Date</th>
<th class=”header3″>City</th>
<th class=”header4″>Price</th>
</tr>
</tr>
<tr class=”trHover”>
<td class=”cell1″>06:00</td>
<td class=”cell2″>14 May 2010</td>
<td class=”cell3″>New York</td>
<td class=”cell4″>$700</td>
</tr>
{/CODE}
In CSS we have to add this code:
{CODE type:php;}
<style>
table.tableRowHover .header1 {
width: 100px;
}
table.tableRowHover .header2 {
width: 200px;
}
table.tableRowHover .header3 {
width: 200px;
}
table.tableRowHover .header4 {
width: 100px;
border-right: none;
}
</style>
<![if !IE]>
<style>
table.tableRowHover tr.trHover td.cell1 {
background: url(row-bg.png) no-repeat 0 0;
}
table.tableRowHover tr.trHover:hover td.cell1 {
background-position: 0 -50px;
}
table.tableRowHover tr.trHover td.cell2 {
background: url(row-bg.png) no-repeat -100px 0;
}
table.tableRowHover tr.trHover:hover td.cell2 {
background-position: -100px -50px;
}
table.tableRowHover tr.trHover td.cell3 {
background: url(row-bg.png) no-repeat -300px 0;
}
table.tableRowHover tr.trHover:hover td.cell3 {
background-position: -300px -50px;
}
table.tableRowHover tr.trHover td.cell4 {
background: url(row-bg.png) no-repeat 100% 0;
}
table.tableRowHover tr.trHover:hover td.cell4 {
background-position: 100% -50px;
}
</style>
<![endif]>
{/CODE}
Explanation:
Our table has fixed width 600px each TD’s also have fixed width: 100+200+200+100=600. So, for each td we use X negative image position:
For first TD background-position: 0 0
For second TD background-position: -100px 0
For third TD background-position: -300px 0
For fourth TD background-position: -500px 0 or background-position: 100% 0
This code between this tag < ! [ if ! IE ] > < ! [ endif ] > only for FF and Safary – not for IE.
Now it works in Safari 🙂
Ok, now all HTML Code:
{CODE type:php;}
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<![if !IE]>
<style>
table.tableRowHover tr.trHover td.cell1 {
background: url(row-bg.png) no-repeat 0 0;
}
table.tableRowHover tr.trHover:hover td.cell1 {
background-position: 0 -50px;
}
table.tableRowHover tr.trHover td.cell2 {
background: url(row-bg.png) no-repeat -100px 0;
}
table.tableRowHover tr.trHover:hover td.cell2 {
background-position: -100px -50px;
}
table.tableRowHover tr.trHover td.cell3 {
background: url(row-bg.png) no-repeat -300px 0;
}
table.tableRowHover tr.trHover:hover td.cell3 {
background-position: -300px -50px;
}
table.tableRowHover tr.trHover td.cell4 {
background: url(row-bg.png) no-repeat 100% 0;
}
table.tableRowHover tr.trHover:hover td.cell4 {
background-position: 100% -50px;
}
</style>
<![endif]>
<style>
table.tableRowHover {
width: 600px;
font-family: Verdana;
text-align: left;
font-size: 18px;
text-indent: 28px;
}
table.tableRowHover th {
background: #ffcc00;
border-right: 2px solid #fff;
color: #3b3939;
font-size: 12px;
height: 20px;
vertical-align: middle;
}
table.tableRowHover .header1 {
width: 100px;
}
table.tableRowHover .header2 {
width: 200px;
}
table.tableRowHover .header3 {
width: 200px;
}
table.tableRowHover .header4 {
width: 100px;
border-right: none;
}
table.tableRowHover tr {
background: url(row-bg.png) no-repeat 0 0;
position: relative;
}
table.tableRowHover tr:hover {
background-position: 0 -50px;
}
table.tableRowHover td {
height: 50px;
background-image: none;
}
</style>
</head>
<body>
<table border=”0″ cellpadding=”0″ cellspacing=”0″ class=”tableRowHover”>
<tr>
<th class=”header1″>Time</th>
<th class=”header2″>Date</th>
<th class=”header3″>City</th>
<th class=”header4″>Price</th>
</tr>
<tr class=”trHover”>
<td class=”cell1″>06:00</td>
<td class=”cell2″>14 May 2010</td>
<td class=”cell3″>New York</td>
<td class=”cell4″>$700</td>
</tr>
<tr class=”trHover”>
<td class=”cell1″>08:00</td>
<td class=”cell2″>17 Feb 2010</td>
<td class=”cell3″>Los Angeles</td>
<td class=”cell4″>$750</td>
</tr>
<tr class=”trHover”>
<td class=”cell1″>06:50</td>
<td class=”cell2″>14 May 2010</td>
<td class=”cell3″>Tampa</td>
<td class=”cell4″>$710</td>
</tr>
<tr class=”trHover”>
<td class=”cell1″>11:20</td>
<td class=”cell2″>14 Jun 2010</td>
<td class=”cell3″>Miami</td>
<td class=”cell4″>$730</td>
</tr>
</table>
</body>
</html>
{/CODE}
Now you should have this. (will open in new browser window)
I hope it will help 🙂 if you have any questions, fill free to drop me a comment…