Diễn đàn sư phạm Yên Bái
Khách viếng thăm sẽ rất thiệt thòi đấy!!! Đăng nhập để chia sẻ... Ghi danh để yêu thương... ^^
Diễn đàn sư phạm Yên Bái
Khách viếng thăm sẽ rất thiệt thòi đấy!!! Đăng nhập để chia sẻ... Ghi danh để yêu thương... ^^
Change background image
Diễn đàn sư phạm Yên Bái

Kết nối cộng đồng sư phạm Online

wWw.GiaoVienYenBai.7Forum.Net - Kết Nối Cộng Đồng Sư Phạm Online

Go downMessage [Page 1 of 1]

© FMvi.vn

#1 Code chèn hình ảnh vào Blog ( Toàn Tập )  Empty Code chèn hình ảnh vào Blog ( Toàn Tập ) 27/2/2012, 09:24
Đang xem:In total there is 0 user online :: 0 Registered, 0 Hidden and 0 Guests

rongbay
rongbay
rongbay

Tôi là thuyền trưởng của cuộc đời tôi

Chia sẻ bài viết: ----------------------------
Đã có 1 số bài viết nói về vấn đề này. Nhưng mình cảm thấy không đầy đủ và những người mới tiếp xúc thì khó có thể tùy biến theo ý mình được. Nay mình xin tổng hợp lại thành bài viết này cho mọi người dễ tham khảo.



Đối với Entry.

Đánh dấu check vào nút HTML trước khi chèn code. Chèn xong bỏ dấu check ở nút HTML.

Đối với Module

Nếu chưa có modul sẵn thì bạn cần thêm Modul mới vào blog. Hướng dẫn: Vào mục Blog của tôi -> Thêm Modul.

Sau khi thêm 1 modul mới bạn vào mục Blog của tôi -> Sửa Trang.

Sau đó click vào nút Sửa Module ( cái biểu tượng như cây viết chì) vừa mới thêm.

Ở phần Nội dung bạn chèn đoạn code bên dưới.





Phần 1. Chỉ chèn hình ảnh.



1. Chèn hình với kích thước mặc định.

Trích:
<img src="Link Hình" />




2. Chèn hình ảnh với kích thước tùy chỉnh.

Trích:
<img src="Link Hình" width="n" height="n" />


Bạn chỉ sử dụng code này trong trường hợp bạn biết về kích thước của hình. Ko thì hình sẽ bị biến dạng.




3. Thiết lập chiều rộng của ảnh.

Trích:
<img src="Link Hình" width="n" />


Cách này áp dụng khi bạn muốn kích thước của hình vừa với chiều rộng của entry, module hay comment.


Khi bạn tùy chỉnh chiều rộng thì chiều cao sẽ tự thay đổi theo.



4. Chèn hình ảnh với tất cả các thuộc tính nâng cao.

Trích:
<img src="Link Hình" alt="Viết chú thích cho tấm hình" title="Nội dung tấm hình" width="n" height="n" border="n" />




Trong đó:




Trích:
src="Link Hình"

Đường dẫn đến tập tin hình ảnh.



alt="Chú Thích"

Tạo chú thích cho hình ảnh chèn vào.

Một số trình duyệt không hỗ trợ hình ảnh hoặc người dùng xác lập không hiển thị hình ảnh hay không tải hình. Trong trường hợp này hình được thay thế bởi một khung trống và kèm câu chú thích.



title="Nội dung"

Khi rê chuột vào tấm hình sẽ hiển thị nội dung.



width="n"

height="n"


Xác lập kích thước ảnh. Tránh lạm dụng để thay đổi kích thước ảnh vì có thể làm biến dạng ảnh.

n: có thể tính bằng pixel hay tỷ lệ phần trăm




border="n"

Chỉ định độ dày đường viên bao quanh ảnh.

n=0: không có đường viền
Với bảng này bạn có thể thêm các thẻ, hoặc xóa các thẻ để được đoạn code như ý. Mỗi thẻ cách nhau bằng 1 khoảng trắng.



Ví dụ: Bạn chỉ muốn viết chú thích cho tấm hình chứ ko muốn hiển thị nội dung khi rê chuột đến thì bạn thêm thẻ alt="Viết chú thích cho tấm hình" và ko thêm thẻ title="Nội dung tấm hình". Tương tự đối với các thẻ khác.



