Image Gallery

Click on thumbnail for larger images

xhtml | css | aaa

• 
• 
• 
• 
• 
• 

• 
• 
• 
• 
• 
• 

HTML Code

<ul class="gallery">
	<li>
		<a href="image1.html" onclick="window.open(this.href);return
		false;" onkeypress="window.open(this.href)" title="view larger
		version of image 1"><img src="/tutorials/media/image1.gif" alt="image
		one" width="50" height="50" /></a>
	</li>
	<li>
		<a href="image2.html" onclick="window.open(this.href);return
		false;" onkeypress="window.open(this.href)" title="view larger
		version of image 2"><img src="/tutorials/media/image2.gif" alt="image
		two" width="50" height="50" /></a>
	</li>
	<li>
		<a href="image3.html" onclick="window.open(this.href);return
		false;" onkeypress="window.open(this.href)" title="view larger
		version of image 3"><img src="/tutorials/media/image3.gif" alt="image
		three" width="50" height="50" /></a>
	</li>
	<li>
		<a href="image4.html" onclick="window.open(this.href);return
		false;" onkeypress="window.open(this.href)" title="view larger
		version of image 4"><img src="/tutorials/media/image4.gif" alt="image
		four"width="50" height="50" /></a>
	</li>
	<li>
		<a href="image5.html" onclick="window.open(this.href);return
		false;" onkeypress="window.open(this.href)" title="view larger
		version of image 5"><img src="/tutorials/media/image5.gif" alt="image
		five" width="50" height="50" /></a>
	</li>
	<li>
		<a href="image6.html" onclick="window.open(this.href);return
		false;" onkeypress="window.open(this.href)" title="view larger
		version of image 6"><img src="/tutorials/media/image6.gif" alt="image
		six" width="50" height="50" /></a>
	</li>
</ul>  

CSS styling

.gallery {
 list-style: none;
 margin: 0;
 padding: 0;
}
.gallery li {
 display: inline;
}
a:link img {
 border: 1px solid #000;
}
a:hover img {
 border: 1px solid #c33;
}
a:visited img {
 border: 1px solid #51BA39;
}