javascript - 使用图像映射时通过 jquery 交换图像

Question

我正在尝试构建一个图像映射链接，将图像换成另一个图像。这个想法是，用户可以单击一个小的定义区域(即“单击此处”)，图像将交换为第二个图像。第二张图片将有一个小区域，上面写着“上一张”，因此单击同一区域将使图片返回到原始图片。

据我所知，到目前为止图像没有变化，但图像映射似乎可以正常工作。

谁能弄清楚如何让它正常工作？

html:

<div id="picture_here">
    <img src="https://www.google.com.au/images/srpr/logo11w.png" id="picture"  usemap="#imageMap"/>
</div>

<map name="imageMap">
    <area shape="rect" coords="0,0,100,100"  href="JavaScript: test(); void(0);">
</map>

Javascript:

var swapImage = 1;


function test(){
        if (swapImage == 1){
            swapImage = 2;
            $('#picture').attr('src', 'https://s1.yimg.com/rz/d/yahoo_frontpage_en-AU_s_f_p_bestfit_frontpage_2x.png');
        }else if (swapImage == 2){
            swapImage = 1;
            $('#picture').attr('src', 'https://www.google.com.au/images/srpr/logo11w.png');
        }
}

参见 JSFIDDLE

Answer 1

实际上它是有效的。在 jsfiddle 中，你会收到 js 错误，因为在 js fiddle 中找不到测试函数。如果您将 js 代码放在 html 部分的 script 标记中，如下所示，您可以看到它正在运行。

<div id="picture_here">
    <img src="https://www.google.com.au/images/srpr/logo11w.png" id="picture"  usemap="#imageMap"/>
</div>

<map name="imageMap">
    <area shape="rect" coords="0,0,100,100"  href="JavaScript: test(); void(0);">
</map>
    <script>
    var swapImage = 1;


function test(){
        if (swapImage == 1){
            swapImage = 2;
            $('#picture').attr('src', 'https://s1.yimg.com/rz/d/yahoo_frontpage_en-AU_s_f_p_bestfit_frontpage_2x.png');
        }else if (swapImage == 2){
            swapImage = 1;
            $('#picture').attr('src', 'https://www.google.com.au/images/srpr/logo11w.png');
        }
}    
    </script>

Demo

或者，您可以在 jsfiddle 中使用“No wrap - in”配置。你可以看到那个演示

Demo No Wrap