我正在嘗試構建一個圖像映射鏈接,將圖像替換爲另一個圖像。這個想法是,用戶可以點擊一個小的定義區域(即「點擊這裏」),圖像將交換到第二個圖像。第二個圖像將有一個小區域表示「上一個」,因此單擊相同的區域將使圖像返回到原始區域。使用圖像映射時通過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');
}
}