Thẻ area! Cách tạo khu vực liên kết trong hình ảnh HTML.

Thẻ area!

Trong Serries tự học HTML chương 2 Myboxst đã liệt kê cho bạn tất cả những thẻ có trong html.

Bây giờ hãy cùng Myboxst thực hành về tác dụng của từng loại thẻ (tag) trong html.

Trong bài viết này chúng ta sẽ tìm hiểu về Thẻ <area>.

Định nghĩa thẻ area

Thẻ area là một thẻ Dùng để xác định khu vực trong một hình ảnh.

Với thẻ này chúng ta có thể tạo ra một bản đồ hình ảnh với nhiều khu vực khác nhau, Những khu vực đó chúng ta có thể hover (click vào).

Bạn cũng có thể xem thẻ này là công cụ dùng để chia phần tử hình ảnh thành những phần tử nhỏ hơn khác.

Một số thuộc tính của thẻ area

Thuộc tính (Attribute)	Giá Trị	Mô Tả
alt	text	Thêm một văn bản thay thế cho khu vực. Bắt buộc nếu có thuộc tính *href*
coords	coordinates	Xác định toạ độ của khu vực
download	filename	Gán tập tinh tải xuống khi click vào khu vực có liên kết
href	URL	Tạo đường dẫn liên kết cho khu vực
hreflang	language_code	Chỉ định ngôn ngữ của đường dẫn điểm cuổi URL
media	media query	Xác định phương tiện / thiết bị mà được cài làm điểm cuối URL
referrerpolicy	no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url	Xác định thông tin liên kết giới thiệu nào sẽ gửi cùng với liên kết
ref	alternate author bookmark help license next nofollow noreferrer prefetch prev search tag	Xác định mối quan hệ giữa tài liệu hiện tại và điểm cuối của URL.
shape	default rect circle poly	Tạo hình dạng cho khu vực
target	_blank _parent _self _top framename	Xác định phương thức mở URL
type	media_type	Xác định loại phương tiện / thiết bị của đường dẫn URL liên kết

Cách tạo khu vực liên kết trong hình ảnh HTML

Thẻ <area> có rất nhiều thuộc tính đi kèm với nó nhưng mình chỉ sử dụng một số thuộc tính cơ bản để ví dụ cho bạn. Những thuộc tính còn lại bạn có thể tự thực hành và test với Texteditor VScode!

Thẻ <area> có cấu trúc như sau:

<area Attribute1="giá trị thuộc tính 1" Attribute2="giá trị thuộc tính 2" AttributeN="giá trị thuộc tính N" >

Ví dụ:

Bậy giờ Myboxst sẽ lấy ví dụ một hình ảnh của người mẫu VN 2018 với thông tin và số đo 3 vòng như hình bên dưới cho mọi người có động lực học ٩(^‿^)۶ !

Việc chúng ta cần làm hiện tại là tạo ra 3 khu vực liên kết với số đo 3 vòng như hình ảnh phía dưới!

Chúng ta sẽ có code như sau:

Đoạn Code HTML

<!DOCTYPE html><html lang="en"><head>    <title>Thẻ area <a></title></head><body><h1>Ví dụ tạo khu vực liên kết trong hình ảnh:</h1><p>Hình hoa hậu VN 2018 ▼</p><img src="https://www.myboxst.com/wp-content/uploads/2022/05/hoahauVN_2018_vidu-1024x796.jpg" width="767" height="596" alt="HOAHAUVN30" usemap="#HHVN30"><map name="HHVN30">    <area shape="rect" coords="87,141,181,182" alt="V1 :87CM" href="https://www.myboxst.com/wp-content/uploads/2022/05/v1_120.197_251.254.png" target="_blank">     <area shape="rect" coords="101,197,237,248" alt="V2 :66CM" href="https://www.myboxst.com/wp-content/uploads/2022/05/v2_139.273_329.344-1.jpg." target="_blank">     <area shape="rect" coords="106,258,215,299" alt="V3 :98CM" href="https://www.myboxst.com/wp-content/uploads/2022/05/v3_148.360_298.417.png" target="_blank"> </map></body></html>

Kết quả hiển thị trên màn hình máy tính
1366×768

Ví dụ tạo khu vực liên kết trong hình ảnh:
Hình hoa hậu VN 2018 ▼

Bạn có thể Copy và past code để test bằng Texteditor online tại đây!

Test Thử Code!

Khi click vào 3 khu vực đã tạo thì trình duyệt sẽ mở 1 tab mới đi đến đường dẫn (URL) đích trong thuộc tính href.

Ví dụ trên Myboxst đã sử dụng:

Giá trị “rect” của thuộc tính shape => Đây là cách tạo khu vực liên kết dưới dạng hình chữ nhật
Khi click vào chúng ta sẽ được đưa đến đường dẫn (URL) đích của 3 khu vực liên kết bằng thuộc tính href.
Giá trị “_blank” của thuộc tính target: Dùng để mở đường dẫn(URL) đích của khu vực liên kết bằng tab mới trên trình duyệt.
Thuộc tính coords có giá trị là “toạ độ điểm đầu,toạ độ điểm cuối” (lưu ý: đây là cách ghi giá trị toạ độ của hình chữ nhật và vình vuông).
Thuộc tính alt (Alternative) để thay thế thông tin văn bản cho các hình ảnh để hỗ trợ cho việc tìm kiếm.

