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.
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ộtarea
với các thuộc tínhshape="rect"
tức là rectanglecoords="0,0,82,126"
tức là danh sách các tọa độ tạo thànharea
, 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.