CSS

<style type="text/css"> 
/* default link and visited state to trigger :active in IE6 */
a, a:visited {color:#000;}
 
/* position the outer frame */
div.frame {position:relative; margin:20px auto; width:500px; height:380px; border:1px solid #000;}
 
/* Set up the default links for the gallery */
div.frame a, div.frame a:visited {background:#eee; text-decoration:none;}
 
/* Set up the common image style */
div.frame a img {position:absolute; top:0; left:0; border:10px double #d00;}
/* clip the eight images into vertical strips */
div.frame a.pos1 img {clip:rect(0 70px 380px 0px); border-color:#d00;}
div.frame a.pos2 img {clip:rect(0 130px 380px 70px); border-color:#fc0;}
div.frame a.pos3 img {clip:rect(0 190px 380px 130px); border-color:#791;}
div.frame a.pos4 img {clip:rect(0 250px 380px 190px); border-color:#e52;}
div.frame a.pos5 img {clip:rect(0 310px 380px 250px); border-color:#a84;}
div.frame a.pos6 img {clip:rect(0 370px 380px 310px); border-color:#7bc;}
div.frame a.pos7 img {clip:rect(0 430px 380px 370px); border-color:#150;}
div.frame a.pos8 img {clip:rect(0  500px 380px 430px); border-color:#d71;}
 
/* set up the default link :active for IE */
div.frame a:active {position:absolute; top:0; left:0; background:#fff; z-index:100;}
 
/* unclip the image */
div.frame a:active img, div.frame a:focus img {background:#fff; clip:rect(0 510px 380px 0); z-index:100;}
 
</style> 

gistfile3.txt

Coloque o CSS dentro da tag HEAD e o HTML dentro do BODY. 

HTML

<div class="frame"> 
<a class="pos1" href="#nogo"><img src="slides/hummingbird.jpg" alt="Hummingbird" title="Hummingbird" /></a> 
<a class="pos2" href="#nogo"><img src="slides/sunflower.jpg" alt="Sunflower" title="Sunflower" /></a> 
<a class="pos3" href="#nogo"><img src="slides/hummingbird2.jpg" alt="Hummingbird" title="Hummingbird" /></a> 
<a class="pos4" href="#nogo"><img src="slides/dragonfly.jpg" alt="Dragonfly" title="Dragonfly" /></a> 
<a class="pos5" href="#nogo"><img src="slides/hedgehog.jpg" alt="Hedgehog" title="Hedgehog" /></a> 
<a class="pos6" href="#nogo"><img src="slides/jay.jpg" alt="Jay" title="Jay" /></a> 
<a class="pos7" href="#nogo"><img src="slides/butterfly.jpg" alt="Butterfly" title="Butterfly" /></a> 
<a class="pos8" href="#nogo"><img src="slides/crane.jpg" alt="Crane" title="Crane" /></a> 
</div>