HTML - Liên kết Hình ảnh

Chúng tôi đã biết cách tạo liên kết siêu văn bản bằng văn bản và chúng tôi cũng đã học cách sử dụng hình ảnh trong các trang web của mình. Bây giờ, chúng ta sẽ học cách sử dụng hình ảnh để tạo siêu liên kết.

Thí dụ

Thật đơn giản để sử dụng một hình ảnh làm siêu liên kết. Chúng ta chỉ cần sử dụng một hình ảnh bên trong siêu liên kết tại vị trí của văn bản như hình dưới đây -

<!DOCTYPE html>
<html>

   <head>
      <title>Image Hyperlink Example</title>
   </head>
	
   <body>
      <p>Click following link</p>
      <a href = "https://www.tutorialspoint.com" target = "_self"> 
         <img src = "/images/logo.png" alt = "Tutorials Point" border = "0"/> 
      </a>
   </body>
	
</html>

Điều này sẽ tạo ra kết quả sau, nơi bạn có thể nhấp vào hình ảnh để truy cập trang chủ của Tutorials Point.

Đây là cách đơn giản nhất để tạo siêu liên kết bằng hình ảnh. Tiếp theo, chúng ta sẽ xem cách chúng ta có thể tạo Liên kết Hình ảnh Nhạy cảm với Chuột.

Hình ảnh nhạy cảm với chuột

Các tiêu chuẩn HTML và XHTML cung cấp một tính năng cho phép bạn nhúng nhiều liên kết khác nhau vào bên trong một hình ảnh. Bạn có thể tạo các liên kết khác nhau trên một hình ảnh dựa trên các tọa độ khác nhau có sẵn trên hình ảnh. Khi các liên kết khác nhau được gắn vào các tọa độ khác nhau, chúng ta có thể nhấp vào các phần khác nhau của hình ảnh để mở tài liệu đích. Những hình ảnh nhạy cảm với chuột như vậy được gọi là bản đồ hình ảnh.

Có hai cách để tạo bản đồ hình ảnh -

Server-side image maps - Điều này được kích hoạt bởi ismap thuộc tính của thẻ <img> và yêu cầu quyền truy cập vào máy chủ và các ứng dụng xử lý bản đồ hình ảnh có liên quan.
Client-side image maps - Cái này được tạo bằng usemap thuộc tính của thẻ <img>, cùng với các thẻ <map> và <areosystem tương ứng.

Bản đồ hình ảnh phía máy chủ

Ở đây, bạn chỉ cần đặt hình ảnh của mình bên trong một liên kết siêu và sử dụng ismapthuộc tính làm cho nó trở thành hình ảnh đặc biệt và khi người dùng nhấp vào một số vị trí trong hình ảnh, trình duyệt sẽ chuyển tọa độ của con trỏ chuột cùng với URL được chỉ định trong thẻ <a> tới máy chủ web. Máy chủ sử dụng tọa độ con trỏ chuột để xác định tài liệu nào cần gửi lại cho trình duyệt.

Khi ismap được sử dụng, thuộc tính href của thẻ chứa <a> phải chứa URL của ứng dụng máy chủ như cgi hoặc tập lệnh PHP, v.v. để xử lý yêu cầu đến dựa trên tọa độ đã chuyển.

Tọa độ của vị trí chuột là pixel màn hình được tính từ góc trên bên trái của hình ảnh, bắt đầu bằng (0,0). Các tọa độ, trước dấu chấm hỏi, được thêm vào cuối URL.

Ví dụ: nếu người dùng nhấp vào 20 pixel trên và 30 pixel xuống từ góc trên bên trái của hình ảnh sau:

Đoạn mã sau được tạo bởi đoạn mã sau -

<!DOCTYPE html>
<html>

   <head>
      <title>ISMAP Hyperlink Example</title>
   </head>
	
   <body>
      <p>Click following link</p>
      
      <a href = "/cgi-bin/ismap.cgi" target = "_self"> 
         <img ismap src = "/images/logo.png" alt = "Tutorials Point" border = "0"/> 
      </a>
   </body>
	
</html>

