Cách tạo một cái bản đồ ảnh trong HTML

– Bản đồ ảnh hoàn toàn có thể tạm hiểu là một loại hình ảnh đặc biệt quan trọng, trên tấm hình sẽ có các vùng được xác lập, mỗi vùng đó được gán với một cái link . – Ví dụ : Tấm hình bên trái chính là một cái bản đồ ảnh, trên tấm hình có bốn vùng : Vùng mắt trái được gán liên kết đến trang HTML. Vùng mắt phải được gán liên kết đến trang CSS. Vùng mũi được gán liên kết đến trang JavaScript. Vùng miệng được gán liên kết đến trang MySQL. ⛔ Các bạn hãy thử nhấp vào từng vùng để thưởng thức .

1) Các thành phần cấu tạo nên bản đồ ảnh

– Thông thường thì một cái bản đồ ảnh được tạo nên bởi hai thành phần:

• Thành phần thứ nhất chính là tấm hình mà các bạn muốn dùng nó để làm bản đồ ảnh.
• Thành phần thứ hai là một cái bản đồ hệ thống tọa độ (chứa các vùng được xác định)

	+		=
Tấm hình		Bản đồ hệ thống tọa độ		Bản đồ ảnh

2) Cách tạo một cái bản đồ ảnh

2.1) Tạo bản đồ hệ thống tọa độ

– Để tạo một cái bản đồ hệ thống tọa độ thì chúng ta cần phải sử dụng thẻ

– Trong đó :

• Thẻ
  
• Thẻ
  dùng để xác định một vùng trên bản đồ hệ thống tọa độ.

Ví dụ :
– Đoạn mã bên dưới được dùng để tạo một cái bản đồ mạng lưới hệ thống tọa độ có tên là the-face, bên trong cái bản đồ mạng lưới hệ thống tọa độ này có bốn vùng :

• Vùng 1 (mắt trái) có dạng hình tròn, được liên kết đến trang tài liệu học HTML.
• Vùng 2 (mắt phải) có dạng hình tròn, được liên kết đến trang tài liệu học CSS.
• Vùng 3 (mũi) có dạng hình chữ nhật, được liên kết đến trang tài liệu học JavaScript.
• Vùng 4 (miệng) có dạng hình chữ nhật, được liên kết đến trang tài liệu học MySQL.

2.2) Kết hợp tấm hình & bản đồ hệ thống tọa độ

– Sau khi đã tạo xong một cái bản đồ hệ thống tọa độ thì công việc tiếp theo đó chính là sử dụng thẻ để chèn tấm hình mà mình muốn dùng nó để làm bản ảnh vào trang web. Bên trong thẻ , ta thiết lập thêm thuộc tính usemap với cú pháp usemap=”#tên bản đồ hệ thống tọa độ” để gán những vùng được xác định lên tấm hình, từ đó tạo thành bản đồ ảnh.

Ví dụ :

Xem ví dụ

3) Các thuộc tính được sử dụng bên trong thẻ

– Dưới đây là danh sách những thuộc tính được sử dụng bên trong thẻ

( các bạn sung sướng bấm vào hình để tìm hiểu và khám phá chi tiết cụ thể cách sử dụng của từng thuộc tính )

4) Cách xác định một vùng trên bản đồ ảnh

4.1) Vùng hình vuông (chữ nhật)

– Đối với vùng hình vuông vắn, thuộc tính coords phải nhận một giá trị gồm bốn tham số :

Ví dụ :
– Với một tấm hình dùng làm bản đồ ảnh có size 200×200 như bên dưới :

– Nếu tôi thiết lập thuộc tính shape=”rect” và coords=”50,25,150,100″ cho phần tử

Xem ví dụ

4.2) Vùng hình tròn

– Đối với vùng hình tròn trụ, thuộc tính coords phải nhận một giá trị gồm ba tham số :

Ví dụ :
– Với một tấm hình dùng làm bản đồ ảnh có size 200×200 như bên dưới :

– Nếu tôi thiết lập thuộc tính shape=”circle” và coords=”150,100,25″ cho phần tử

Xem ví dụ

4.3) Vùng hình đa giác

– Để xác định giá trị của thuộc tính coords đối với một vùng “hình đa giác” thì chúng ta thực hiện lần lượt các bước như sau:

• Bước 1: Xác định số đỉnh của hình đa giác & vị trí của các đỉnh.
• Bước 2: Xác định hướng đi của các đỉnh để tạo thành một vùng khép kín.
• Bước 3: Xác định tọa độ của từng đỉnh.

( cách xác lập tọa độ của một đỉnh cũng giống như cách xác lập tâm của hình tròn trụ )

• Bước 4: Ghép tọa độ của các đỉnh lại thành giá trị của thuộc tính coords.

Ví dụ :

– Để tạo một vùng ” hình đa giác ” màu đen trên tấm hình có kích cỡ 400×400 giống như phía trên thì tất cả chúng ta triển khai lần lượt các bước sau :
– Bước 1 : Xác định số đỉnh của hình đa giác và vị trí của các đỉnh .

– Bước 2 : Xác định hướng đi của các đỉnh để tạo thành một vùng khép kín .

– Bước 3 : Xác định tọa độ của các đỉnh .

– Bước 4 : Ghép tọa độ của các đỉnh lại thành giá trị của thuộc tính coords .
( thứ tự ghép các đỉnh sẽ là : đỉnh một => đỉnh hai => đỉnh ba => đỉnh bốn => đỉnh một )

– Kết luận : giá trị của thuộc tính coords sẽ là : 100,50,275,100,250,300,50,350,100,50
Xem ví dụ

– Thuộc tính href dùng để xác lập đường dẫn đến tài liệu mà người dùng sẽ được chuyển đến khi họ nhấp vào vùng .
– Cú pháp :

href="URL"

Ví dụ :
– Khi người dùng nhấp vào cái miệng thì họ sẽ được chuyển đến trang tài liệu học CSS

Xem ví dụ

– Thuộc tính target dùng để xác lập nơi mà tài liệu sẽ được mở lên khi người dùng nhấp vào vùng .
– Cú pháp :

target="nơi mở tài liệu"

– Trong đó, nơi mở tài liệu hoàn toàn có thể được xác lập dựa theo một trong bốn loại giá trị :

Ví dụ :
– Khi người dùng nhấp vào cái miệng thì trang tài liệu học CSS sẽ được mở lên trong một Tab mới .

Xem ví dụ

– Thuộc tính tải về dùng để thiết lập việc :
” khi người dùng nhấp vào vùng thì cái tài liệu được gán với link của vùng đó sẽ tự động hóa được tải xuống ”
Ví dụ :
– Khi người dùng nhấp vào cái miệng thì tập tin hello.txt sẽ tự động hóa được tải xuống .

Xem ví dụ

– Thuộc tính title dùng để xác lập tiêu đề của vùng .
( khi người dùng chuyển dời con trỏ lên vùng thì tiêu đề sẽ được hiện lên )

– Cú pháp :

title="tiêu đề của vùng"

Ví dụ :

Xem ví dụ

– Thuộc tính shape dùng để xác lập hình dạng của vùng, nó hoàn toàn có thể nhận một trong bốn giá trị sau đây :

– Thuộc tính coords dùng để xác định một tập hợp các tọa độ tạo nên vùng.

– Lưu ý : Tùy vào hình dạng của vùng mà cách xác lập tọa độ sẽ khác nhau .
Ví dụ :
– Bốn tọa độ 126 292 210 332 tạo nên vùng cái miệng .

Xem ví dụ

Source: https://bem2.vn
Category: Ứng dụng hay