如何通過鼠標懸停在另一個映射圖像區域來顯示小圖像和段落？

這將更好地解釋我想要比我的文字更好： http://jquery-image-map.ssdtutorials.com/ 即使教程可用，但它是在photoshop中使用圖像疊加完成的。但我使用jquery插件「jquery.maphilight.js」突出顯示了我的映射圖像。使用我有一個映射的圖像，並突出顯示映射的部分，如果我將鼠標懸停在圖像上。如果某人將鼠標懸停在特定房間（映射部分）上，我如何顯示小圖片和段落。如何通過鼠標懸停在另一個映射圖像區域來顯示小圖像和段落？

這裏是JavaScript：

$(function() { 
     $(".mapping").maphilight(); 
     $("#mapping").css('visibility','hidden') 

    $(".hoverable").css("border", "3px solid red");

&這是圖像映射的HTML：

<div class="mapping"> 
<map name="gmap"> 
<area shape="poly" id="cr1" coords="550,277,485,342,533,385,597,322" href="#" alt="cr1" name="room-1"> 
<area shape="poly" id="cr2"coords="579,246,627,200,672,246,624,290" href="#" alt="cr2" name="room-2">

來源

2012-12-20 Faizan

使用jQuery mouseover事件。

您可以將其附加到文檔準備好的「區域」標籤上。

$(document).ready(function(){ 
    //this selector is selecting an element by the id of cr1. 
    $('#cr1').on('mouseover', function(){ 
     //do your showing here 
    }); 

    $('#cr1').on('mouseleave', function(){ 
     //do your hiding here 
    }); 
});

一個通用的處理程序，你可以這樣做：

$(document).ready(function(){ 
    //this is an attribute selector. 
    //'area' is the typ of tag to match 
    //[name indicates the attribute is named 'name' 
    //^= indicates the attribute 'name' should start with the value following this operator 
    //'room'] think of this as indicating the value of the name attribute 
    // should match: 'room*' 
    $('area[name^="room"]').on('mouseover', function(){ 
     //do your showing here, be sure to show only 
     //for the appropriate area. Maybe select on the id. 
    }); 

    $('area[name^="room"]').on('mouseleave', function(){ 
     //do your hiding here. This could be generic unless you have 
     //a multi-paragrah area instead of a single display area. 
    }); 
});

來源

2012-12-20 16:46:50

感謝您的代碼，但我有點新的jQuery的。我不知道如何將它附加到區域標籤。只是提到區域標記的id似乎並不奏效。在「你在這裏顯示」我試圖加載使用圖像，但它不工作。你能否詳細介紹一下如何爲單個房間做到這一點？ Registers – Faizan

在我看來，jQuery選擇器可能會非常混亂。 –

$（'area [name^=「room」]'）這個語句中的「房間」是什麼，類或id是什麼？ – Faizan

這裏是我做過什麼，使其工作：我創建了「鼠標懸停」和格「鼠標離開」屬性。在它裏面，我收到了當我將鼠標懸停在這個div上時我想要出現的另一個元素的id。

<div 
    onmouseover="document.getElementById('div1').style.display = 'block';" <!-- element inside brackets will be shown--> 
    onmouseout="document.getElementById('div1').style.display = 'none';"> 
<area shape="poly" id="cr1" class="jTip" coords="550,277,485,342,533,385,597,322" 
href="car_park_1.html" alt="cr1" name="room-1"> 
</div>

我貼我自己的答案，這樣也可以幫助別人做同樣的任務:)

來源

2012-12-21 11:53:16 Faizan

如何通過鼠標懸停在另一個映射圖像區域來顯示小圖像和段落？

回答

相關問題