Đối với những khu vực liên kết có dạng khác hình vuông và hình chữ nhật ta sẽ sử dụng giá trị khác của thuộc tính shape như: default,circle,poly….

CSS được cài mặc dịnh cho thẻ <area>

Hầu hết các trình duyệt sẽ hiển thị phần tử <area> với các giá trị CSS mặc định sau:

area {   display:none;}

Hướng dẫn xác định toạ độ điểm đầu và điểm cuối cùa thuộc tính “coords” của thẻ area

Như ở ví dụ trên thì việc xác định toạ độ điểm đầu và điểm cuối của “v1” chúng ta sẽ làm như sau:

Mở hình ảnh cần xác định vùng toạ độ bằng phần mềm “Paint”.
Trỏ con chuột vào vị trí điểm cần xác định toạ độ
toạ độ sẽ hiển thị ở góc trái phía dưới

Toạ độ điểm cuối và những điểm khác như: Tâm hình tròn, 4 điểm của hình tứ giác,….

Bạn làm tương tự để lấy toạ độ!

Cách điền toạ độ vào thuộc tính “coords” cho khu vực liên kết

Khu vực liên kết hình chữ nhật và hình vuông

Cách ghi thuộc tính “shape” và “Coords”:

shape="rect" coords="Ax,Ay,Cx,Cy"

Ax	Ay	Cx	Cy
Toạ độ x điểm đầu	Toạ độ y điểm đầu	Toạ độ x điểm cuối	Toạ độ y điểm cuối

Như ví dụ ở trên với width=”767″ và height=”596″ pixel thì giá trị toạ độ của thuộc tính coords là:

Vòng 1: coords="87,141,181,182".
Và vòng 2: coords="101,197,237,248".
Vòng 3: coords="106,258,215,299".

Với => 2 số đầu là toạ độ điểm đầu => 2 số cuối là toạ độ điểm cuối.

nó so với. dù So với. nó so với. đếnSo với. nó so với. dù So với. nó so với. đếnSo với. So với. nó so với. không So với. nó so với. thế So với. nó so với. vậy So với. nó so với.thì So với. nó so với. nên So với. nó so với. đâu So với. nó so với. dù So với. nó so với. đếnSo với. nó so với. dù So với. nó so với. đếnSo với.

So với. nó so với. không So với. nó so với. thế So với. nó so với. vậy So với. nó so với.thì So với. nó so với. nên So với. nó so với. đâu So với. nó so với. dù So với. nó so với. đếnSo với. nó so với. dù So với. nó so với. đếnSo với.

Khu vực liên kết hình tròn

Cách ghi thuộc tính “shape” và “Coords”:

shape="circle" coords="Ox,Oy,R"

Ox	Oy	R
Toạ độ x của tâm hình tròn O	Toạ độ y của tâm hình tròn O	Bán kính R của hình tròn O

Ví dụ: Hình ảnh bên dưới có width=”767″ và height=”596″ pixel thì giá trị toạ độ của thuộc tính coords là:

coords=”506,215,41″

Kết quả hiển thị trên màn hình máy tính
1366×768

Khu vực liên kết đa giác gồm 4 đỉnh

Cách ghi thuộc tính “poly” và “Coords”:

shape="circle" coords="Ax,Ay,Bx,By,Dx,Dy,Cx,Cy"

Ax	Ay	Bx	By	Dx	Dy	Cx	Cy
Toạ độ x của điểm A	Toạ độ xy của điểm A	Toạ độ x của điểm B	Toạ độ y của điểm B	Toạ độ x của điểm D	Toạ độ y của điểm D	Toạ độ x của điểm C	Toạ độ y của điểm C

Ví dụ: Hình ảnh bên dưới có width=”767″ và height=”596″ pixel thì giá trị toạ độ của thuộc tính coords là:

coords=”256,175,416,215,491,336,201,359″

Kết quả hiển thị trên màn hình máy tính
1366×768

Lời kết

Thẻ <area> trong HTML là một công cụ rất hữu dụng đối với chúng ta trong việc tạo một vũng bản đồ bên trong hình ảnh.

Ngoài ra, khi bạn biết rõ về nó sẽ có ích cho bạn trong việc làm affiliate marketing và MMO. Bằng việc đặt link quảng cáo, affiliate marketing vào một vùng hình ảnh. Vì thế hãy dành chút thời gian của bạn để nắm rõ về thẻ <area>.

Nếu có vấn đề cần giải đáp hãy để lại comment tại phần bình luận bên dưới.

Myboxst sẽ trả lời sớm nhất có thể!

▼ Hãy share bài viết nếu bạn thấy bài viết có ích! Hoặc xem lại khi bạn quên! Chúc bạn thành công!▼

MYBOX3D

Cài Đặt Ngôn Ngữ

Thứ Ba, 24 tháng 5, 2022