Question

我是初学者，正在尝试学习html和javascript，所以请耐心等待。

我有一个问题，我已经被困了一段时间。我的页面上有top图片地图，其中包含3个不同的areas，根据image maps的哪个区域悬停，该地图应显示3个不同的新top。到目前为止，我可以在其中一个area悬停时显示新图像，这里是代码：

<html>
<head>
    <title>Sample Map</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <SCRIPT LANGUAGE="javascript">

var img = document.createElement("img");

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

switch(id){
case 1: 
    img.src = "pics/pic1.png";
    secondRow.appendChild(img); 
    break;
case 2:
    img.src = "pics/pic2.png";
    secondRow.appendChild(img);
    break;
case 3:
    img.src = "pics/pic3.png";
    secondRow.appendChild(img);
    break;      
default: break;}
    }
 </SCRIPT>
</head>
<body>
    <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>
                <area href= "#" coords = "196,140,276,180" shape="rect" onMouseOver="showDetails(3)"></area>

            </map></td>

            <img name = "top" usemap = "#samplemap" src="pics/top.png"></img>
        </tr>
        <tr>
            <td>
                                <!-- here goes my image that should be an imagemap -->
            </td>
        </tr>
    </table>
</body>
</html>

所以现在我在table的第二个单元格中显示图片（pic1, pic2, pic 3），但我想要做的是显示image maps。因此，例如，如果用户悬停在area top的{{1}}上，我想显示使用pic1的图像映射，依此类推。有人可以帮我解决这个问题吗？感谢您分享您的知识！

鼠标悬停在图像地图上以显示另一个图像映射

0 个答案: