Trong bài này mình sẽ hướng dẫn cách sử dụng thẻ img trong HTML để tạo hình ảnh, giúp trang web trở nên sinh động hơn.
Kết hợp thẻ map để gán link vào một vị trí nhỏ trong hình
Giả sử bạn có một hình ảnh vệ tinh và trong hình có một góc nhỏ là ảnh mặt trời. Bạn muốn khi click vào góc nhỏ mặt trời trong hình đó thì sẽ chuyển tới hình full về mặt trời, cách làm như ví dụ dưới đây.
Demo RUN
Giải thích:
- Trong thẻ img có một thuộc tính là usemap="#planetmap" có ý nghĩa là chỉ định map được apply vào hình này, vì giá trị của nó là #planemap nên nó sẽ lấy thẻ map có name="planemap".
- Trong thẻ map có định nghĩa một area với các thuộc tính
- shape="rect" tức là rectangle
- coords="0,0,82,126" tức là danh sách các tọa độ tạo thành area, lấy hình ảnh trên kia làm tiêu chuẩn để đo và được tính bằng pixel.
- alt="sun" là khi hover chuột vào vị trí có tọa độ trên thì sẽ hiển thị title này
- //freetuts.net/upload/tut_post/images/2014/08/14/123/sun.gif là link khi click vào area này thì chuyển đến.
4. Lời kết
Trong bài mình đã giới thiệu cách sử dụng thẻ img để tạo hình ảnh đơn giản trong HTML, và mình có giới thiệu một số cách sư dụng thẻ img kết hợp với các thẻ khác như thẻ a, thẻ map để làm những chức năng khá hữu ích. Thực tế khi các bạn làm thì phải kết hợp với CSS nữa thì giao diện mới đẹp và hiệu ứng mới bắt mắt.