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

JavierHF · #1 (**permalink**) 08/10/2012, 17:34

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

patilanz · #2 (**permalink**) 08/10/2012, 23:55

Hola es muy simple:
donde los links :

Código HTML:

Ver original<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<div id="capa"><img src="" /></div>

JavierHF · #3 (**permalink**) 09/10/2012, 09:00

vi en otro post algo asi

Cita:

Iniciado por kseso?

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>Kseso? jugando con css</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<style type="text/css">
* {margin:0; padding:0; outline: none; position: relative;}
html, body {
  height: 100%;
  background: #f5f5f5;
  font-size: 1em;
  font-family: serif;
}
p a {
    display: inline-block;
    text-decoration: underline;
    position: relative;
    font-family: monospace;
    color: #f5f5f5;
    background: #999;
}
p a:hover {background: #444; color: #f5f5f5;}
p a img {display: none; }
p a:hover img {
    display: block;
    position: absolute;
    -moz-box-shadow: 3px 3px 8px #888888, -3px -3px 3px #CDCDCD;
    -webkit-box-shadow: 3px 3px 8px #888888, -3px -3px 3px #CDCDCD;
    -o-box-shadow: 3px 3px 8px #888888, -3px -3px 3px #CDCDCD;
    box-shadow: 3px 3px 8px #888888, -3px -3px 3px #CDCDCD;
}
</style>
</head>
<body>
<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>
</body>
</html>

me gusto eso , pero muestra solo imagen al pasar el mouse en el link , como seria con imagen y texto

patilanz · #4 (**permalink**) 09/10/2012, 10:04

Cita:

Iniciado por JavierHF

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