使用圖像映射時通過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

來源