Làm cách nào để làm nổi bật các phần của đồ họa trên di chuột?

Question

Tôi cần hiển thị một sơ đồ trang web với khoảng 70 khu vực trong đó. Diện tích của imagemap con trỏ chuột hiện tại được cho là được đánh dấu bằng một màu nhất định.

Điều này có thể và nếu có, làm cách nào?

Answer 1

Sau khi thực sự sử dụng nó trong sản xuất, tôi muốn nói đây là câu trả lời: http://plugins.jquery.com/project/maphilight

Sử dụng điều này phải mất một vài dòng mã để thực hiện tính năng đó cho bất kỳ đồ họa ảo nào.

Answer 2

Có, điều này là có thể. Tôi đã làm điều chính xác với jquery và bản đồ hình ảnh khu vực mouseenter/mouseleave sự kiện, nhưng không phải với 70 khu vực. Nó sẽ chỉ làm việc nhiều hơn cho bạn. Bạn có thể cân nhắc tải các hình ảnh qua các cuộc gọi ajax khi di chuột qua, hoặc sử dụng một sprite và định vị để bạn không cần tải 70 hình ảnh vào trong dom.

jquery:

$(document).ready(function() { 

    $(".map-areas area").mouseenter(function() { 
     var idx = $(".map-areas area").index(this); 
     $(".map-hovers img:eq(" + idx + ")").show(); 
     return false; 
    }).mouseleave(function() { 
     $(".map-hovers img").hide(); 
     return false; 
    }); 

}); 

đâu .map-dềnh là một div đó có tất cả các hình ảnh mà bạn muốn để đặt trên đầu trang của bản đồ của bạn. Bạn có thể định vị chúng nếu cần hoặc làm cho hình ảnh có cùng kích thước với bản đồ hình ảnh, nhưng với độ trong suốt.

Và một số html để làm theo:

Chú ý: Chú ý các dòng hình ảnh chỉ số khu vực bản đồ lên với chỉ số img trong container đồ-dao động? CSONG: Bản đồ hình ảnh phải trỏ đến gif trong suốt và có hình nền được đặt thành hình ảnh thực tế bạn muốn hiển thị. Đây là một điều trình duyệt chéo - không thể nhớ chính xác lý do.

<div id="container"> 
     <img src="/images/trans.gif" width="220" height="238" class="map-trans" alt="Map/Carte" usemap="#region-map" /> 
     <div class="map-hovers"> 
      <img src="/images/map/sunset-country.png" alt="Sunset Country" /> 
      <img src="/images/map/north-of-superior.png" alt="North of Superior" /> 
      <img src="/images/map/algomas-country.png" alt="Algoma's Country" /> 
      <img src="/images/map/ontarios-wilderness.png" alt="Ontario's Wilderness" /> 
      <img src="/images/map/rainbow-country.png" alt="Rainbow Country" /> 
      <img src="/images/map/ontarios-near-north.png" alt="Ontario's Near North" /> 
      <img src="/images/map/muskoka.png" alt="Muskoka" />  
     </div> 
</div> 
    <map name="region-map" id="region-map" class="map-areas"> 
    <area shape="poly" coords="52,19,53,82,36,114,34,126,26,130,5,121,2,110,7,62" href="#d0" alt="Sunset Country" /> 
    <area shape="poly" coords="93,136,93,113,82,112,77,65,57,51,58,82,41,122,33,133,58,138,74,126" href="#d1" alt="North of Superior" /> 
    <area shape="poly" coords="98,112,118,123,131,149,130,165,108,161,97,138" href="#d2" alt="Algoma's Country" /> 
    <area shape="poly" coords="68,2,100,29,124,33,133,74,155,96,159,145,134,146,121,119,101,110,83,107,83,65,55,45,54,16" href="#d3" alt="Ontario's Wilderness" /> 
    <area shape="poly" coords="151,151,152,167,157,176,152,179,137,178,124,172,133,169,135,150" href="#d4" alt="Rainbow Country" /> 
    <area shape="poly" coords="160,150,170,167,169,173,160,171,155,162,153,149" href="#d5" alt="Ontario's Near North" /> 
    <area shape="poly" coords="173,176,162,177,154,184,167,189,178,183" href="#d6" alt="Muskoka" /> 
    </map> 

