onclick 图像部分图像应该改变答案

【问题标题】：onclick image part the image should changeonclick 图像部分图像应该改变
【发布时间】：2016-02-22 19:56:11
【问题描述】：

我写了一个有图像的代码。如果我将鼠标悬停在图像的不同部分，则会出现不同的图像。我还编写了一个脚本来更改图像 onclick。但它不起作用。

<img src="ch01ch01.png" width="453" id="image1" height="453" alt="Planets" usemap="#plmap">
<map name="plmap">
    <area shape="poly" coords="172,227,181,224,183,213,189,201,195,193,199,190,199,184,126,93,135,93,123,79,103,96,84,117,68,140,58,162,51,186,48,201,47,214,135,219,130,227,148,227,147,225,151,227,149,223,153,227,153,221,156,225,157,214,160,202,166,190,174,179,176,177,174,174,191,176,192,192,189,189,180,200,174,212,172,224,172,227" id="chapter12" alt="chap12" width="453" height="453"
         onmouseover="document.getElementById('image1').src='ch01ch12.png'" 
         onmouseout="document.getElementById('image1').src='ch01ch01.png'" onclick="changeImage()"/>
    <area shape="poly" coords="173,229,181,229,184,243,192,256,201,265,201,271,179,309,174,302,125,375,106,361,88,342,71,319,59,295,52,270,48,252,47,243,65,240,61,248,147,234,147,236,150,234,150,238,154,234,154,239,156,235,159,246,165,262,175,275,185,284,195,270,184,259,177,249,174,237,173,229" alt="chap11" width="453" height="453"
         onmouseover="document.getElementById('image1').src='ch01ch11.png'" 
         onmouseout="document.getElementById('image1').src='ch01ch01.png'"/>

<script>
    function changeImage() {
        var temp = document.getElementById('image1');
        temp.src="ch01ch12.png";
    }
</script>

【问题讨论】：

标签： javascript html web frontend

【解决方案1】：

您不能使用像 C:/image.png 这样的本地路径，因为它不是可识别的 URI 方案。而是将 html 或 js 文件与图像放在同一文件夹中，src 将是这样的src="image.png"

【讨论】：

你的图片和html或js在哪里？我尝试了您的代码，它适用于我放置的一些图像。
jsfiddle.net/geradrum/mrus7LLp 可以，你能告诉我你把这些文件放在哪个文件夹里吗？
我把它们放在同一个文件夹中
复制这个小提琴里面的代码并替换到你的文件jsfiddle.net/geradrum/mr9z3vyq
鼠标移入和移出时会发生变化。不是点击。我正在尝试多次使用一个图像映射。这个想法是你有一张带有图像映射的图片。您单击一个区域（图像地图上有一个突出显示），您会得到几个链接，您按下一个，然后图片就会改变。新图片使用与原始图片相同的图像映射（仅图像中的颜色发生变化）。