Trang chủỞ bài viết dùng Code Tooltip để giúp chúng ta rê chuột phóng to hình ảnh mình đã giới thiệu ở link: Code tooltip rê chuột phóng to hình ảnh. Đó là Code dành riêng về cho javascipt. Hôm nay mình giới thiệu tới các bạn code CSS cũng làm được như thế, và có vẻ đơn giản hơn, ngắn gọn hơn. Rất phù hợp cho Website - Blog thêm phần sinh động hơn.
DEMO:
CODE - CODE
CSS:
<style type="text/css">
/* smart image enlarger starts here */
/* If your images are not linking to other pages leave the links as <a href="#nogo"> Otherwise enlarger won't work in IE6 */
.ienlarger {
float: left;
clear: none; /* set to left or right if needed */
padding-bottom: 5px; /* space between thumbs. Don't change this to margin */
padding-right: 5px; /* space between thumbs and wrapping text when there is any text around it */
}
.ienlarger a {
display:block;
text-decoration: none;
/* add cursor:default; to this rule to disable the hand cursor */
}
.ienlarger a:hover{ /* don't move this positioning to normal state */
position:relative;
}
.ienlarger span img {
border: 1px solid #FFFFFF; /* adds a border around the image */
margin-bottom: 8px; /* pushes the text down from the image */
}
.ienlarger a span { /* this is for the large image and the caption */
position: absolute;
display:none;
color: #FFCC00; /* caption text colour */
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px; /* caption text size */
background-color: #000000;
font-weight: bold;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 13px;
padding-left: 10px;
}
.ienlarger img { /* leave or IE puts a border around links */
border-width: 0;
}
.ienlarger a:hover span {
display:block;
top: 50px; /* means the pop-up's top is 50px away from thumb's top */
left: 90px; /* means the pop-up's left is 90px far from the thumb's left */
z-index: 100;
/* If you want the pop-up open to the left of thumb, remove the left: 90px; and add
right: 90px; This would mean the right side of the pop-up is 90px far from the right side of thumb */
/* If you want the pop-up open above the thumb, remove the top: 50px; and add
bottom: 50px; This would mean the bottom of the pop-up is 50px far from the bottom of thumb */
/* add cursor:default; to this rule to disable the hand cursor only for the large image */
}
.resize_thumb {
width: 150px; /* enter desired thumb width here */
height : auto;
}
/* smart image enlarger ends here */
</style>
HTML
<div class="ienlarger">
<a href="http://www.itviet360.com/"><img src="http://img406.imageshack.us/img406/4920/63734582.jpg" alt="thumb" class="resize_thumb" /><span>
<img src="http://img406.imageshack.us/img406/4920/63734582.jpg" alt="large" />
Rê chuột phóng to hình ảnh.
Website: http://itviet360.com</span></a></div>
<br style="clear:left" />
Link màu đỏ được thay bằng link hình ảnh của các bạn.
Cách sử dụng:
Code CSS bạn có thể đặt như sau:
<head> Code CSS </head>
Hoặc:
<body> Code CSS </body>
Ví dụ bạn tạo 1 file HTML có nội dung dưới đây.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>itviet360.com Code phóng to hình CSS</title>
</head>
<style type="text/css">
.ienlarger {
float: left;
clear: none; /* set to left or right if needed */
padding-bottom: 5px; /* space between thumbs. Don't change this to margin */
padding-right: 5px; /* space between thumbs and wrapping text when there is any text around it */
}
.ienlarger a {
display:block;
text-decoration: none;
/* add cursor:default; to this rule to disable the hand cursor */
}
.ienlarger a:hover{ /* don't move this positioning to normal state */
position:relative;
}
.ienlarger span img {
border: 1px solid #FFFFFF; /* adds a border around the image */
margin-bottom: 8px; /* pushes the text down from the image */
}
.ienlarger a span { /* this is for the large image and the caption */
position: absolute;
display:none;
color: #FFCC00; /* caption text colour */
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px; /* caption text size */
background-color: #000000;
font-weight: bold;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 13px;
padding-left: 10px;
}
.ienlarger img { /* leave or IE puts a border around links */
border-width: 0;
}
.ienlarger a:hover span {
display:block;
top: 50px;
left: 90px;
z-index: 100;
}
.resize_thumb {
width: 150px;
height : auto;
}
</style>
<body>
<div class="ienlarger">
<a href="http://www.itviet360.com/"><img src="http://img406.imageshack.us/img406/4920/63734582.jpg" alt="thumb" class="resize_thumb" /><span>
<img src="http://img406.imageshack.us/img406/4920/63734582.jpg" alt="large" />
Rê chuột phóng to hình ảnh.
Website: http://itviet360.com</span></a></div>
<br style="clear:left" />
</body>
</html>
Chúc các bạn thành công !
Chuyên mục: html-css, Source code, Thu thuat blogspot, thu-thuat-blogger
cái này sử dụng sao vậy bạn, nói rõ hơn 1 tí cho những ai chưa biết thì học hỏi chứ.
Trả lờiXóaBạn sử dụng cả CSS và HTML trong thẻ body hoặc có thể đặt CSS trong thẻ head đều được cả. Mình cập nhật lại bài viết chi tiết hơn nhé.
Trả lờiXóaum, bạn viết chi tiết hơn một xíu để mọi người có thể biết cách mà áp dụng, mình cũng đang tìm cái này mà bây giờ mới gặp. thanks.
Trả lờiXóa^_^ mình viết Web thì hay dùng Tooltips. Nhưng giờ thử CSS, tốt cho Web hơn
Trả lờiXóaThanks bạn đã ghé !
chào phong vũ mình muốn show ảnh từ cơ sở dữ liệu mysql thì chèn code vô đâu đc nhỉ thank you
Trả lờiXóaMình nghĩ nếu load từ CSDL thì bạn nên dùng Tooltip. Code Tooltip đó thường được dùng nhiều trong Website. Bạn chỉ cần thay link hình từ CSDL thay thế Link cố định mình làm Demo nhé.
XóaLink bài Tooltip: http://www.itviet360.com/2012/10/code-tooltip-re-chuot-phong-to-hinh-anh.html
Bạn ơi ! mỉnh coppy code cua bạn bỏ vào sau thẻ head mà sao nó báo lổi không lưa được bạn hà ! ban chỉ giúp mình với nhé. thanks ! có gì bạn gửi wa mail minh là vuong.pccc114@gmail.com
Trả lờiXóaAnh cho em hỏi cách áp dụng cho blogger với ?
Trả lờiXóa