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

Question

我有一个imageMap(存储在表的第一行)，我想做的是，取决于哪个区域用户将鼠标悬停在“原始”图像的正下方(即 table 的第二行)显示新图像。

当我设法让第一张新图片 (img1) 出现在“原始图片”的正下方时，但是当我将鼠标悬停在另一个区域时，相关图片 (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;