使用图像映射时通过 jquery 交换图像答案

【问题标题】：Swapping an image via jquery when using an image map使用图像映射时通过 jquery 交换图像
【发布时间】：2014-10-01 09:58:01
【问题描述】：

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

据我所知，到目前为止没有图像更改，但是图像映射似乎正在工作。

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

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

【问题讨论】：

标签： javascript jquery html image imagemap

【解决方案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

【讨论】：

【解决方案2】：

你的例子应该可以工作，你这里唯一的问题是 jsfiddle 中的设置。

你应该使用“No wrap - in ”而不是“onLoad”

不同之处在于 onLoad 将在页面加载后执行您的脚本，而您将无法调用您的函数 test()。

使用“No wrap - in

”就像在文档的头部添加你的 javascript 源代码，让你从 html 调用函数。

【讨论】：

【解决方案3】：

我建议您使用点击处理程序而不是内联 JavaScript。问题是找不到你的测试函数。

var swapImage = 1;


$('area').on('click', function() {
        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');
        }
});

http://jsfiddle.net/rhess/37/

【讨论】：

【解决方案4】：

这就是你想要的 ;-)

example at jsbin

【讨论】：