[英]Change Image on Hover using jQuery and an Image Map
我有一個正在使用圖像映射的圖像。 當根據地圖將鼠標懸停在圖像的一部分上時,我想更改圖像,並且我不確定如何使用jQuery進行此操作。 這是我嘗試的代碼:
HTML:
<div class="img-center">
<img src="img-src_off.jpg" usemap="#Map" class="feature-image" border="0" />
<map name="Map" id="Map">
<area shape="rect" coords="77,461,391,492" href="#" target="_blank"
class="link-1" />
<area shape="rect" coords="557,461,855,490" href="#" target="_blank"
class="link2" />
</map>
</div>
JS:
注意:這是我嘗試過的JS,但拋出了錯誤(錯誤在下面列出),我不知道現在該怎么辦。 如果可以找到沒有問題的代碼,則不必使用此代碼。
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j.preLoadImages("img_src_01.jpg",
"img_src_02.jpg"
);
$j(".link1").hover(function(){
this.src = this.src.replace("_off","_01");
},
function(){
this.src = this.src.replace("_01","_off");
}
);
$j(".link2").hover(function(){
this.src = this.src.replace("_off","_02");
},
function(){
this.src = this.src.replace("_02","_off");
}
);
});
(function(j$) {
var cache = [];
$j.preLoadImages = function() {
var args_len = arguments.length;
for (var i = args_len; i--;) {
var cacheImage = document.createElement('img');
cacheImage.src = arguments[i];
cache.push(cacheImage);
}
}
});
我看到的錯誤如下:
TypeError: this.src is undefined
[Break On This Error]
this.src = this.src.replace("_off","_01");
(this error repeats itself on every hover)
而這個錯誤:
TypeError: $j.preLoadImages is not a function
[Break On This Error]
"img_src_02.jpg"
回答時請提供示例,因為我不太熟練使用Javascript。
要編寫jQuery插件,請在jQuery.fn對象中添加一個新的function屬性,其中該屬性的名稱為您的插件的名稱:
請嘗試以下操作:
(function($j) {
$j.fn.preLoadImages = function() {
//...
}
})(jQuery);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.