Ayudaa, HTML Rollover

javi_23 · #1 (**permalink**) 07/03/2012, 07:13

Hola.
Estoy intentando hacer en un sitio propio, una botonera similar a la de este sitio:

http://www.rawnarch.com/cedar_rapids_federal.html

La botonera de la izquierda, que al pasar el mouse sobre los botones, aparezca una imagen miniatura. No se si se utiliza css o js, etc.

En ese sitio está hecho con flash, pero necesito armarlo sin salir del HTML.

Gracias por las respuestas.

maycolalvarez · #2 (**permalink**) 07/03/2012, 08:07

se puede hacer con CSS o Javascript, pero no sólo depende de HTML

IsaBelM · #3 (**permalink**) 07/03/2012, 08:15

si la estructura del layout fuera distinta, podrías hacerlo con css. por lo tanto lo único que te queda es hacerlo con javascript.
necesitarás un bloque (donde aparecerá imagen), o una imagen transparente, asignarle a cada link los eventos (onmouseover y onmouseout) y la función que será invocada cuando se produzca esos eventos.
si usas una imagen transparente lo único que has de hacer es cambiar su src. por el contrario si usas un bloque, tendrás que usar innerHTML para insertar la nueva imagen.

hay alguna otro forma que puedes usar, se trata de hecharle un poco de imaginación

pd: upsss!! sí que he tardado. sorry!!

javi_23 · #4 (**permalink**) 07/03/2012, 11:05

Hola, Gracias por sus respuestas.
Estoy intentando hacer lo que decis IsaBelM.

Igual creo que me expresé mal con lo de no salis de HTML, quise decir NO usar flash para hacerlo. Pero si usar css.
Es menos dificultoso con CSS??

emprear · #5 (**permalink**) 07/03/2012, 13:01

Con css podés hacer algo asi

Código HTML:

Ver original<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
 
/*  código para el Tooltip  */
.tip {
position: relative;
cursor: default;
}
.tip span {
display: none;
position: absolute;
width: 250px;
z-index: 100;
top: 15px;
left: 20px;
width: 225px;
padding: 5px;
}
 
*:hover#l1 span {
display: block;
left: 0px;
top: -160px;
padding: 0;
margin: 0;
}
 
*:hover#l2 span {
display: block;
left: 0px;
top: -200px;
padding: 0;
margin: 0;
}
 
*:hover#l3 span {
display: block;
left: 0px;
top: -240px;
padding: 0;
margin: 0;
}
 
*:hover#l4 span {
display: block;
left: 0px;
top: -280px;
padding: 0;
margin: 0;
}
 
 
a.tip{
cursor: pointer;
display: block;
width: 250px;
height: 30px;
text-decoration: none;
color: #000;
padding: 5px 0;
margin: 0;
}
 
/*]]>*/
</style>
</head>
<body>
 
<div style="padding: 160px 0 0 0; width: 250px; background-color: #ccc;">
 
<a id="l1" href="#" class="tip">New Performing Arts and Humanities Facility <span><img alt='' src ='espacio.jpg' width='240' height='100' />
</span></a>
 
<a id="l2" href="#" class="tip">New Town on the Napa River <span><img alt='' src ='d.png' width='240' height='100' />
</span></a>
 
<a id="l3" href="#" class="tip">Texto del link 3 <span><img alt='' src ='espacio.jpg' width='240' height='100' />
</span></a>
 
<a id="l4" href="#" class="tip">Texto del link 3 <span><img alt='' src ='d.png' width='240' height='100' />
</span></a>
</div>
</body>
</html>

Fijate que el top negativo entre link y link crece segun sea el alto de a.tip más el padding (esto dependerá si tus textos puedan tener una o más lineas).
Y la capa contenedora tendrá que tener un padding-top lo suficientemente alto para poder contener el alto de la imagen (es a partir de ahi en que empiezas a sumar los top negativos, en el ejemplo el link 1 arranca en -160 px
Saludos

IsaBelM · #6 (**permalink**) 08/03/2012, 14:51

a ver, con este layout se puede hacer

Cita:

el css asociado sería este

Cita:

#cont {
width: 100px;
padding: 100px 0 0 0;
border: 1px solid red;
}

#cont a {
display: block;
margin-top: 20px;
}

#img, #img img {
display: none;
}

#cont a:hover ~ div#img {
display: block;
position: relative;
left: 0;
top: -200px; /* es una estimación */
}

#cont a:hover#a1 ~ div#img #i1, #cont a:hover#a2 ~ div#img #i2, #cont a:hover#a3 ~ div#img #i3, #cont a:hover#a4 ~ div#img #i4 {
display: block;
position: absolute;
left: 0;
top: 0;
}