/* default link and visited state to trigger :active in IE6 */
a, a:visited {color:#000;}

/* position the outer frame */
div.frame {position:relative; margin:2px auto; width:170px; height:244px;}

/* 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:2px double #d00;}
/* clip the eight images into vertical strips */
div.frame a.pos1 img {clip:rect(0 28px 244px 0px); border-color:#d00;}
div.frame a.pos2 img {clip:rect(0 56px 244px 28px); border-color:#fc0;}
div.frame a.pos3 img {clip:rect(0 84px 244px 56px); border-color:#791;}
div.frame a.pos4 img {clip:rect(0 112px 244px 84px); border-color:#e52;}
div.frame a.pos5 img {clip:rect(0 140px 244px 112px); border-color:#a84;}
div.frame a.pos6 img {clip:rect(0 168x 244px 140px); border-color:#7bc;}

/* 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 244px 170px 0); z-index:100;}