<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script>
$(document).ready(function(){
$("#c1").hover(function(){
$("[class*='gp1']").attr("bgcolor","#FF0000");
}, function(){
$("[class*='gp1']").attr("bgcolor","#FFFFFF");
}
);
$("#c2").hover(function(){
$("[class*='gp2']").attr("bgcolor","#0000FF");
}, function(){
$("[class*='gp2']").attr("bgcolor","#FFFFFF");
}
);
$("#c3").hover(function(){
$("[class*='gp3']").attr("bgcolor","#FFFF00");
}, function(){
$("[class*='gp3']").attr("bgcolor","#FFFFFF");
}
);
$("#c4").hover(function(){
$("[class*='gp4']").attr("bgcolor","#00FF00");
}, function(){
$("[class*='gp4']").attr("bgcolor","#FFFFFF");
}
);
$('*[class*="s"]').hover(function(){
var classname=$(this).attr("class");
var colour;
if(classname.match("gp1")){
colour="#FF0000"
}else if(classname.match("gp2")){
colour="#0000FF"
}else if(classname.match("gp3")){
colour="#FFFF00"
}else{
colour="#00FF00"
}
$("[class*=' + classname + ']").attr("bgcolor",colour);
}, function(){
$("[class*=' + classname + ']").attr("bgcolor","#FFFFFF");
}
);
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>Document</title>
<style type="text/css">
<!--
td {font-size: 24px; font-family: Arial, Helvetica, sans-serif; }
-->
</style>
</head>
<body>
<table width="565" height="126" border="1">
<tr>
<td class="s1 gp1">1</td>
<td class="s2 gp2">2</td>
<td class="s3 gp4">3</td>
<td class="s4 gp3">4</td>
</tr>
<tr>
<td class="s5 gp4">5</td>
<td class="s6 gp1">6</td>
<td class="s7 gp2">7</td>
<td class="s8 gp3">8</td>
</tr>
<tr>
<td class="s9 gp3">9</td>
<td class="s10 gp2">10</td>
<td class="s11 gp4">11</td>
<td class="s12 gp1">12</td>
</tr>
<tr>
<td class="s13 gp3">13</td>
<td class="s14 gp4">14</td>
<td class="s15 gp2">15</td>
<td class="s16 gp1">16</td>
</tr>
</table>
<p> </p>
<table width="260" height="64" border="1">
<tr>
<td width="119" height="29" bgcolor="#FF0000" id="c1">Category 1</td>
<td width="125" bgcolor="#0000FF" id="c2">Category 2</td>
</tr>
<tr>
<td height="27" bgcolor="#FFFF00" id="c3">Category 3</td>
<td bgcolor="#00FF00" id="c4">Category 4</td>
</tr>
</table>
<table width="500" height="175" border="1">
<tr>
<td class="s1 gp1">Shop1</td>
<td class="s2 gp2">Shop2</td>
<td class="s3 gp4">Shop3</td>
<td class="s4 gp3">Shop4</td>
</tr>
<tr>
<td class="s5 gp4">Shop5</td>
<td class="s6 gp1">Shop6</td>
<td class="s7 gp2">Shop7</td>
<td class="s8 gp3">Shop8</td>
</tr>
<tr>
<td class="s9 gp3">Shop9</td>
<td class="s10 gp2">Shop10</td>
<td class="s11 gp4">Shop11</td>
<td class="s12 gp1">Shop12</td>
</tr>
<tr>
<td class="s13 gp3">Shop13</td>
<td class="s14 gp4">Shop14</td>
<td class="s15 gp2">Shop15</td>
<td class="s16 gp1">Shop16</td>
</tr>
<tr>
</tr>
</table>
<p> </p>
</body>
</html> |