Problemas
Publicado por Ale (1 intervención) el 19/07/2007 23:10:43
Abajo puse el codigo porque no puedo solucionar algo. El tema es que cuando el usuario pasa el mouse por arriba de una foto esta aparece mas grande(rollover) ahora bien en algunos casos quiero que la foto aparezca a la derecha o otras a la izquierda dandole parametro pero no logro hacer esto ya que intente agregandole una parte de codigo pegando y copiando y cambiandole algunos parametros en la function thumbnail agregandole una letra thumbnaill y cambiandole valores pero cuando la llamo me aparecen las dos imagenes pero sin hacer el efecto deseado. Gracias
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
</head>
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: -60px; /*position where enlarged image should offset horizontally */
thumbnaill:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: -60px; /*position where enlarged image should offset horizontally */
}
</style>
<body>
<table width="90%" height="423" border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td bgcolor="DEC290" align="center" valign="middle" style="border:3px solid white;">
<a class="thumbnail" href="#thumb"><img src="fotosmuebles/adornosinfantiles/102_0571.JPG" width="200" height="130" class="image"><span><img src="fotosmuebles/adornosinfantiles/102_0571g.JPG" width="400" height="263" /></span></a><br>
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td bgcolor="DEC290" align="center" valign="middle" style="border:3px solid white;">
<a class="thumbnail2" href="#thumb"><img src="fotosmuebles/adornosinfantiles/102_0571.JPG" width="200" height="130" class="image"><span><img src="fotosmuebles/adornosinfantiles/102_0571g.JPG" width="400" height="263" /></span></a><br>
</td>
<td> </td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
</head>
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: -60px; /*position where enlarged image should offset horizontally */
thumbnaill:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: -60px; /*position where enlarged image should offset horizontally */
}
</style>
<body>
<table width="90%" height="423" border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td bgcolor="DEC290" align="center" valign="middle" style="border:3px solid white;">
<a class="thumbnail" href="#thumb"><img src="fotosmuebles/adornosinfantiles/102_0571.JPG" width="200" height="130" class="image"><span><img src="fotosmuebles/adornosinfantiles/102_0571g.JPG" width="400" height="263" /></span></a><br>
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td bgcolor="DEC290" align="center" valign="middle" style="border:3px solid white;">
<a class="thumbnail2" href="#thumb"><img src="fotosmuebles/adornosinfantiles/102_0571.JPG" width="200" height="130" class="image"><span><img src="fotosmuebles/adornosinfantiles/102_0571g.JPG" width="400" height="263" /></span></a><br>
</td>
<td> </td>
</tr>
</table>
</body>
</html>
Valora esta pregunta
0