sling blade wrote:
Hello,
I have an image map of a subdivision and each section of land in the
subdivision has a lot number on it. Below the image map I have a table
with details about each lot (eg Lot Number, Lot Size, Lot Price
ect...)
I would really like a way so the user can click on the image map and
the corresponding row below the image will be highlighted.
The user clicks on a new row and the previous row goes back to its
original color and the new row is highlighted.
Is the possible? If it is and can someone please point me in the right
direction on how you would do this?
Will something like this work for you? Try this example by clicking
around on the nonexistent image. You'll find the sensitive areas pretty
quickly.
- Each table row that will be highlighted needs a unique ID.
- Imagemap areas are clickable, call the row highlight function with the
correct row number in the imagemap click event.
- The buttons demonstrate the function calls.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<script type="text/javascript">
function change(n){
clearallrows()
document.getElementById('row'+n).style.backgroundC olor='#FFAABB';
}
function clearallrows(){
for (var n=1;n<5;n++){
document.getElementById('row'+n).style.backgroundC olor='#FFFFFF';
}
}
</script>
</head>
<body>
<input type="button" onclick="change(1)" value="1">
<input type="button" onclick="change(2)" value="2">
<input type="button" onclick="change(3)" value="3">
<input type="button" onclick="change(4)" value="4">
<input type="button" onclick="clearallrows()" value="no highlights">
<p>Click on one of the planets:</p>
<img src ="planets.gif" width ="245" height ="226" alt="test" usemap
="#imagemap">
<map NAME="imagemap">
<area shape="rect" coords="20,25,84,113" onclick="change(1)" href ="#">
<area shape="polygon" coords="90,25,162,26,163,96,89,25,90,24"
onclick="change(2)" href ="#">
<area shape="circle" coords="130,114,29" onclick="change(3)" href ="#">
<area shape="rect" coords="19,156,170,211" onclick="change(4)" href ="#">
</map
</MAP>
<table border=1 align=center>
<caption>Statistics</caption>
<th>Year</th>
<th>Team</th>
<tr id='row1'>
<td align=right>1930</td>
<td align=right>Detroit</td>
</tr>
<tr id='row2'>
<td align=right>1933</td>
<td align=right>Detroit</td>
</tr>
<tr id='row3'>
<td align=right>1934</td>
<td align=right>Detroit</td>
</tr>
<tr id='row4'>
<td align=right>1935</td>
<td align=right>Detroit</td>
</tr>
</table>
</body>
</html>
Mike