Answer 3

Tôi không biết nếu có một cách mát mẻ để làm điều đó, nhưng bạn có thể chụp ảnh của bạn như hình nền của một yếu tố ngăn chặn, che phủ nó với một bức tranh minh bạch và bản đồ hình ảnh của bạn và sau đó thay thế trong suốt này . hình dung về một sự kiện mouseover với một hình ảnh khu vực này được nhấn mạnh trong

Mặt khác bạn sẽ cần 70 hình ảnh của khu vực nhấn mạnh

Answer 4

Tôi đã cố gắng sử dụng giải pháp của ScottE nhưng tiếc là điều đó có nghĩa là thêm hình ảnh mục tiêu làm nền nội dung.

Giải pháp của tôi là rất gần gũi với mình, nhưng sử dụng hình ảnh thích hợp

jQuery:

$(document).ready(function() { 

    $(".map-areas area").mouseenter(function() { 
     var idx = $(".map-areas area").index(this); 
     $(".map-hovers img:eq(" + idx + ")").show(); 
     return false; 
    }); 
    $(".map-hovers img").mouseleave(function() { 
     $(".map-hovers img").hide(); 
     return false; 
    }); 

}); 

Các khái niệm then chốt ở đây là rằng một khi bạn vào khu vực bản đồ, bạn hiển thị bản đồ-dao động hình ảnh, mà sau đó trở thành lớp hoạt động của bạn dưới con chuột - Đơn giản chỉ cần phát hiện khi bạn rời khỏi hình ảnh đó là những gì làm cho mịn.

HTML: (gần như giống nhau, không cần hình ảnh xuyên)

<div id="container"> 
     <img src="/images/full-map.png" width="220" height="238" class="map-trans" alt="Map/Carte" usemap="#region-map" /> 
     <div class="map-hovers"> 
      <img src="/images/map/sunset-country.png" alt="Sunset Country" /> 
      <img src="/images/map/north-of-superior.png" alt="North of Superior" /> 
      <img src="/images/map/algomas-country.png" alt="Algoma's Country" /> 
      <img src="/images/map/ontarios-wilderness.png" alt="Ontario's Wilderness" /> 
      <img src="/images/map/rainbow-country.png" alt="Rainbow Country" /> 
      <img src="/images/map/ontarios-near-north.png" alt="Ontario's Near North" /> 
      <img src="/images/map/muskoka.png" alt="Muskoka" />  
     </div> 
</div> 
    <map name="region-map" id="region-map" class="map-areas"> 
    <area shape="poly" coords="52,19,53,82,36,114,34,126,26,130,5,121,2,110,7,62" href="#d0" alt="Sunset Country" /> 
    <area shape="poly" coords="93,136,93,113,82,112,77,65,57,51,58,82,41,122,33,133,58,138,74,126" href="#d1" alt="North of Superior" /> 
    <area shape="poly" coords="98,112,118,123,131,149,130,165,108,161,97,138" href="#d2" alt="Algoma's Country" /> 
    <area shape="poly" coords="68,2,100,29,124,33,133,74,155,96,159,145,134,146,121,119,101,110,83,107,83,65,55,45,54,16" href="#d3" alt="Ontario's Wilderness" /> 
    <area shape="poly" coords="151,151,152,167,157,176,152,179,137,178,124,172,133,169,135,150" href="#d4" alt="Rainbow Country" /> 
    <area shape="poly" coords="160,150,170,167,169,173,160,171,155,162,153,149" href="#d5" alt="Ontario's Near North" /> 
    <area shape="poly" coords="173,176,162,177,154,184,167,189,178,183" href="#d6" alt="Muskoka" /> 
    </map>