Jigsaw links

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

Information

Another example of interlocking non-overlapping links.

This time they are in the rough shape of jigsaw pieces and when hovered over they will reveal part of a picture. Click them and they will show another solid colour.

Each link only occupies its coloured jigsaw piece.

AND again it's all done with just css.

nDLRt : nicholls Dotted Line Replacement technique.

=========================================

ul#off {list-style-type:none; padding:0; margin:0; width:440px; height:440px; margin:1em auto; position:relative; background:transparent url(face.jpg); border:1px solid #000;}
ul#off li {display:block; float:left;}
ul#off a {display:block; width:0; height:0; position:absolute; text-decoration:none; font-size:1em; line-height:40px;}

ul#off a.one {top:40px; left:0;}
ul#off a.two {top:0; left:160px;}
ul#off a.three {top:40px; left:240px;}
ul#off a.four {top:120px; left:40px;}
ul#off a.five {top:160px; left:120px;}
ul#off a.six {top:120px; left:280px;}
ul#off a.seven {top:280px; left:0;}
ul#off a.eight {top:240px; left:160px;}
ul#off a.nine {top:280px; left:240px;}

ul#off a em.hoz {position:absolute; display:block; height:40px; font-style:normal; font-weight:bold; color:#fff; cursor:pointer;}
ul#off a em.ver {position:absolute; display:block; width:40px; font-style:normal; font-weight:bold; color:#fff; cursor:pointer;}

ul#off a em.h1 {top:40px; left:0; width:120px;}
ul#off a em.h2 {top:120px; left:0; width:120px;}
ul#off a em.h3 {top:40px; left:0; width:200px; text-align:center;}

ul#off a em.v1 {top:0; left:40px; height:200px; text-align:center; line-height:200px;}
ul#off a em.v2 {top:0; left:40px; height:120px;}
ul#off a em.v3 {top:0; left:120px; height:120px;}

ul#off a.one em {background:#663;}
ul#off a.two em {background:#996;}
ul#off a.three em {background:#dd9;}
ul#off a.four em {background:#366;}
ul#off a.five em {background:#699;}
ul#off a.six em {background:#9dd;}
ul#off a.seven em {background:#636;}
ul#off a.eight em {background:#969;}
ul#off a.nine em {background:#d9d;}

ul#off a:hover {color:#c00;}
ul#off a:hover em {background:transparent; color:#fc0;}
ul#off a:active, ul#off a:focus {background:#eee;}
ul#off a:active em, ul#off a:focus em {background:#fc6; color:#000;}