Sau đó, trình duyệt sẽ gửi các tham số tìm kiếm sau đến máy chủ web có thể được xử lý bằng ismap.cgi script hoặc map file và bạn có thể liên kết bất kỳ tài liệu nào bạn thích với các tọa độ này -

/cgi-bin/ismap.cgi?20,30

Bằng cách này, bạn có thể gán các liên kết khác nhau cho các tọa độ khác nhau của hình ảnh và khi các tọa độ đó được nhấp vào, bạn có thể mở tài liệu được liên kết tương ứng. Để tìm hiểu thêm vềismap, bạn có thể kiểm tra Cách sử dụng Bản đồ hình ảnh?

Note- Bạn sẽ học lập trình CGI khi bạn học lập trình Perl. Bạn có thể viết tập lệnh của mình để xử lý các tọa độ được truyền này bằng PHP hoặc bất kỳ tập lệnh nào khác. Bây giờ, hãy tập trung vào việc học HTML và sau này bạn có thể truy cập lại phần này.

Bản đồ hình ảnh phía máy khách

Bản đồ hình ảnh phía máy khách được kích hoạt bởi usemap thuộc tính của thẻ <img /> và được xác định bằng các thẻ tiện ích mở rộng <map> và <areosystem đặc biệt.

Hình ảnh sẽ tạo thành bản đồ được chèn vào trang bằng thẻ <img /> như một hình ảnh bình thường, ngoại trừ nó mang một thuộc tính bổ sung được gọi là usemap. Giá trị của thuộc tính usemap là giá trị sẽ được sử dụng trong thẻ <map> để liên kết các thẻ bản đồ và hình ảnh. Thẻ <map> cùng với thẻ <areosystem xác định tất cả các tọa độ hình ảnh và các liên kết tương ứng.

Thẻ <areosystem bên trong thẻ bản đồ, chỉ định hình dạng và tọa độ để xác định ranh giới của từng điểm phát sóng có thể nhấp có sẵn trên hình ảnh. Đây là một ví dụ từ bản đồ hình ảnh -

<!DOCTYPE html>
<html>

   <head>
      <title>USEMAP Hyperlink Example</title>
   </head>
	
   <body>
      <p>Search and click the hotspot</p>
      <img src = /images/html.gif alt = "HTML Map" border = "0" usemap = "#html"/>
      <!-- Create  Mappings -->
      
      <map name = "html">
         <area shape = "circle" coords = "80,80,20" 
            href = "/css/index.htm" alt = "CSS Link" target = "_self" />
         
         <area shape = "rect" coords = "5,5,40,40" alt = "jQuery Link" 
            href = "/jquery/index.htm" target = "_self" />
      </map>
   </body>
   
</html>

Điều này sẽ tạo ra kết quả sau:

Hệ tọa độ

Giá trị thực tế của coords hoàn toàn phụ thuộc vào hình dạng được đề cập. Dưới đây là bản tóm tắt, sau đó là các ví dụ chi tiết -

rect = x₁ , y₁ , x₂ , y₂

x ₁ và y ₁ là tọa độ của góc trên bên trái của hình chữ nhật; x ₂ và y ₂ là tọa độ của góc dưới bên phải.
circle = x_c , y_c , radius

x _c và y _c là tọa độ của tâm đường tròn và bán kính là bán kính của đường tròn. Một vòng tròn có tâm là 200,50 với bán kính 25 sẽ có thuộc tính coords = "200,50,25"
poly = x₁ , y₁ , x₂ , y₂ , x₃ , y₃ , ... x_n , y_n

Các cặp xy khác nhau xác định các đỉnh (điểm) của đa giác, với một "đường thẳng" được vẽ từ điểm này đến điểm tiếp theo. Một đa giác hình thoi với điểm trên cùng là 20,20 và 40 pixel ở các điểm rộng nhất của nó sẽ có các thuộc tính coords = "20,20,40,40,20,60,0,40" .

Tất cả các tọa độ đều liên quan đến góc trên bên trái của hình ảnh (0,0). Mỗi hình dạng có một URL liên quan. Bạn có thể sử dụng bất kỳ phần mềm hình ảnh nào để biết tọa độ của các vị trí khác nhau.