Tạo liên kết hình ảnh và bản đồ hình ảnh

• Tháng Tư 28, 2024

Câu trả lời tuần này là để trả lời câu hỏi của độc giả - Bạn có thể giải thích cách tạo liên kết hình ảnh đến một trang trong HTML. Có một vài kỹ thuật khác nhau mà bạn có thể sử dụng cho các hình ảnh được liên kết. Một là liên kết toàn bộ hình ảnh với HTML của bạn và hai là tạo bản đồ hình ảnh - nơi các phần khác nhau của cùng một hình ảnh được liên kết với các vị trí khác nhau.

Hình ảnh được liên kết trong HTML

Liên kết một hình ảnh hoặc biểu tượng nhỏ rất đơn giản, tất cả những gì bạn phải làm là đặt liên kết hình ảnh của bạn trong siêu liên kết như vậy:



Tất cả những gì tôi làm ở đây là kèm theo hình ảnh trong html cho liên kết. Đây là cách dễ nhất và hiệu quả nhất để liên kết một hình ảnh nhỏ và thường được thực hiện với các viên đạn tùy chỉnh, biểu tượng, v.v. Nhưng, nếu bạn muốn một hình ảnh lớn liên kết đến nhiều nơi khác nhau thì sao? Đây là nơi cắt ảnh có ích.

Cắt ảnh trong Photoshop

Điều này rất dễ dàng để đạt được trong Photoshop. Bạn nên sử dụng một hình ảnh không quá phức tạp, bởi vì bạn muốn người dùng của bạn có thể thấy nơi nhấp vào hình ảnh rõ ràng. Bạn cũng muốn đảm bảo người dùng của bạn hiểu rằng họ cần nhấp vào trong hình ảnh để đến nơi họ sẽ đến. Phát triển bản đồ hình ảnh cẩn thận với người dùng của bạn trong tâm trí. Hãy nhớ rằng bản đồ hình ảnh thường không thân thiện với công cụ tìm kiếm như văn bản trên một trang, tuy nhiên việc sử dụng thẻ alt trong các lát ảnh của bạn có thể giúp ích cho việc này.

Khi hình ảnh của bạn được tạo, bước tiếp theo là cắt lát hình ảnh của bạn. Biểu tượng công cụ cắt lát trông giống như một con dao chính xác. Nó ở gần đầu thanh công cụ và nằm bên dưới công cụ cắt - nếu bạn nhấp vào biểu tượng cắt xén, thì các công cụ chọn lát và lát sẽ xuất hiện.

Chọn công cụ lát, giữ phím chuột trái của bạn xuống và cẩn thận kéo lát ở nơi bạn muốn và sau đó nhả. Di chuyển và tiếp tục cắt toàn bộ hình ảnh. Cần có một lát cắt xung quanh mỗi khu vực của hình ảnh bạn muốn liên kết đến một trang khác. Bất kỳ khu vực lớn màu trắng có thể là một lát.

Sau khi hình ảnh của bạn được cắt hoàn toàn, bước tiếp theo là sử dụng công cụ chọn lát cắt của lát cắt, nhấp vào từng lát cắt và từ đó chọn loại lát cắt hình ảnh hình ảnh. Bên dưới điền vào url nơi bạn muốn lát này trực tiếp theo sau là trường thẻ alt ở phía dưới. Các trường khác không cần thiết cho ánh xạ hình ảnh đơn giản. Di chuyển qua từng lát theo cách tương tự cho đến khi toàn bộ hình ảnh được ánh xạ.

Khi toàn bộ hình ảnh của bạn hoàn tất, bạn sẽ sử dụng tùy chọn lưu lưu cho web và thiết bị. Nếu bạn nhấp vào Tệp File trên đầu và nhìn xuống bên dưới các tùy chọn lưu thông thường, bạn sẽ thấy tùy chọn lưu cho web và thiết bị. Chọn tùy chọn này và một hộp thoại sẽ mở ra nơi bạn có thể xem trước hình ảnh của mình sẽ như thế nào. Nếu bạn hài lòng với nó, nhấn nút lưu và một hộp thoại khác mở ra. Hãy chắc chắn rằng tùy chọn thứ hai nói rằng, lưu hình ảnh và HTML HTML, sau đó lưu công việc của bạn.

Chuyển đến thư mục của bạn nơi bạn đã lưu tài liệu HTML và mở nó. Bạn có thể sao chép và dán mã này vào tệp HTML của riêng bạn. Thông thường HTML này sẽ hơi cẩu thả. Nếu bạn thành thạo HTML, bạn có thể làm sạch nó theo ý thích của mình, nhưng nó sẽ hoạt động tốt như hiện tại. Hãy chắc chắn, như mọi khi, các tệp hình ảnh của bạn, vv nằm ở vị trí chính xác nếu không hình ảnh của bạn sẽ không hiển thị.

Video HướNg DẫN: Học lập trình Web A-Z - HTML - Bài 2 - danh sách, liên kết, hình ảnh và bản đồ liên kết. (Tháng Tư 2024).