Tema: Abrir imagen al pasar el mouse sobre un texto
Ver Mensaje Individual
  #7 (permalink)  
Antiguo 03/12/2010, 17:18
kseso?
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: Abrir imagen al pasar el mouse sobre un texto
Cita:
Iniciado por Ag666 Ver Mensaje
Cita:
Iniciado por Iniciado por [B
SPAWN3000[/B] ]No lo puedes hacer con CSS, debes usar tambien javascript...y las imagenes deben cargarse al principio de la pagina en un div oculto(Si no se desea usar ajax...que en este caso no es recomendable y si las imagenes no son muy grandes).
compañero no es mi intención llevarle la contraria, pero en que se basa para afirmar que no se puede hacer y que se debe usar ajax obligatoriamente...

soy yo o aun esperamos un ejemplo del efecto deseado del compañero, en dado caso si es posible realizarlo en css usando los selectores y pseudo clases adecuadas

y si no me crees checate este ejemplo expuesto por el compañero kseso? hace algunos meses (notese el efecto del boton enviar)

http://bit.ly/9XzpAI
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>