Question

我有imageMap（存储在table的第一行），我想要做的是，取决于用户使用鼠标悬停的area，在＆＃34;原始＆＃34;正下方显示新图像一个（即table的第二行）。

当我设法让第一个新图像（img1）出现在＆＃34;原版＆＃34;正下方时，但当我悬停在另一个区域时，相关图片（img2）出现在img1旁边，而我想要用img2替换img1。

如何只显示一张图片？

这是我的代码：

<SCRIPT LANGUAGE="javascript">

function showDetails(id) {
var secondRow = document.getElementById("shopTable").rows[1];
var img = document.createElement("img");

switch(id){
case 1: 
    img.src = "pics/helmet.png";
    secondRow.appendChild(img);
break;
case 2:
    img.src = "pics/wheel.png";
    secondRow.appendChild(img);

    default: break;}
    }

</SCRIPT>

和相关的HTML

<table id = "shopTable">
<tr>
   <td><map name="samplemap">
      <area href = "#" coords = "7,140,85,180" shape ="rect"  onMouseOver = "showDetails(1)"></area>
      <area href= "#" coords = "100,140,182,180" shape="rect" onMouseOver="showDetails(2)"></area>
    </map></td>
    <img name = "topHalf" usemap = "#samplemap" src="pics/top_half.png"></img>
    </tr>
    <tr>
        <td></td>
            </tr>
 </table>

Answer 1

每次都要附加一个新元素。您必须删除现有图像。

您可以使用属性innerHTML代替。

secondRow.innerHTML = img;

Answer 2

对不起伙计们......太傻了！我刚刚意识到这是因为我把var img放在函数中，所以我猜每次调用函数时都会创建一个新的img，而不是我在var img之外声明function shwDetails

<SCRIPT LANGUAGE="javascript">
// here is where img should be!
var img = document.createElement("img");

function showDetails(id) {
 var secondRow = document.getElementById("shopTable").rows[1];

 switch(id){
   case 1: 
     img.src = "pics/helmet.png";
     secondRow.appendChild(img);
     break;
   // and so on...
}

一切似乎都很好......

所以这是工作代码：

{{1}}

使用javascript在同一个表格单元格中显示不同的图像

2 个答案: