amigos personalizados (Aporte)

<div id="container"><center><font color="#FFFF00">TU TITULO MIS AMIGOS</font></center>
<a class="gallery slidea" href="#FOTO1"><span>ESCRIBE DATOS DE TU AMIGO EJEMPLO: NOMBRE:... CIUDAD:...<br/>
<img src="URL de imagen o la foto de tu amigo grande 1" height="400" width="300"/></span>
</a> <a class="gallery slideb" href="#foto2"><span>ESCRIBE DATOS DE TU AMIGO<br />
<img src="URL foto 2" alt="angye" height="400" width="300" /></span></a>
<a class="gallery slidec" href="#foto3" ><span>ESCRIBE DATOS DE TU AMIGO<br />
<img src="URL foto 3" height="400" width="300"/></span></a>
<a class="gallery slided" href="#foto4" ><span>ESCRIBE DATOS DE TU AMIGO<br />
<img src="URL foto 4" height="400" width="300"/></span></a>
<a class="gallery slidee" href="#foto5" ><span>ESCRIBE DATOS DE TU AMIGO<br />
<img src="URL foto 5" height="400" width="300" /></span></a>
<a class="gallery slidef" href="#foto6" ><span>ESCRIBE DATOS DE TU AMIGO<br />
<img src="URL foto 6" width="300" height="350" /></span></a>
<a class="gallery slideg" href="#foto7" ><span>ESCRIBE DATOS DE TU AMIGO<br />
<img src="URL foto 7" width="300" height="350" /></span></a>
<a class="gallery slideh" href="#foto8" ><span>ESCRIBE DATOS DE TU AMIGO<br />
<img src="URL foto 8" width="300" height="400" /></span></a>
<a class="gallery slidei" href="#foto9" ><span>ESCRIBE DATOS DE TU AMIGO<br />
<img src="URL foto 9" width="300" height="400"/></span></a>
<a class="gallery slidej" href="#foto10" ><span>ESCRIBE DATOS DE TU AMIGO<br />
<img src="URL foto 10" width="300" height="400"/></span></a>
<a class="gallery slidek" href="#foto11" ><span>ESCRIBE DATOS DE TU AMIGO<br />
<img src="URL foto11" width="300" height="400" /></span></a>
<a class="gallery slidel" href="#foto12" ><span>ESCRIBE DATOS DE TU AMIGO<br />
<img src="URL foto 12" width="300" height="400" /></span></a> </div>

<style>.a:visited {color:transparent;}
#container {position:relative; width:450px; height:600px; background:transparent; border:2px dashed #FFFFFF; margin:5px auto;}
#container b {font-weight:normal; width:450px; text-align:center; position:absolute; bottom:250px; left:0; color:#FFCC00; line-
height:1.8em; z-index:1;}
a.gallery, a.gallery:visited {display:inline; text-decoration:none; border:1px solid #00FFFF; width:53px; height:53px; float:left; margin:5px 9px; position:relative; cursor:crosshair;filter:Alpha(Opacity=50)}
a.slidea {background: url(imagen pequeñita del primer amigo);}
a.slideb {background: url(imagen pequeñita 2);}
a.slidec {background: url(imagen pequeñita 3);}
a.slided {background: url(imagen pequeñita 4);}
a.slidee {background: url(imagen pequeñita 5);}
a.slidef {background:url(imagen pequeñita 6);}
a.slideg {background:url(imagen pequeñita 7);}
a.slideh {background:url(imagen pequeñita ;}
a.slidei {background:url(imagen pequeñita 9);}
a.slidej {background:url(imagen pequeñita 10);}
a.slidek {background:url(imagen pequeñita 11);}
a.slidel {background:url(imagen pequeñita 12);}
a.gallery span {visibility:hidden; display:block; position:absolute; width:420px; height:450px; top:80px; left:9px; color:#FFFF00; background-image:url(URL DE IMAGEN PARA EL FONDO DE LA FOTO GRANDE); text-align:center; border:1px solid #00FFFF; font-family:arial; letter-spacing:1px; cursor:default;}
a.slidea span {left:-1px; top:130px;}
a.slideb span {left:-74px; top:130px;}
a.slidec span {left:-147px; top:130px;}
a.slided span {left:-220px; top:130px;}
a.slidee span {left:-293px; top:130px;}
a.slidef span {left:-366px; top:130px;}
a.slideg span {left:-1px; top:65px;}
a.slideh span {left:-74px; top:65px;}
a.slidei span {left:-147px; top:65px;}
a.slidej span {left:-220px; top:65px;}
a.slidek span {left:-293px; top:65px;}
a.slidel span {left:-366px; top:65px;}
a.gallery:hover {white-space:normal; border:1px solid #fff; z-index:100;filter:none}
a.gallery:hover span {visibility:visible; z-index:100;filter:none}
a.gallery:hover span img {margin:10px; border:1px solid #000; position:relative; z-index:100;filter:none}
a.gallery:active, a.gallery:focus {border:1px dotted #00FF00; z-index:10;filter:none}
a.gallery:active span, a.gallery:focus span {visibility:visible; z-index:10;display:block}
a.gallery:active span img, a.gallery:focus span img {border:1px solid #000; position:relative; margin:10px; z-index:10;}</style>

[]