单击图像地图突出显示行 [英] Clicking Image Map Highlights Row
问题描述
你好，
我有一个细分的图像地图，
细分中的每一块土地都有很多编号。在图像地图下方，我有一张桌子
，其中包含每个批次的详细信息（例如批号，批量，批量价格
$ b $等...）
我真的很喜欢这种方式，所以用户可以点击图像地图和
图像下方的相应行将突出显示。
用户点击一个新行，前一行返回其原始颜色
，新行突出显示。
可能吗？如果是，并且可以有人请指出我正确的方向
如何做到这一点？
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?
推荐答案
吊索blade写道：
你好，
我有一个细分的图像地图，
细分中的每一块土地都有很多编号。在图像地图下方我有一张表格，其中有关于每个地段的详细信息（例如批号，地块尺寸，地块价格等等）
我真的很喜欢这样一种方式，所以用户可以点击图像地图，将突出显示图像下方的相应行。
用户点击一个新行，前一行返回其原始颜色，新行是突出显示。
可能吗？如果它是，并且有人可以请指出我如何做到这一点的正确方向？
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?
这样的事情会对你有用吗？通过在不存在的图像上单击
来尝试此示例。你会很快找到敏感区域。
- 每个要突出显示的表格行需要一个唯一的ID。
- 图像地图区域是可点击的，在图像地图点击事件中使用
正确的行号调用行高亮显示功能。
- 按钮演示函数调用。 />
<！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">
函数更改（n）{
clearallrows（）
document.getElementById（''row''+ n）.style.backgroundC olor =''＃FFAABB'';
}
函数clearallrows（）{
for（var n = 1; n< 5; n ++）{
document.getElementById（' 'row''+ n）.style.backgroundC olor =''＃FFFFFF'';
}
}
< / script> ;
< / head>
< body>
< input type =" button"的onclick = QUOT;改变（1）" value =" 1">
< input type =" button"的onclick = QUOT;变化（2）" value =" 2">
< input type =" button"的onclick = QUOT;变化（3）" value =" 3">
< input type =" button"的onclick = QUOT;变化（4）" value =" 4">
< input type =" button"的onclick = QUOT; clearallrows（）" value =" no highlight">
< p>点击其中一个行星：< / p>
< img src =" planets。 GIF" width =" 245" height =" 226" ALT ="试验" usemap
="＃imagemap">
< map NAME =" imagemap">
< area shape =" ; RECT" COORDS = QUOT; 20,25,84,113"的onclick = QUOT;改变（1）" href ="＃">
< area shape =" polygon" coords =" 90,25,162,26,163,96,89,25,90,24"
onclick =" change（2）" href ="＃">
< area shape =" circle" COORDS = QUOT; 130,114,29"的onclick = QUOT;变化（3）" href ="＃">
< area shape =" rect" COORDS = QUOT; 19156170211"的onclick = QUOT;变化（4）" href ="＃">
< / map
< / MAP>
< table border = 1 align =中心>
< caption>统计< / caption>
< th>年< / th>
< th>团队< / 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
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
mscir写道：
[...]
mscir wrote:
[...]
< map NAME =" imagemap"> ;
< area shape =" rect" COORDS = QUOT; 20,25,84,113"的onclick = QUOT;改变（1）" href ="＃">
<map NAME="imagemap">
<area shape="rect" coords="20,25,84,113" onclick="change(1)" href ="#">
使用空锚导致页面滚动到顶部
点击锚点。要阻止这种情况发生，请让onclick
返回false：
< area ... onclick =" change（1）; return false;" ; href ="＃">
-
Rob
Using an empty anchor causes the page to scroll to the top when
the anchor is clicked. To stop this happening, have the onclick
return false:
<area ... onclick="change(1);return false;" href="#">
--
Rob
太棒了！谢谢，这完全符合我的要求。
谢谢Mike和Rob！
Great! Thanks that is exacty what I needed.
Thank you Mike and Rob!
这篇关于单击图像地图突出显示行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
