Código HTML:
<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Fotos de Amigos</title> <meta name="krrt" content=""> <style type="text/css"> a {color:#111;} a:hover {} a:visited {color:#111;} /* slides styling */ .photo {width:100%; height:600px; background:url(lbox/back.jpg) no-repeat center center; text-align:left; position:relative;} .photo dl {font-size:0.9em; position:absolute; width:400px; top:100px; left:100px;} .photo dl dt {font-family:"times new roman", serif;font-size:1.8em; margin-bottom:2em;} .photo dl dd {font-family:verdana, arial, sans-serif;padding:0; margin:0; line-height:1.7em; margin-bottom:2em; font-size:11px;} .photo dl dd:first-letter {font-weight:bold;} .photo ul.topic {padding:0; margin:0; list-style:none; width:720px; height:auto; position:relative; z-index:10;} .photo ul.topic li {display:block; width:240px; height:31px; float:left;} .photo ul.topic li a.set {display:block; font-size:11px; width:239px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; border:1px solid #fff; border-width:1px 1px 0 0; background:#ccc; font-family:verdana, arial, sans-serif;} .photo ul.topic li a ul, .photo ul.topic li ul {display:none;} .photo ul.topic li:hover a {color:#fff; background:#aaa;} .photo ul.topic li a:hover ul, .photo ul.topic li:hover ul {display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd url(lbox/close.gif) no-repeat right top; width:1200px; padding:10px 10px; border:2px solid #aaa;} .photo ul.topic li a:hover ul li, .photo ul.topic li:hover ul li {display:inline; width:112px; height:87px; float:left; border:1px solid #fff; margin:1px;} .photo ul.topic li a:hover ul li a, .photo ul.topic li:hover ul li a {display:block; width:110px; height:85px; cursor:default; float:left; text-decoration:none; background:#444; border:1px solid #888;} .photo ul.topic li a:hover ul li a img, .photo ul.topic li:hover ul li a img {display:block; width:100px; height:75px; border:5px solid #eee;} .photo ul.topic li a:hover ul li a img.large, .photo ul.topic li:hover ul li a img.large {position:absolute; display:block; width:0; height:0; overflow:hidden; border:0;} .photo ul.topic li a:hover ul li a:hover, .photo ul.topic li:hover ul li a:hover {white-space:normal; position:relative;} .photo ul.topic li a:hover ul li a:hover img, .photo ul.topic li:hover ul li a:hover img {position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;} .photo ul.topic li a:hover ul li a:hover img.large, .photo ul.topic li:hover ul li a:hover img.large {position:absolute; display:block; width:0; height:0; overflow:hidden; border:0;} .photo ul.topic li:hover ul li a:focus, .photo ul.topic li:hover ul li a:active, .photo ul.topic li a:hover ul li a:active {position:static; outline:0;} .photo ul.topic li:hover ul li a:focus img, .photo ul.topic li:hover ul li a:active img, .photo ul.topic li a:hover ul li a:active img {position:absolute; left:200px; top:170px; width:200px; height:150px; padding:0; background:#000; border:0; z-index:5;} .photo ul.topic li:hover ul li a:focus img.large, .photo ul.topic li:hover ul li a:active img.large, .photo ul.topic li a:hover ul li a:active img.large {position:absolute; left:230px; top:24px; width:640px; height:480px; padding:0; background:#000; border:4px solid #fff; z-index:10;} </style> </head> <body background= "img/fondo_imaxes.JPG"> <?php function Conectarse() { $db_host="localhost"; $db_nombre="carrete_es_db"; $db_user="carrete"; $db_pass=""; $link=mysql_connect($db_host, $db_user, $db_pass); echo $link ; mysql_select_db($db_nombre ,$link); return $link; } ?> <div class="photo"> <dl style="left: 100px; width: 495px; top: 100px; height: 358px;"> <font color="white"> <dt><b>Fotos </b> <i>de </i> Amigos do caurel</dt> <dd>Aqui podedes atopar fotografias de amigos do Caurel.</dd> <dd>Se tes fotos que desexes que aparezan aquí ,faimo saber por correo en [email protected].</dd> <dd>Podes pulsar nas imaxes para agrandalas.<br> NOTE: Algúns navegadores pode que non visualicen correctamente as fotos.Aconséllovos Firefox..</dd> <dd>Estas fotografías teñen varios autores,todos eles amigos do Caurel.</dd> <dd>Para cerrar as fotografias aumentadas pulsa na 'X' .<b><br> Podes ter algún problema co explorer.Se non das cambiado de foto,preme no enlace <br> Se usas Explorer,recoméndoche <a title="Descarga o Firefox " target="_new" href="http://tools.google.com/firefox/toolbar/bundle/intl/es/install.html?hl=es&ai=BQ13Pn-Q0R_WQEIGIwQGT-ciyDNGe8hfFq_b-AcWNtwEAEAEg6ZrKBDgBUIKsiPr7_____wFg1bXXguwIoAG1lcj9A7IBFnd3dy5kaWZ1bmRlZmlyZWZveC5jb23IAQHaAT5odHRwOi8vd3d3LmRpZnVuZGVmaXJlZm94LmNvbS9kZXNjYXJnYXItbW96aWxsYS1maXJlZm94LWdyYXRpc4ACAagDAw&gclid=CN6Gmrft0I8CFQ4iQgodAQwDAQ"><font color="white"> Firefox (seguridade,rapidez, configuración)</font></a> </b><br> </dd> </font> </dl> <ul class="topic"> <li><a class="set" href="#Portraits">Espeoloxía<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <?php Conectarse() ; $sql = " SELECT id, nome, observacions FROM imax where tipo= 'espeleo'"; $result = mysql_query($sql); $row = mysql_fetch_array($result); while ($row = mysql_fetch_array($result)) { echo" <li><a href='#'".$row["id"]." foto'><img src='".$row["nome"]."' alt='' title=''><img class='large' src='".$row["nome"]."' alt='' title=''></a></li>"; } ?> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="topic"><a class="set" href="#Landscapes">Esmorga<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <?php Conectarse() ; $sql= " SELECT id, nome, observacions FROM imax where tipo= 'esmorga'"; $result = mysql_query($sql); $row = mysql_fetch_array($result); while ($row = mysql_fetch_array($result)) { $fotos++; echo" <li><a href='#'".$fotos." foto'><img src='".$row["nome"]."' alt='' title=''><img class='large' src='".$row["nome"]."' alt='' title='".$row["observaciones"]." '></a></li>"; } ?> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="topic"><a class="set" href="#Birds">Esmorga<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="topic"><a class="set" href="#Birds"/>Varias<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <br class="clear"> </div> </body> </html>
////PORFAVOR NO SE QUE MAS HACER//
muchas gracias
Este tema le ha gustado a 1 personas