Thumbnail Graphics
The speed of loading a page of a Web site is reduced if high-resolution graphics are used.
High-resolution graphics are required to improve the effectiveness of the site and cannot
be avoided. Hence, to avoid this issue, thumbnails are used.
A thumbnail is a small image, or a part of a larger image. Clicking the thumbnail image
will link to the larger original image, which can be viewed and downloaded. Even a hover
effect can be given through CSS and JavaScript.
Code Snippet 10 demonstrates an HTML code for inclusion of a thumbnail image.
Code Snippet 10:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8”>
<title>Thumbnail</title>
<style>
/* general */
body {
margin:0;
padding:40px 80px;
background:#fff;
font:70% Arial, Helvetica, sans-serif;
color:#555;
line-height:100%;
}
h1, h2{
font-size:180%;
font-weight:normal;
color:#555;
}
p{
margin:1em 0;
}
p.text{
width:500px;
}
a{
color:#f20;
text-decoration:none;
}
a:hover{
color:#999;
}
img{
border:none;
}
/* // general */
/* thumbnail list */
ul#thumbs, ul#thumbs li{
margin:0;
padding:0;
list-style:none;
High-resolution graphics are required to improve the effectiveness of the site and cannot
be avoided. Hence, to avoid this issue, thumbnails are used.
A thumbnail is a small image, or a part of a larger image. Clicking the thumbnail image
will link to the larger original image, which can be viewed and downloaded. Even a hover
effect can be given through CSS and JavaScript.
Code Snippet 10 demonstrates an HTML code for inclusion of a thumbnail image.
Code Snippet 10:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8”>
<title>Thumbnail</title>
<style>
/* general */
body {
margin:0;
padding:40px 80px;
background:#fff;
font:70% Arial, Helvetica, sans-serif;
color:#555;
line-height:100%;
}
h1, h2{
font-size:180%;
font-weight:normal;
color:#555;
}
p{
margin:1em 0;
}
p.text{
width:500px;
}
a{
color:#f20;
text-decoration:none;
}
a:hover{
color:#999;
}
img{
border:none;
}
/* // general */
/* thumbnail list */
ul#thumbs, ul#thumbs li{
margin:0;
padding:0;
list-style:none;
}
ul#thumbs li{
flat:left;
margin-right:0px;
border:1px solid #999;
padding:2px;
}
ul#thumbs a{
display:block;
flat:left;
width:125px;
height:135px;
line-height:50px;
overflw:hidden;
position:relative;
z-index:1;
}
ul#thumbs a img{
flat:left;
position:absolute;
top:0px;
left:0px;
}
/* mouse over */
ul#thumbs a:hover{
overflw:visible;
z-index:1000;
border:none;
}
ul#thumbs a:hover img{
border:1px solid #999;
background:#fff;
padding:2px;
}
/* // mouse over */
/* clearing flats */
ul#thumbs:after, li#thumbs:after{
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
ul#thumbs, li#thumbs{
display:block;
}
ul#thumbs, li#thumbs{
min-height:1%;
}
* html ul#thumbs, * html li#thumbs{
height:1%;
}
/* // clearing flats */
/* // thumbnail list */
</style>
</head>
<body><ul id=”thumbs”>
<li><a href=”HTML5.png” target=”_blank”><img src=”HTML5_
small.jpg”/></a></li>
</ul>
</body>
</html>
ul#thumbs li{
flat:left;
margin-right:0px;
border:1px solid #999;
padding:2px;
}
ul#thumbs a{
display:block;
flat:left;
width:125px;
height:135px;
line-height:50px;
overflw:hidden;
position:relative;
z-index:1;
}
ul#thumbs a img{
flat:left;
position:absolute;
top:0px;
left:0px;
}
/* mouse over */
ul#thumbs a:hover{
overflw:visible;
z-index:1000;
border:none;
}
ul#thumbs a:hover img{
border:1px solid #999;
background:#fff;
padding:2px;
}
/* // mouse over */
/* clearing flats */
ul#thumbs:after, li#thumbs:after{
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
ul#thumbs, li#thumbs{
display:block;
}
ul#thumbs, li#thumbs{
min-height:1%;
}
* html ul#thumbs, * html li#thumbs{
height:1%;
}
/* // clearing flats */
/* // thumbnail list */
</style>
</head>
<body><ul id=”thumbs”>
<li><a href=”HTML5.png” target=”_blank”><img src=”HTML5_
small.jpg”/></a></li>
</ul>
</body>
</html>
 |
| Output of Thumbnail with Hover Effect |
.png)