Ví Dụ cụ thể:



Trường hợp chèn hình ảnh với tất cả thuộc tính nâng cao.

Trích:
<img src="http://files.myopera.com/mrcosvnblog/albums/3198101/mrcos_avata.jpg" alt="MrCosVn's Blog" title="Avata" width="150" height="150" border="1" />




Kết quả hiển thị :

https://2img.net/h/i849.photobucket.com/albums/ab55/cosvn886/linhtinh/2-1.jpg" alt="" onload="NcodeImageResizer.createOn(this);" border="0">


Phần 2. Chèn hình ảnh có link muốn dẫn đến.

( Khi bạn click vào hình ảnh sẽ dẫn đến 1 trang khác)



1. Chèn hình với kích thước mặc định.

Trích:
<a href="Link liên kết muốn đến"><img src="Link ảnh" ></a>


2. Chèn với kích thước mặc định, khi click vào hình sẽ hiện ra cửa sổ mới.

Trích:
<a href="Link liên kết muốn đến" target="_blank"><img src="Link Hình" />


3. Chèn hình với tất cả thuộc tính nâng cao.


Trích:
<a href="Link liên kết muốn đến" target="_blank"><img src="Link Hình" alt="Viết chú thích cho tấm hình" title="Nội dung tấm hình" width="n" height="n" border="n" />




Trong đó:




Trích:
href="Link Liên Kết"

Đường dẫn đến trang web muốn đến.



src="Link Hình"

Đường dẫn đến tập tin hình ảnh.




alt="Chú Thích"


Tạo chú thích cho hình ảnh chèn vào.

Một số trình duyệt không hỗ trợ hình ảnh hoặc người dùng xác lập không hiển thị hình ảnh hay không tải hình. Trong trường hợp này hình được thay thế bởi một khung trống và kèm câu chú thích.



title="Nội dung"

Khi rê chuột vào tấm hình sẽ hiển thị nội dung.




width="n"

height="n"


Xác lập kích thước ảnh. Tránh lạm dụng để thay đổi kích thước ảnh vì có thể làm biến dạng ảnh.



border="n"


Chỉ định độ dày đường viên bao quanh ảnh.

n=0: không có đường viền



target="_blank"

Nếu chèn thẻ này vào thì khi bạn click vào hình sẽ hiện ra cửa sổ mới




Với bảng này bạn có thể thêm các thẻ, hoặc xóa các thẻ để được đoạn code như ý. Mỗi thẻ cách nhau bằng 1 khoảng trắng.



Ví dụ: Khi bạn muốn chỉ tùy chỉnh chiều rộng của tấm hình cho phù hợp với module hoặc bài viết thì bạn thêm thẻ width="n" và ko cần thêm thẻ height="n", tương tự cho các thẻ khác.



Ví Dụ cụ thể:



Trường hợp chèn hình ảnh với tất cả thuộc tính nâng cao.

Trích:
<a href="http://vn.360plus.yahoo.com/mrcosvn" target="_blank"><img src="http://files.myopera.com/mrcosvnblog/albums/3198101/mrcos_avata.jpg" alt="MrCosVn's Blog" title="Avata" width="150" height="150" border="1" />




Kết quả hiển thị:


http://truongton.net/forum/vcheckvirus.php?url=http%3A%2F%2Fvn.360plus.yahoo.com%2Fmrcosvn" target="_blank">https://2img.net/h/i849.photobucket.com/albums/ab55/cosvn886/linhtinh/2-1.jpg" alt="" onload="NcodeImageResizer.createOn(this);" border="0">
-----------------------------------------------
Cảm ơn bạn đã đọc bài tại:wWw.GiaoVienYenBai.7Forum.Net
https://m.facebook.com/thienthanbebong199http://xemboi.uiwap.com

Thích

Báo xấu [0]

Gửi một bình luận lên tường nhà rongbay
Trả lời nhanh

Back to topMessage [Page 1 of 1]

  © FMvi.vn

« Xem bài trước | Xem bài kế tiếp »

Bài viết liên quan

    Quyền hạn của bạn:

    You cannot reply to topics in this forum

    • TOP RANK(Giao Vien Yen Bai) Thank to:© FMvi - Design by baivong