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

我正在尝试构建一个图像映射链接，将图像替换为另一个图像。这个想法是，用户可以点击一个小的定义区域（即“点击这里”），图像将交换到第二个图像。第二个图像将有一个小区域表示“上一个”，因此单击相同的区域将使图像返回到原始区域。使用图像映射时通过jquery交换图像

这是据我所知，到目前为止没有图像变化，但它看起来像图像映射工作。

任何人都可以弄清楚如何让这个工作正常吗？

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

来源

2014-10-01 Joseph

究竟它的工作原理。在jsfiddle中，你会得到js错误，因为在js小提琴中找不到测试函数。如果您将js代码放在下面的html部分的script标记中，则可以看到它正在工作。在配置的jsfiddle -

<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

Alternativelly，您可以使用 “在无包装”。你可以看到演示该

Demo No Wrap

来源

2014-10-01 10:06:40

我建议你使用一个单击处理程序，而不是内嵌的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/

来源

2014-10-01 10:02:54

你的例子应该工作，你在这里唯一的问题是在的jsfiddle的settigns。

你应该用“不循环 - 在<头>”，而不是“的onLoad”

不同的是，将的onLoad在页面加载后执行脚本，你会不会有一种方式来调用函数测试（）。

使用“无包装< head>”就像在文档的头部添加您的javascript源代码并让您从html调用函数。

来源

2014-10-01 10:04:18 Kesty

这就是你想要;-)

example at jsbin

来源