Foros del Web » Programando para Internet » Javascript »

al pasar el mouse por un link aparesca un cuadro con texto e imagen

Estas en el tema de al pasar el mouse por un link aparesca un cuadro con texto e imagen en el foro de Javascript en Foros del Web. Hola, me gustaria saber como realizar esto , que al pasar el mouse por un link aparesca un cuadro con texto e imagen dentro como ...
  #1 (permalink)  
Antiguo 08/10/2012, 17:34
 
Fecha de Ingreso: octubre-2012
Mensajes: 3
Antigüedad: 10 años, 3 meses
Puntos: 0
Pregunta al pasar el mouse por un link aparesca un cuadro con texto e imagen

Hola, me gustaria saber como realizar esto , que al pasar el mouse por un link aparesca un cuadro con texto e imagen dentro como estos 2 links

http://www.dotafire.com/dota-2/forum/news/dota-v6-75-1266

tambien al pasar el raton por una imagen

http://www.dotafire.com/dota-2/heroes

si me pudieran ayudar se los agradeceria
  #2 (permalink)  
Antiguo 08/10/2012, 23:55
Avatar de patilanz  
Fecha de Ingreso: enero-2012
Mensajes: 880
Antigüedad: 11 años, 1 mes
Puntos: 29
Respuesta: al pasar el mouse por un link aparesca un cuadro con texto e imagen

Hola es muy simple:
donde los links :
Código HTML:
Ver original
  1. <a href="ssss" onmouseover="document.getElementById('nombre_de_la_capa_a_mostrar').style.visibility='visible';" onmouseout="document.getElementById('nombre_de_la_capa_a_mostrar').style.visibility='hidden';">ss</a>

Y luego la capa:

Código HTML:
Ver original
  1. <div id="capa"><img src="" /></div>
  #3 (permalink)  
Antiguo 09/10/2012, 09:00
 
Fecha de Ingreso: octubre-2012
Mensajes: 3
Antigüedad: 10 años, 3 meses
Puntos: 0
Respuesta: al pasar el mouse por un link aparesca un cuadro con texto e imagen

vi en otro post algo asi

Cita:
Iniciado por kseso? Ver Mensaje
Pues yo sí; quiero llevarla, la contraria.
Sollo 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. <title>Kseso? jugando con css</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  5. <style type="text/css">
  6. * {margin:0; padding:0; outline: none; position: relative;}
  7. html, body {
  8.   height: 100%;
  9.   background: #f5f5f5;
  10.   font-size: 1em;
  11.   font-family: serif;
  12. }
  13. p a {
  14.     display: inline-block;
  15.     text-decoration: underline;
  16.     position: relative;
  17.     font-family: monospace;
  18.     color: #f5f5f5;
  19.     background: #999;
  20. }
  21. p a:hover {background: #444; color: #f5f5f5;}
  22. p a img {display: none; }
  23. p a:hover img {
  24.     display: block;
  25.     position: absolute;
  26.     -moz-box-shadow: 3px 3px 8px #888888, -3px -3px 3px #CDCDCD;
  27.     -webkit-box-shadow: 3px 3px 8px #888888, -3px -3px 3px #CDCDCD;
  28.     -o-box-shadow: 3px 3px 8px #888888, -3px -3px 3px #CDCDCD;
  29.     box-shadow: 3px 3px 8px #888888, -3px -3px 3px #CDCDCD;
  30. }
  31. </head>
  32. <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>
  33. </body>
  34. </html>
me gusto eso , pero muestra solo imagen al pasar el mouse en el link , como seria con imagen y texto

Última edición por JavierHF; 09/10/2012 a las 09:05
  #4 (permalink)  
Antiguo 09/10/2012, 10:04
Avatar de patilanz  
Fecha de Ingreso: enero-2012
Mensajes: 880
Antigüedad: 11 años, 1 mes
Puntos: 29
Respuesta: al pasar el mouse por un link aparesca un cuadro con texto e imagen

Cita:
Iniciado por JavierHF Ver Mensaje
vi en otro post algo asi



me gusto eso , pero muestra solo imagen al pasar el mouse en el link , como seria con imagen y texto
Esque lo que as visto tu esta hecho con css y tu lo as hecho tu pregunta en javascript por lo que te di un codigo con javascript ...
Tambien creo que mi codigo es mas corto que el css.

Saludos

Etiquetas: aparesca, cuadro, link, mouse
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:10.