Thứ Hai, 19 tháng 11, 2012

Các thủ thuật liên quan đến ảnh

1. Lấy đường dẫn của một bức ảnh bất kì trên 1 website nào đó
Bạn chỉ cần click chuột fải vào bức ảnh đó chọn Properties.
- Đối với IE: Đường dẫn ảnh nằm sau Address (URL).
- Đối với Firefox: Đường dẫn ảnh nằm sau Location.
 
2. Chèn ảnh vào bài viết
- Cách 1 : click vào nút Insert Image  trên thanh trang trí bài viết mới. Copy đường dẫn ảnh cần chèn dán vào Image URL. Click OK.
- Cách 2 : bôi đen ảnh cần chèn (ở một website nào đó) rồi click chuột fải chọn Copy (hoặc ấn tổ hợp fím Ctrl+C) rồi way sang chỗ cần chèn ảnh click chuột fải chọn Paste (hoặc ấn tổ hợp phím Ctrl+V).
- Cách 3 : Cứ viết bài viết. Đến chỗ cần chèn ảnh thì click vào ô HTML (ở góc dưới bên trái của cửa sổ viết bài).Rùi copy đoạn code sau vào :

Sau đó lại click vào ô HTML và viết tiếp bài.
 
3. Thay đổi kích thước ảnh theo ý muốn- Chuyển sang chế độ HTML.
- Nếu muốn co bức ảnh lại theo chiều rộng chỉ còn x (pixel)
- Nếu muốn co bức ảnh lại theo chiều cao chỉ còn y (pixel)
- Nếu muốn thay đổi theo cả chiều dài & chiều rộng thành x và y (pixel)

 
4. Đưa 1 bức ảnh từ máy lên mạng
- Bạn có thể dùng một website nào đó cung cấp dịch vụ lưu trữ ảnh như Photobucket.com hay GooglePages.com chẳng hạn...
- Chú ý : với Photobucket thì đường dẫn ảnh nằm ở  Direct Link ngay dưới bức ảnh.
 
5. Tạo hiệu ứng di chuột đến thì ảnh phóng to lên
Kết hợp 1 chút xíu CSS HTML,bạn sẽ có hiệu ứng ảnh khá hay ho này

Đầu tiên : bạn copy và dán đoạn mã sau vào CSS của blog của bạn (Thiết kế > Theme > Chế độ tự chỉnh sửa > CSS)

#my_img img {height: x;}
#my_img img:hover {height: y;}

trong đó : x là chiều cao ảnh lúc nhỏ, y là chiều cao ảnh lúc to.
Ví Dụ : height : 110px
- Nếu muốn khi di chuột đến thì ảnh hiển thị với kích thước đúng của nó thì thay y = auto là ok
Xong fần CSS,bây jờ đến fần HTML : Với mỗi bức ảnh muốn làm hiệu ứng,bạn làm như sau :


Thế là bạn đã có 1 hiệu ứng rất thú vị với bức ảnh của mình.Chúc các bạn thành công !
 
 

Không có nhận xét nào:

Đăng nhận xét

To Top Page Up Page Down To Bottom Auto Scroll Stop Scroll
Comments jQuery Recent Posts Ticker Widget