0
我有一個圖像映射並希望添加一個jQuery懸停。基本上整個圖像將被替換爲一個新的,基於圖像映射。懸停在圖像的某些部分應導致完全替換圖像。在映射區域的鼠標移出時,它將翻轉回映像圖。它可以很好地用javascript做imageflip,但我想將其更改爲jQuery,以便擁有關於fadeIn
的控制權以及類似這樣的內容。它在jQuery中似乎更容易。jQuery懸停在圖像映射上不起作用
這是我得到的。
<html>
<head>
<!-- LINK ZU JQUERY ONLINE-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
//PRELOAD THE IMAGES
original = new Image(698, 360);
original.src = "imagenes_png/bosque_mapa.png";
azul = new Image(698, 360)
azul.src = "imagenes_png/azul_mouse.png";
verde = new Image(698, 360)
verde.src = "imagenes_png/verde_mouse.png";
//jQUERY HOVER
$(document).ready(function(){
$("#verdeA").hover(function() {
$(this).attr("src" , "verde.src");
}, function() {
$(this).attr("src" , "original.src");
$("#azulA").hover(function() {
$(this).attr("src" , "azul.src");
}, function() {
$(this).attr("src" , "original.src");
});
});
});
</script>
<body>
<!-- INSERT THE PICTURE -->
<img name="bosque" id="bosque" src="imagenes_png/bosque_mapa.png" width="698" height="360" border="0" usemap="#bosque_m" alt="Bosque con animales" />
<map name="bosque_m" id="bosque_m">
<area id="verdeA" shape="poly" coords="643,324,646,322,648,321,651,320,654,320,656,321,658,323,659,324,660,327,659,330,657,332,655,334,654,335,654,332,653,329,653,327,650,326,648,328,648,331,649,332,650,334,652,335,654,337,656,338,658,339,660,341,662,342,662,345,661,348,660,350,657,351,656,351,656,346,656,345,653,347,651,350,650,351,651,353,651,354,653,356,656,356,658,356,660,356,662,356,666,354,668,351,669,349,670,347,669,346,665,346,666,342,667,341,668,340,670,339,672,339,674,341,676,344,676,347,675,351,672,355,670,357,669,360,642,360,644,356,646,353,647,350,648,346,650,340,650,337,646,332,645,330,644,327,643,324"
alt="" />
<area id="azulA" shape="poly" coords="472,249,476,249,479,250,483,251,484,255,485,258,487,261,489,263,493,265,498,266,501,268,504,270,504,271,499,270,495,269,489,268,486,269,484,270,480,269,476,268,473,266,470,262,469,260,468,256,470,253,472,249"
alt="" />
</map>
</body>
</html>
首先我預裝了imageflip工作沒有延遲的圖像。然後,我根據imagemap中的id刪除jQuery函數,然後添加預加載中分配的圖片的名稱。
Buut,它根本不起作用。什麼都沒有發生。
哪裏錯了嗎?
這使得我的映射無味的區域。無論鼠標位於何處,鼠標懸停在圖像上都會改變圖像。它不再尊重映射區域。我把'$(this).attr(「src」,「verde.src」);'改成'$(「#bosque」)。attr(「src」,verde.src);' '$(「#verdeA」)。hover(function(){'(當然,我改變了兩個函數,當鼠標進入圖像時出現azul圖像) – Maccaroni 2014-10-16 18:25:15
也許我不夠清楚 - 只是編輯了我的評論,包括我的意思和演示圖像,以顯示我得到的結果 – myersjustinc 2014-10-16 18:46:22
非常感謝!真棒小剪輯:)它現在就像一個魅力! 問題不是你不夠清楚。我改變了它,就像你一樣。問題爲什麼它不工作的是' bosque。把'id'改成別的東西,它就起作用了。 – Maccaroni 2014-10-16 19:34:58