Cấp bậc tác giả:

HTML

Hướng dẫn sử dụng map và area trong HTML Responsive

Được viết bởi webmaster ngày 15/04/2017 lúc 10:34 PM
Trường hợp các bạn muốn làm một map, với nhiều địa điểm trên bản đồ, sau khi thực hiện được, vướng mắc gặp phải là co giãn trên nhiều thiết bị di động không được. Tọa độ bị sai lệch đi rõ rệt.
  • 0
  • 642

Hướng dẫn sử dụng map và area trong HTML Responsive

loading...

Trường hợp các bạn muốn làm một map, với nhiều địa điểm trên bản đồ, sau khi thực hiện được, vướng mắc gặp phải là co giãn trên nhiều thiết bị di động không được. Tọa độ bị sai lệch đi rõ rệt.
Vậy khắc phục bằng cách gì?
B1: Đầu tiên tại thẻ head cho thẻ meta sau:
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1">
Để cho nó cho phép co giãn trên các thiết bị di động
B2: Chèn tiếp code sau để cho ảnh full màn hình
<style>

img[usemap] {
border: none;
height: auto;
max-width: 100%;
width: auto;
}
</style>
B3: Trong thẻ body, thiết lập hiển thị như sau
<img src="./test_files/gtdt2.png" usemap="#Map" alt="">
<map name="Map" id="Map">
<area shape="poly" coords="166, 102, 395, 102, 396, 1, 166, 1" href="/nganhdien.aspx" target="_blank">
  <area shape="poly" coords="684, 89, 1011, 90, 1012, 223, 684, 222" href="/nganhtudonghoa.aspx" target="_blank">
  <area shape="poly" coords="681, 277, 936, 278, 935, 408, 682, 408" href="/nganhcokhi.aspx" target="_blank">
  <area shape="poly" coords="517, 421, 796, 421, 798, 560, 516, 559" href="/nganhoto.aspx" target="_blank">
  <area shape="poly" coords="0, 305, 249, 306, 249, 459, 2, 458" href="/nganhxaydung.aspx" target="_blank">
  <area shape="poly" coords="2, 154, 232, 156, 231, 283, 3, 283" href="/nganhmoitruong.aspx" target="_blank">
  
</map>
B4: Thêm các đoạn Script sau
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="http://dst.udn.vn/Scripts/imageMapResizer.min.js"></script>
<script type="text/javascript">

$('map').imageMapResize();

</script>

Nguồn bài viết: DOTNET.VN

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML