Tema: Abrir imagen al pasar el mouse sobre un texto
Ver Mensaje Individual
  #19 (permalink)  
Antiguo 29/08/2012, 10:28
Djimenezweb
 
Fecha de Ingreso: agosto-2012
Mensajes: 1
Antigüedad: 12 años, 2 meses
Puntos: 0
Respuesta: Abrir imagen al pasar el mouse sobre un texto
Cita:
Iniciado por kseso? Ver Mensaje
pues yo sí quiero llevarla, la contraria.
Sólo por ofrecer una vía a lo que suponemos que el desaparecido pretende.
Ag666, quizás sea mejor algo como lo siguiente.
Código html: 
Ver original
  1. <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <head>
  4. <title>kseso? Jugando con css</title>
  5. <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
  6. <style type="text/css">
  7. * {margin:0; padding:0; outline: None; position: Relative;}
  8. html, body {
  9.   height: 100%;
  10.   background: #f5f5f5;
  11.   font-size: 1em;
  12.   font-family: Serif;
  13. }
  14. p a {
  15.     display: Inline-block;
  16.     text-decoration: Underline;
  17.     position: Relative;
  18.     font-family: Monospace;
  19.     color: #f5f5f5;
  20.     background: #999;
  21. }
  22. p a:hover {background: #444; color: #f5f5f5;}
  23. p a img {display: None; }
  24. p a:hover img {
  25.     display: Block;
  26.     position: Absolute;
  27.     -moz-box-shadow: 3px 3px 8px #888888, -3px -3px 3px #cdcdcd;
  28.     -webkit-box-shadow: 3px 3px 8px #888888, -3px -3px 3px #cdcdcd;
  29.     -o-box-shadow: 3px 3px 8px #888888, -3px -3px 3px #cdcdcd;
  30.     box-shadow: 3px 3px 8px #888888, -3px -3px 3px #cdcdcd;
  31. }
  32. </style>
  33. </head>
  34. <body>
  35. <p>lorem ipsum dolor <a href="#" class="tooltip" title="tooltip">sit amet consectetuer<img src="http://img225.imageshack.us/img225/8876/neversayneveragainirvin.jpg" alt="imagen" /></a> id mauris eleifend volutpat justo. Semper convallis fames dolor augue in sed dapibus eget nisl auctor. Eros ante adipiscing pulvinar dolor turpis mauris mauris adipiscing pellentesque eros. Sit elit justo nunc habitasse nisl vel pulvinar metus sed sociis. Faucibus vestibulum donec non ridiculus laoreet malesuada justo dolor fusce parturient. Tellus tristique tempus faucibus metus suspendisse nullam dictumst sodales.</p>
  36. </body>
  37. </html>
graciasssss