Hướng dẫn make an image a clickable link html - tạo một hình ảnh thành một liên kết có thể nhấp vào html

Chúng tôi sẽ có một cái nhìn thân thiện với người mới bắt đầu về cách tạo liên kết hình ảnh trên trang web của bạn.

Chúng tôi sẽ xem xét các thẻ HTML nào bạn cần sử dụng trong mã.

Nếu bạn chưa bao giờ làm điều này trước đây, đừng lo lắng! Tôi sẽ hướng dẫn bạn trong toàn bộ quá trình.

Đến cuối bài viết này, bạn sẽ tạo liên kết hình ảnh trên tất cả các trang web của bạn và Internet.

Chúng tôi cũng sẽ xem xét một số kỹ thuật nâng cao hơn vào cuối bài viết nếu bạn cảm thấy dũng cảm.

Lấy một ly cà phê, chúng ta hãy lao vào!

• Làm thế nào để bạn tạo một siêu liên kết?
• Làm thế nào để bạn tạo một hình ảnh trong HTML?
• Hình ảnh như một liên kết
• Hình ảnh và văn bản như một liên kết
• Liên kết hình ảnh và thuộc tính ALT
• Kỹ thuật nâng cao: Hình ảnh làm liên kết sử dụng CSS
• Kỹ thuật nâng cao: Sử dụng nút
• Kỹ thuật nâng cao: Bản đồ hình ảnh
• Sử dụng hình ảnh liên kết trong HTML

Làm thế nào để bạn tạo một siêu liên kết?

Làm thế nào để bạn tạo một hình ảnh trong HTML?

Hình ảnh như một liên kết

Hình ảnh và văn bản như một liên kết

<a href="...">
    My Great Link
</a>

Liên kết hình ảnh và thuộc tính ALT

<a href="...">
    My Great Link
</a>

Để nhận liên kết trên trang chủ của bạn, bạn cần tạo một siêu liên kết. Để làm điều này trong HTML, bạn cần sử dụng thẻ

<a href="...">
    My Great Link
</a>

<a href="...">
    My Great Link
</a>

<a href="...">
    My Great Link
</a>

Đây là một ví dụ:

<a href="https://pagedart.com">
  My Great Link
</a>

Ở trên, bạn có thể thấy rằng thẻ mở:

Tạo sự khởi đầu của siêu liên kết. Sau đó, chúng tôi đóng thẻ bằng:

Làm thế nào để bạn tạo một hình ảnh trong HTML?

Hình ảnh như một liên kết

Hình ảnh và văn bản như một liên kết

Liên kết hình ảnh và thuộc tính ALT

<img src="/favicon-32x32.png">

Để nhận liên kết trên trang chủ của bạn, bạn cần tạo một siêu liên kết. Để làm điều này trong HTML, bạn cần sử dụng thẻ

<a href="...">
    My Great Link
</a>

<a href="...">
    My Great Link
</a>

Đây là một ví dụ:

Hãy xem xét một ví dụ tiếp theo.

Hình ảnh như một liên kết

Để biến hình ảnh thành một liên kết, bạn cần thêm thẻ

<a href="...">
    My Great Link
</a>

<a href="...">
    My Great Link
</a>

<a href="https://pagedart.com">
  <img src="/favicon-32x32.png">
</a>

Điều này sẽ tạo ra HTML này:

Bằng cách thêm thẻ

<a href="...">
    My Great Link
</a>

<a href="...">
    My Great Link
</a>

Nếu bạn đang sử dụng WordPress thì bạn có thể thêm mã HTML này vào trang của mình bằng chế độ xem văn bản trong trình chỉnh sửa trang.

Bạn cũng có thể thêm văn bản và hình ảnh bên trong liên kết, chúng ta hãy xem xét này.

Hình ảnh và văn bản như một liên kết

Ví dụ trên cho thấy cách chỉ thêm một hình ảnh làm liên kết.

Điều gì sẽ xảy ra nếu chúng ta muốn thêm cả hình ảnh và văn bản vào một liên kết.

Chà, trong trường hợp này, chúng tôi cần đảm bảo rằng chúng tôi thêm văn bản trước khi đóng thẻ

<a href="...">
    My Great Link
</a>

<a href="https://pagedart.com">
  <img src="/favicon-32x32.png">
  PageDart Home 
</a>

Ở những điều trên, chúng tôi đã thêm vào nhà của Pagedart Home bên trong thẻ

<a href="...">
    My Great Link
</a>

<a href="...">
    My Great Link
</a>

Có thêm một thuộc tính trên thẻ

<a href="...">
    My Great Link
</a>

Đó là thuộc tính

<a href="https://pagedart.com">
  My Great Link
</a>

Liên kết hình ảnh và thuộc tính ALT

Hình ảnh trên Internet nên có thuộc tính

<a href="https://pagedart.com">
  My Great Link
</a>

Người đọc màn hình sử dụng văn bản ALT để giúp người dùng khiếm thị. Người đọc màn hình sẽ đọc mô tả văn bản khi tìm thấy một hình ảnh.

Để làm điều này, chúng tôi thêm một thuộc tính

<a href="https://pagedart.com">
  My Great Link
</a>

<a href="...">
    My Great Link
</a>

