Hầu hết tất cả mọi người đều biết làm sao để thêm một liên kết vào hình ảnh chỉ với một vài dòng code html dễ dàng này.

Nhưng liệu bạn có biết làm thế nào để thêm nhiều liên kết vào những khu vực khác nhau trên cùng một bức ảnh hay chưa? Việc thêm nhiều liên kết vào ảnh giúp kết nối trực tiếp đến các mục trong ảnh.

Ví dụ bạn có một hình ảnh của những diễn viên nổi tiếng sau và bạn muốn tìm thông tin của mỗi người bằng cách click vào hình của người đó trong bức ảnh đó. Việc làm này giúp cho bạn tiết kiệm rất nhiều thời gian và tăng trải ngiệm khi sử dụng của người dùng.

Marria Ozawa Yuhico Yamada

Việc này thực ra cũng cực kỳ đơn giản, không cần bạn phải có kiến thức chuyên sâu gì về HTML hay Javascript JQuery. Việc bạn cần là làm theo những hướng dẫn cơ bạn sau.

Bước 1: Chuẩn bị một bức hình với mục đích riêng của bạn, mình sẽ chọn hình 3 diễn viên ở trên nhé.

Bước 2: Code vài dòng HTML thuần túy cơ bản để gắn các liên kết vào trong hình trên.

Bước 3: Tận hưởng thành quả. Các bạn click vào hình 3 em xinh đẹp ở trên nhé :))), có video thì xem xong rồi quay lại đọc tiếp cũng không sao nha.

Nào, cùng giải thích một tí về nhưng dòng code trên.

Thuộc tính usemap=”#image-map” ở thể IMG sẽ liên kết với name=”image-map” ở thể MAP, đừng quên dấu # nhé.

Chức năng của thẻ <map> và thẻ <area> trong HTML
– Thẻ <map> dùng để xác định một bản đồ (trong hình ảnh ở thẻ img).
– Thẻ <map> có một thuộc tính duy nhất là thuộc tính name, nó dùng để xác định tên của bản đồ.
– Thẻ <area> dùng để xác định “một vùng” trong bản đồ.
– Thẻ <area> phải được đặt bên trong phần tử <map>.
– Thẻ <area> không có thẻ đóng.

Các thuộc tính của thẻ <area>

href Xác định đường dẫn đến tài liệu mà bạn muốn khi người dùng nhấp vào vùng thì sẽ được chuyển đến tài liệu đó
target Xác định nơi mà tài liệu liên kết của vùng sẽ được mở
download Xác định việc khi người dùng bấm vào vùng có chứa liên kết thì tài liệu của liên kết đó sẽ tự động được tải về
title Xác định một “tiêu đề” cho vùng, khi người dùng di chuyển chuột vào trong vùng thì tiêu đề sẽ được hiện lên.
shape Xác định hình dạng của vùng
coords Xác định một tập hợp các tọa độ của vùng

(Các tọa độ này sẽ xác định nên vị trí của vùng)

 

Thuộc tính href
– Thuộc tính href dùng để xác định đường dẫn đến tài liệu mà bạn muốn khi người dùng nhấp vào vùng thì sẽ được chuyển đến tài liệu đó.
– Lưu ý: “Đường dẫn đến tài liệu” có thể là đường dẫn tương đối hoặc đường dẫn tuyệt đối.

Thuộc tính target
– Thuộc tính target dùng để xác định nơi mà tài liệu liên kết của vùng sẽ được mở.
– Thuộc tính target có bốn giá trị cơ bản:

_blank Mở tài liệu trong một tab mới
_self Mở tài liệu trong khung hiện tại
_parent Mở tài liệu trong khung cha của khung hiện tại
_top Mở tài liệu trong tab hiện tại

 

Thuộc tính download
– Thuộc tính download xác định việc khi người dùng bấm vào vùng có chứa liên kết thì tài liệu của liên kết đó sẽ tự động được tải về.

Thuộc tính title
– Thuộc tính title dùng để xác định một “tiêu đề” cho vùng, khi người dùng di chuyển chuột vào trong vùng thì tiêu đề sẽ được hiện lên.

Thuộc tính shape
– Thuộc tính shape dùng để xác định hình dạng của vùng.
– Thuộc tính shape có bốn giá trị cơ bản:

default: Hình dạng của vùng sẽ là toàn bộ tấm hình
rect: Vùng sẽ có dạng hình chữ nhật (hoặc vuông)
circle: Vùng sẽ có dạng hình tròn
poly : Vùng sẽ có dạng hình đa giác

Thuộc tính coords
– Thuộc tính coords dùng để xác định một tập hợp các tọa độ của vùng (Các tọa độ này sẽ xác định nên vị trí của vùng).
– Tùy vào hình dạng của vùng mà cách xác định tọa độ sẽ khác nhau

 

Bonus: Một cách đơn giản hơn nữa là bạn có thể truy cập vào trang https://www.image-map.net, sau đó tải hình lên rồi sử dụng các tính năng có trên website để thao tác, sau đó sao chép code về bỏ vào website của mình. Không phải đau đầu suy nghĩ, cũng ko nên cố gắng tạo lại cái bánh xe để làm gì.

Nếu các bạn có bất kỳ thắc mắc hoặc góp ý xin vui lòng để lại bình luận bên dưới nhé!

Cảm ơn các bạn!

Nhớ ghi nguồn https://susudev.com khi đăng tải lại bài viết này