Có bạn gửi tin nhắn trên meebo room của ThuThuatChoBlogger.BlogSpot.com
hỏi làm thế nào để 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 của nó hiện ra. Thật ra nếu bạn là dân IT thì chuyện
này quá đơn giản, những người chưa biết về HTML (hypertext markup
language: ngôn ngữ đánh dấu siêu văn bản) thì thấy nó rối lắm và phức
tạp. Tôi sẽ hướng dẫn bạn về tag này.

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ụ:
https://2img.net/h/i198.photobucket.com/albums/aa172/giangdaytructuyen/thuthuatchoblogger/animation_thumb.gif
để hiện thị bạn phải đặt nó nắm trong tag <img> như sau:

<img src="https://2img.net/h/i198.photobucket.com/albums/aa172/giangdaytructuyen/thuthuatchoblogger/animation_thumb.gif" />

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,…

Kết quả hiển thị:


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=”https://2img.net/h/i198.photobucket.com/albums/aa172/giangdaytructuyen/thuthuatchoblogger/animation_thumb.gif” />

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=”https://2img.net/h/i198.photobucket.com/albums/aa172/giangdaytructuyen/thuthuatchoblogger/animation_thumb.gif” />Hình ảnh</a>

Kết quả hiển thị



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="https://2img.net/h/i198.photobucket.com/albums/aa172/giangdaytructuyen/thuthuatchoblogger/animation_thumb.gif" />
</a>

Ví dụ tôi sử dụng link đến trang http://www.giangdaytructuyen.com

Kết quả hiển thị:




Nếu bạn muốn hình ảnh link đến hình ảnh, như vậy sẽ là

<href="https://2img.net/h/i198.photobucket.com/albums/aa172/giangdaytructuyen/thuthuatchoblogger/animation_thumb2.gif"/><img    border="0" src="https://2img.net/h/i198.photobucket.com/albums/aa172/giangdaytructuyen/thuthuatchoblogger/animation_thumb.gif" />
</a>

Kết quả hiển thị:




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="https://2img.net/h/i198.photobucket.com/albums/aa172/giangdaytructuyen/thuthuatchoblogger/animation_thumb.gif" ><img width="50" weight="50" src="https://2img.net/h/i198.photobucket.com/albums/aa172/giangdaytructuyen/thuthuatchoblogger/animation_thumb.gif" />
</a>

Kết quả hiển thị




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="https://2img.net/h/i198.photobucket.com/albums/aa172/giangdaytructuyen/thuthuatchoblogger/animation_thumb.gif" target="_blank"><img width="50" weight="50" src="https://2img.net/h/i198.photobucket.com/albums/aa172/giangdaytructuyen/thuthuatchoblogger/animation_thumb.gif" />
</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.

Chúc bạn thành công.