Tôi có thể thêm một khu vực bản đồ hình ảnh bên trong một thẻ <a> không?

Question

Làm cách nào để thêm <area> vào trong một thẻ <a> bên trong bản đồ hình ảnh <map> và Firefox vẫn hiển thị bản đồ hình ảnh?

Nếu im làm điều này:

<img usemap="#progress" src="http://yourmillionpixels.com/wp-content/uploads/2015/09/progress-bar-with-goals-20.png" width="482" height="817"/> 

<map name="progress"> 
    <a href="http://yourmillionpixels.com/wp-content/uploads/2015/07/20000-goal.jpg"> 
    <area shape="rect" coords="152,648,308,673" target="_self"/></a> 
</map> 

Firefox sẽ bỏ qua toàn bộ <map>, Chrome tuy nhiên sẽ không. Tôi có thể làm cho nó để Friefox không bỏ qua nó?

Tôi đang sử dụng một plugin cho Wordpress để khi một thẻ <a> được sử dụng nó sẽ mở ra mà hình ảnh như một cửa sổ pop-up thay vì tải hình ảnh trong cửa sổ hiện

Answer 1

Đã cho tôi một lát nhưng tôi hiểu rồi.

Cảm ơn Gaurav Rai cho gợi ý,

tôi phải gọi một kịch bản trong href trong các yếu tố area: href="javascript:getAnchor();"

sau đó tạo ra một neo <a> thẻ với một id. tôi là 20000Anchor

sau đó tạo ra một kịch bản mà được neo id 20000Anchor và kích hoạt nó bằng cách nhấp chuột()

<img usemap="#progress" src="http://yourmillionpixels.com/wp-content/uploads/2015/09/progress-bar-with-goals-20.png" width="482" height="817"/> 

<map name="progress"> 
    <area href="javascript:getAnchor();" shape="rect" coords="152,648,308,673" target="_self"/></a> 
</map> 

<a href="http://yourmillionpixels.com/wp-content/uploads/2015/07/20000-goal.jpg" id="20000Anchor"></a> 

<script> 
    function getAnchor(){ 
     document.getElementById("20000Anchor").click(); 
    } 
</script> 

Các neo <a> yếu tố/hộp đèn bây giờ có thể được sử dụng với bản đồ hình ảnh và sẽ làm việc với Chrome và Firefox

Answer 2

By HTML của bạn tôi đoán bạn là cố gắng tạo vùng có thể nhấp và chuyển hướng người dùng đến trang cụ thể. Bạn không thể làm điều này bằng thẻ neo. Đối với điều này, bạn cần phải gọi một hàm javascript, và trong chức năng đó bạn có thể chuyển hướng dễ dàng.

<img usemap="#progress" src="http://yourmillionpixels.com/wp-content/uploads/2015/09/progress-bar-with-goals-20.png" width="482" height="817"/> 

<map name="progress"> 
    <area style="cursor:pointer;" onClick="redirect('http://yourmillionpixels.com/uploads/2015/07/50000goal.png');" shape="rect" coords="152,648,308,673" target="_self"/> 
</map> 

<script> 

function redirect(u) 
{ 
    window.location.href=u; 
} 
</script>