hiển thị một hình nhỏ mà khi click vào hình này thì một hình lớn hơn

Một hình nhỏ mà khi click vào hình này thì một hình lớn hơn của nó hiện ra. Những gì bạn nhìn thấy trên trình duyệt của bạn như hình ảnh, âm thanh, ký tự … khi bạn lướt web thật ra nó được lưu trữ ở đâu đấy trên các webserver. Chúng được liên kết với nhau thông qua những siêu liên kết (hyperlink), được tải về máy của bạn và hiển thị trên trình duyệt.

Trước hết, để hiển thị một hình ảnh, trong HTML hình ảnh này phải để trong tag <img>

Nếu bạn có liên kết đến hình ảnh. Ví dụ: http://vantnb.violet.vn/uploads/resources/blog/1438/hp23_500.jpg để hiện thị bạn phải đặt nó nắm trong tag <img> như sau:

<img src="http://vantnb.violet.vn/uploads/resources/blog/1438/hp23_500.jpg" />

Không giống các tag khác, tag <img> không có tag đóng vì vậy người ta thêm dấu / ở cuối.
Src (source): là liên kết đến hình ảnh. Hình ảnh là những file có phần mở rộng .jpg, .bmp, .gif,…
Tag <img> còn một số thuộc tính khác.
<img border="0" width="100" height="100" alt="Tên hình ảnh hoặc tên của liên kết thay thế" src=”http://vantnb.violet.vn/uploads/resources/blog/1438/hp23_500.jpg” />

Border: dòng kẻ bao quanh hình.

Width và height: kích thước chiều rộng và cao của hình bằng đơn vị pixel hoặc phần trăm lớn hơn hay nhỏ hơn ảnh gốc. Ví dụ: width="468" height="60" kích cở banner mà bạn thường thấy, width="90%" heighr="90%" kích cở nhỏ hơn ảnh gốc 100% - 90%=10%.

Alt (alternate): Tên hình ảnh hoặc tên của liên kết thay thế, thường là để chú thích, dòng chữ này sẽ hiển thị trước trong khi chờ hình ảnh hiển thị.

Nếu bạn muốn text liên kết đến hình ảnh, bạn cần phải biết tag <a>. Tag đóng của nó là </a>.

<a href=”http://vantnb.violet.vn/uploads/resources/blog/1438/hp23_500.jpg” />Hình ảnh</a>

Nếu bạn muốn Hình ảnh liên kết đến một trang web, bạn cần thay text bằng tag dùng cho hình ảnh như ở trên.

<a href="http://www.giangdaytructuyen.com"/><img border="0" src="http://vantnb.violet.vn/uploads/resources/blog/1438/hp23_500.jpg" />

</a>

Ví dụ link đến trang http://www.giangdaytructuyen.com

Nếu bạn muốn hình ảnh link đến hình ảnh, như vậy sẽ là
<href="http://i198.photobucket.com/albums/aa172/giangdaytructuyen/thuthuatchoblogger/animation_thumb2.gif"/><img border="0" src="http://vantnb.violet.vn/uploads/resources/blog/1438/hp23_500.jpg" />

</a>

Nếu bạn chỉ có một hình, muốn cho hình này hiển thị ở kích thước nhỏ và khi click vào thì nó hiển thị kích thước lớn, như chế độ xem ảnh thumbnails của hệ điều hành, thì bạn định lại kích thước width và height:

Ví dụ: Ảnh gốc 90 pixels, tôi cho nó 50 pixels:

<a href="http://vantnb.violet.vn/uploads/resources/blog/1438/hp23_500.jpg" ><img width="50" weight="50" src="http://vantnb.violet.vn/uploads/resources/blog/1438/hp23_500.jpg" />

</a>

Bạn có thể định theo phần trăm.

Chưa hết nếu bạn muốn khi click vào hình này thì tự động một cửa sổ mới chứa hình ảnh hiển thị chứ không phải hình ảnh load thay thế ngay trang bạn đang xem, bạn cần thêm target="_blank"

<a href="http://vantnb.violet.vn/uploads/resources/blog/1438/hp23_500.jpg" target="_blank"><img width="50" weight="50" src="http://vantnb.violet.vn/uploads/resources/blog/1438/hp23_500.jpg" />

</a>

Bạn click vào kết quả này để hiểu hơn.

Để sử dụng tag này, ngay tại cửa sổ đăng bài của bạn, click trên Edit Html để chèn tag vào nơi bạn cần minh hoạt hình ảnh và soạn thảo.