map: Dùng để xác định một bản đồ cho hình ảnh,
area: Dùng để xác định vùng nằm bên trong một bản đồ của hình ảnh
2 thẻ này luôn phải được dùng với nhau để tạo ra một bản đồ cho hình ảnh, và được kết nối với hình ảnh bằng 2 thuộc tính,
name=" tên bản đồ ": đặt bên trong thẻ mở của cặp thẻ map
usemap="tên bản đồ": Đặt bên trong thẻ <img>
Giá trị của 2 thuộc tính này phải được đặt trùng tên với nhau
bộ thẻ này gồm các các thẻ như sau:
<map name="ten-map">
<area shape="" coords="" href="" alt="">
</map>
<img src="" alt="" usemap="#ten-map">
Như chúng ta thấy, thẻ area luôn nằm bên trong thẻ map hai cặp thẻ này luôn được đi kèm với nhau không thể tách rời để tạo được bản đồ cho hình ảnh là thẻ img,
tuy nhiên để có thể áp dụng được các vùng map đã chọn để áp dụng lên một hình ảnh, chúng ta có thể liên kết thẻ map với thẻ img lại với nhau bằng thuộc tính ( usemap="Giá trị " ) đặt bên trong thẻ <img>
Ví dụ các vùng này, khi bạn nhấp vào một hình ảnh bên dưới mình tôi đã áp dụng bản đồ và vùng được áp dụng khi nháp chuột vào sẽ chuyển đên một đường dẫn khác , tùy nhiên trong bài này nói về thẻ area thì các bạn nên tìm hiểu về thẻ area và các thuộc tính của nó trước, rồi kế đến các thẻ kế tiếp các bạn sẽ
Ví dụ sau đây mình sẽ đặt map cho bức hình này vào các vùng như: ( 2 bên mắt, mũi,miệng , ) khi các bạn click chuột hiệu ứng phản hồi sẽ được chuyển đến một đường dẫn cho các bạn thấy được hiệu ứng của nó , sẽ cho các bạn thấy hiệu ứng và chức năng của các thẻ mình đã dùng
<map name="the-face">
<area target="blank" shape="circle" coords="117,203,30" href="https://blogger.googleusercontent.com/img/a/AVvXsEicQpBodH9P9ScXFIwer0mK9wIowdiNBWY72i5PXq_-fgi3yNCrEWTq2GqDhnISi3NR79UgFEls478nXJtNtc40Yg4GD0SkxwS79z1s7Su1yllAeTyeWwsXkYa6Ds9I3rLtWDC8LOk153kgBJLGSE6j5GHI3TMEhhP0NI5outtgQnBs2EX3jA3dZeMTIw=w200-h168">
<area target="blank" shape="circle" coords="218,203,30" href="https://blogger.googleusercontent.com/img/a/AVvXsEjDe5qSSFsA4ubsEqZOp7LfPf0c9qa8SqGJXyMvoyb0n-JNvSX9PM5AFN7veO3pvuWaq5vQlSZPyBRTPq8rjn8tFB4t6GZAmGmyABzK3BcTOBII4VER_VmZyWzH8Aq3ypAi-lHqfHnC82zk8fV01c6GgBcq1ptZ223SAEvxpo58G7HVkljlYTgmRRcemA=w200-h141">
<area target="blank" shape="rect" coords="130,250,205,286" href="https://blogger.googleusercontent.com/img/a/AVvXsEj-ifodvE8Glt-Hfcl0ajX1vFGOaf58LU2bqbD7xVlLBtJPMBhRt4MdohGl9l2biMU_r0RpIk0-dfLXEC1KC7sJemVeFqCP7wXqSv2GjnOjLdfui3-HJia0LbOnxv_bLOsh5opjBFxLEPs_LzCNkBVehtvp2fdKpj2-pMTFl3mqljGj5xHxCUaHkVdnDg=w163-h200">
<area target="blank" shape="rect" coords="126,292,210,332" href="https://blogger.googleusercontent.com/img/a/AVvXsEifcKATgPgqiGNEl_VDPUzekUfH9ZZDWxyt0ILS0vqnkw5M_k9lODYPrNhvV0HX0IaRzKAcv5Y1r5eb5NABT1qi5ffJRYYUmUJFFVA5aIzic14m0uYd8JDOWqXd3F5P3b82Fg6apT-q8fcBE7r4mpWJQAwZtuK3xF1x1xCkQphHygYUXIB0PUccq5DwTg=w200-h114">
</map>
<img id="l1" src="https://blogger.googleusercontent.com/img/a/AVvXsEjMHpFoaq2FVcC1QDxazcYNOOzluPwBw98P5GdTIOsQ_OQoo_WMl6-9_Cv0E2LmywuxzZ3mdPO2zUtOdIb42C0QOQ1oaR0jVbiuRkjFUhpoSXAU8pw86K01qEmLlUrvAUvmOCoN3vspOW6KeJgwIJUkVJ-799XdtSVESupG9SWKxZoSNnIAKx8V53vchA=w258-h320" usemap="#the-face" >
<style>
#l1 { width: 340px; height: 420px ; }
</style>
Thuộc tính
href=”URL”:
thuộc tính này dùng để xác định đường dẫn sẽ được chuyển hướng đến một liên kết được chỉ định
target=”giá trị”:
Giá trị: blank, parent, self, top
Thuộc tính anyf có chức năng xác định kiểu mở tab
download:
Xác định chức năng cho phép người dùng tải file về nếu muốn
download=”giá trị”:
Thuộc tính này có chức năng chứa và biểu thị tên file khi người dùng tải về
shape=”Giá trị ”:
Giá trị: default, rect, circle, poly
Thuộc tính này có chức năng xác định hình dạng của vùng đã được chọn.
coords=”giá trị ”:
Vi dự: coords="0,111,122"
Thuộc tính này dùng để xác định vị trí tọa độ đã được đặt.
accesskey: Xác định Ký tự
Giá trị: accesskey="g"
Xác định một phím tắt để truy cập vào một thành phần.
class: Xác định tên cho thẻ để xác định, định dạng style
Ví dụ: class="section"
Dùng để xác định tên gọi để định dạng style
id: Xác định tên thẻ để định dạng style
Ví dụ: id="layout"
Thuộc tính này có chức năng xác định tên cho thẻ để áp dụng định dạng style
dir rtl
ltr dir="rtl"
Xác định hướng văn bản cho các nội dung trong một thành phần.
lang
lang="vi"
Xác định mã ngôn ngữ cho nội dung trong một thành phần.
style
Kiểu định dạng
style="color: red"
Xác định một định dạng cho một thành phần.
tabindex Số tabindex="5"
Xác định thứ tự tab của một thành phần.
title
Ví dụ: Text title="Đây là title"
Thuộc tính này xác định chứa nội dung tiêu đề
xml:lang Mã ngôn ngữ lang="vi" Xác định mã ngôn ngữ cho nội dung trong một thành phần, trong văn bản XHTML.
0 Nhận xét