<a href="https://pagedart.com">
  <img alt="PageDart.com" src="/favicon-32x32.png">
</a>

Bây giờ khi người đọc màn hình đọc hình ảnh này, nó sẽ nói tiếng rầm rộ.

Điều quan trọng là phải làm theo các thực tiễn tốt nhất khi viết văn bản ALT hình ảnh.

Hãy chắc chắn rằng bạn nghĩ về người đang sử dụng đầu đọc màn hình. Viết mô tả văn bản alt của bạn cho chúng và mô tả hình ảnh tốt nhất có thể.

Đây là tất cả những gì bạn cần để tạo hình ảnh liên kết trong HTML. Tuy nhiên, có một vài kỹ thuật nâng cao hơn mà bạn có thể sử dụng. Nếu bạn đang cảm thấy dũng cảm, chúng tôi sẽ nhìn vào những điều này tiếp theo.

Kỹ thuật nâng cao: Hình ảnh làm liên kết sử dụng CSS

Một kỹ thuật nâng cao hơn là sử dụng CSS. CSS là viết tắt của bảng kiểu xếp tầng và nó cho phép bạn thay đổi cách trang HTML trông như thế nào.

Với CSS, bạn có thể đặt một hình ảnh nền trên một phần tử như thẻ

<a href="...">
    My Great Link
</a>

Ở đây chúng tôi sẽ có HTML trông như thế này:

<style>
  a {
    background-image: url("/favicon-32x32.png");
    display: block;
    height:32px;
    width:32px;
  }
</style>
<a href="https://pagedart.com"></a>

Vì vậy, lần này không có gì bên trong thẻ

<a href="...">
    My Great Link
</a>

Chúng ta có thể sử dụng một kỹ thuật tương tự với thẻ

<img src="/favicon-32x32.png">

Kỹ thuật nâng cao: Sử dụng nút

Trong ví dụ này, chúng tôi sẽ sử dụng thẻ

<img src="/favicon-32x32.png">

<a href="...">
    My Great Link
</a>

Chúng ta có thể tạo đầu ra giống như ví dụ trên bằng cách sử dụng HTML này:

<style>
  .link {
    background-image: url("/favicon-32x32.png");
    border: 0;
    height:32px;
    width:32px;
  }
</style>
<script>
  function goHome() {
    return window.open("https://pagedart.com", "_blank")
  }
</script>
<input type="button" class="link" onclick="goHome()"/>

Điều này tạo ra đầu ra này:

Ở đây chúng tôi đang sử dụng JavaScript để mở một tab trình duyệt mới. Gửi người dùng đến trang chủ của Pagedart.

Tôi không biết tại sao bạn sẽ làm điều này! Nhưng, tôi muốn cho bạn thấy những gì có thể và mức độ linh hoạt của HTML, CSS và JavaScript.

Ví dụ cuối cùng tôi sẽ hiển thị là sử dụng bản đồ hình ảnh.

Kỹ thuật nâng cao: Bản đồ hình ảnh

Bản đồ hình ảnh là hình ảnh đơn với các khu vực có thể nhấp. Họ đã mất đi sự nổi tiếng trong những năm qua nhưng họ vẫn là một phần của đặc tả HTML5. Điều này có nghĩa là các trình duyệt như Internet Explorer, Chrome và Safari sẽ hỗ trợ họ.

Biểu đồ là những ví dụ tốt về các bản đồ hình ảnh như biểu đồ tổ chức, như thế này:

Sau đó, để biến mỗi khu vực màu hồng thành một liên kết có thể nhấp, chúng tôi sẽ tạo ra một

<img src="/favicon-32x32.png">

<img src="org.png" alt="Staff Organisation Chart" usemap="#Map">

<map name="Map" id="Map">
	<area
		shape="rect"
		coords="176,14,323,58"
		href="…"
		alt="Chairman"
	>
  <area 
    shape="rect" 
    coords="81,75,226,114" 
    href="…"
    alt="Secretary"
  >
  <area 
    shape="rect" 
    coords="6,138,155,182" 
    href="…"
    alt="Marketing Director"
  >
  <area 
    shape="rect"
    coords="175,138,323,182"
    href="…"
    alt="Sales Director"
  >
  <area
    shape="rect" 
    coords="345,136,496,186" 
    href="…"
    alt="Finance Director"
  >
</map>

Chúng tôi đã thêm thuộc tính

<img src="/favicon-32x32.png">

<a href="...">
    My Great Link
</a>

Sau đó, trong thẻ

<img src="/favicon-32x32.png">

<a href="https://pagedart.com">
  <img src="/favicon-32x32.png">
</a>

Sử dụng hình ảnh liên kết trong HTML

Chúng tôi đã xem năm cách khác nhau để thêm hình ảnh làm liên kết trên trang web của bạn:

1. Một hình ảnh như một liên kết
2. Hình ảnh và văn bản như một liên kết
3. Sử dụng CSS để đặt hình ảnh làm liên kết
4. Sử dụng một nút làm liên kết
5. Sử dụng bản đồ hình ảnh

Tất cả những điều này có thể biến hình ảnh thành các liên kết. Bây giờ bạn nên tự tin để tự mình thử điều này.

Chúng tôi cũng đã xem xét khả năng truy cập và cách đặt văn bản alt để giúp người khiếm thị.