Thẻ hình ảnh CSS đáp ứng - Kiểu bản đồ hình ảnh

Tôi đã làm việc trên trang web đáp ứng và đã gặp phải một chút vấn đề với Bản đồ hình ảnh. Có vẻ như Bản đồ hình ảnh không hoạt động với các tọa độ dựa trên phần trăm. Sau một chút googling tôi tìm thấy một cách giải quyết JS - http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html. Tuy nhiên tôi muốn trang web hoạt động với JS bị vô hiệu hóa.Thẻ hình ảnh CSS đáp ứng - Kiểu bản đồ hình ảnh

Vì vậy, sau khi hết các khả năng đó, tôi quyết định xem xét sử dụng các thẻ Anchor tương đối định vị trên các hình ảnh để thực hiện tương tự. Đây là một lựa chọn tốt hơn dù sao IMO. Tôi đã cố gắng để đặt các thẻ neo trên hình ảnh với tỷ lệ phần trăm dựa trên vị trí và kích thước, nhưng bất cứ khi nào tôi rescale trình duyệt các thẻ neo di chuyển không cân xứng với hình ảnh.

HTML:

<div id="block"> 
    <div> 
    <img src="http://www.wpclipart.com/toys/blocks/abc_blocks.png"> 
    </div> 
    <a href="#" class="one"></a> 
    <a href="#" class="two"></a> 
</div>

CSS:

#block img { 
    max-width: 100%; 
    display: inline-block; 
} 

a.one{ 
    height:28%; 
    width:19%; 
    top:-36%; 
    left:1%; 
    position:relative; 
    display:block; 
} 
a.two{ 
    height:28%; 
    width:19%; 
    top:37%; 
    left:36%; 
    position:absolute; 
}

Dưới đây là một jsFiddle để mô tả những gì tôi có nghĩa là - http://jsfiddle.net/wAf3b/10/. Khi tôi thay đổi kích thước hộp HTML mọi thứ trở nên sai lệch.

Bất kỳ giúp nhiều đánh giá cao.

Nguồn

2012-11-21 kabatwa

thử với lề trái và lề trên thay vì trên cùng và bên trái. –

Bạn có một vài vấn đề với CSS của mình trong fiddle mà bạn đã đăng (cũng như thiếu thẻ đóng div). Sau khi đảm bảo rằng #block có vị trí tương đối, không cao 100% và neo của bạn bị chặn/hoàn toàn được định vị, tôi có thể lấy các thẻ để di chuyển với các khối.

Đây là fiddle Cập nhật:

http://jsfiddle.net/wAf3b/24/

CSS

html, body { 
    height: 100%; 
} 

#block{ float:left; width:100%; max-width: 400px; position: relative; } 

#content{ 
    height: 100%; 
    min-height: 100%; 
} 

#block img { 
    max-width: 100%; 
    display: inline-block; 
} 

a.one{ height:28%; width:25%; position: absolute; top:55%; left:5%; display:block; background:rgba(0,255,0,0.5);} 
a.two{ height:28%; width:25%; position: absolute; top:60%; left:70%; display: block; background:rgba(255,0,0,0.5);}

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> 
    <title>Bulky Waste</title> 
</head> 
<body> 
    <div id="content"> 
     <div id="block"> 
      <div> 
       <img src="http://www.wpclipart.com/toys/blocks/abc_blocks.png"> 
      </div> 
      <a href="#" class="one"></a> 
      <a href="#" class="two"></a> 
     </div> 
    </div><!--/content--> 
</body> 
</html>

Một thi quan trọng ng lưu ý với html mới là việc sử dụng DOCTYPE. Vì một số lý do, một số trình duyệt không thích nó khi nó không được viết hoa.

Nguồn

2012-11-21 19:29:25 Kyle

http://stackoverflow.com/questions/7020961/uppercase-or-lowercase-doctype – Jawad

@Jawad Cảm ơn bạn đã liên kết. Cá nhân tôi đã nghĩ rằng tuyên bố DOCTYPE cũng không phân biệt chữ hoa chữ thường, nhưng có một vấn đề khoảng một năm trước đã được cố định bằng cách tận dụng nó. – Kyle

Thời gian thay đổi như thế nào? Nó chỉ là một vài năm trở lại tất cả mọi thứ đã được xảo quyệt html và thích XHTML. Bây giờ mọi người đã trở lại toa xe của cú pháp HTML5. – Jawad

Các phần tử được định vị hoàn toàn không còn là một phần của bố cục, vì vậy chúng không thể kế thừa các thuộc tính chiều tương đối từ cha mẹ của chúng. Bạn sẽ cần JavaScript để làm những gì bạn muốn.

Những người tắt JS mong đợi trải nghiệm đã bị suy thoái.

Nguồn

2012-11-21 19:05:42

Thẻ hình ảnh CSS đáp ứng - Kiểu bản đồ hình ảnh

Trả lời

Các vấn đề liên quan