Foros del Web » Creando para Internet » HTML »

Implementar un rollover

Estas en el tema de Implementar un rollover en el foro de HTML en Foros del Web. Hola, Quiero hacer un rollover de manera que cuando pasas el ratón por encima de la primera imagen se despliegue a la derecha haciendo que ...
  #1 (permalink)  
Antiguo 15/11/2008, 11:20
 
Fecha de Ingreso: noviembre-2008
Mensajes: 48
Antigüedad: 15 años, 4 meses
Puntos: 1
Implementar un rollover

Hola,

Quiero hacer un rollover de manera que cuando pasas el ratón por encima de la primera imagen se despliegue a la derecha haciendo que la imagen de la izquierda y la de la derecha sea una imagen más grande en total. Sin embargo, me gustaría que toda la imagen (la parte izquierda y la derecha) fuesen clicables ya que dirigirán a un link.

El problema me lo encuentro a que cuando muevo mi ratón hacia la derecha, esta segunda imagen desaparece. ¿Existe alguna manera de hacer que la imagen derecha se mantenga si muevo el ratón hacia ella y que sólo desaparezca si me voy hacia arriba, abajo o izquierda?

Había pensado en hacer una imagen en total, pero si vengo con el ratón desde la derecha de la pantalla, cuando pase por encima del lado vacío desaparecerá, y éste tampoco es lo que quiero hacer...

¿Alguna ayuda?

Gracias.
  #2 (permalink)  
Antiguo 15/11/2008, 11:50
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Implementar un rollover

Mira a ver si te refieres a algo como esto
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 15/11/2008, 11:51
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 16 años
Puntos: 53
Respuesta: Implementar un rollover

Yo creo... que esto se puede hacer con css...
aunque no estoy seguro de que pueda hacerlo...
Espérate que vengan los que saben más...
De todos modos... mira estos ejemplos de menú a ver si alguno se asemeja...

De todas formas podrías especificar si lo que quieres es que tu menú sea vertical y despliegue a horizontal... u horizontal a horizontal...

Aresillo!!
  #4 (permalink)  
Antiguo 15/11/2008, 11:52
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 16 años
Puntos: 53
Respuesta: Implementar un rollover


Toma choque!
La página que te ponía es del señor Mikmoro!!!
Espero a ver que te comenta él!

Aresillo!!
  #5 (permalink)  
Antiguo 15/11/2008, 11:54
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Implementar un rollover



Creo que el ejemplo que he puesto es exactamente lo que pide. Veremos si se había explicado bien o si yo he entendido bien.
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 16/11/2008, 11:20
 
Fecha de Ingreso: noviembre-2008
Mensajes: 48
Antigüedad: 15 años, 4 meses
Puntos: 1
Respuesta: Implementar un rollover

Mikmoro, Aresillo, muchísimas gracias. Es precisamente eso lo que quería :) Gracias, de verdad.
  #7 (permalink)  
Antiguo 17/11/2008, 15:05
 
Fecha de Ingreso: noviembre-2008
Mensajes: 48
Antigüedad: 15 años, 4 meses
Puntos: 1
Respuesta: Implementar un rollover

Lo he intentado realizar con el ejemplo que me poniáis de http://www.araudi.net/forosdelweb/graccurris.html pero hay algo que no consigo hacer.

De la imagen del ejemplo, en realidad hay 3 imágenes. ¿Cómo podría hacer para que cada una de estas tres imágenes fuese a un enlace diferente? No hago más que darle vueltas y no lo consigo.

Además, hay otra cosa que no entiendo (aunque funciona) y es que dentro del <body> no cierras la etiqueta del enlace, es decir, queda así:

<body>
<a href="http://www.araudi.net"><span></span>
</body>

Funcionar funciona, pero si la cierro para que el navegador no dé un error de código, ya no funciona como debería. Sólo por curiosidad, ¿hay alguna explicación al respecto?

Muchas gracias y si me podéis ayudar con el enlace diferente a cada una de las tres imágenes con el ejemplo que me ponías, sería genial.

Saludos.
  #8 (permalink)  
Antiguo 17/11/2008, 15:57
 
Fecha de Ingreso: noviembre-2008
Mensajes: 48
Antigüedad: 15 años, 4 meses
Puntos: 1
Respuesta: Implementar un rollover

Hola otra vez :)

De hecho, he visto que con esto ya me iría genial http://www.araudi.net/Desplegables/menu_desplegable6.html

Pero me falta el css donde le puedo decir que el menú se despliegue de izquierda a derecha, pero como está en alguna carpeta por dentro de la web, no consigo saber cómo funcionaría. ¿Me puedes ayudar?

Muchas gracias por adelantado.
  #9 (permalink)  
Antiguo 17/11/2008, 15:58
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 16 años
Puntos: 53
Respuesta: Implementar un rollover

Mik, se pueden poner dos spam y así se conseguiría?

Aresillo!!
PD: No investigo que estoy liao con el diseño de duelo..
  #10 (permalink)  
Antiguo 17/11/2008, 16:23
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Implementar un rollover

En primer lugar: la imagen es sólo una, que hace tiempo la monté con tres imágenes para una chorrada, pero la del ejemplo es sólo una:



luego, lo de no cerrar el enlace es una metedura de pata por hacerlo en minuto y medio:

Cita:
<body>
<a href="http://www.araudi.net"><span></span></a>
</body>
Debe estar cerrado, por supuesto. Si la cierras en su sitio debe seguir funcionando (y de hecho lo hace).

Para hacer que sean tres enlaces hay que hacerlo de otra manera distinta, y un poco más complicada (como en el desplegable número 6 que comentas).

Para el menu 6 que comentas: en cualquier código de esa web, como en la mayoría, sólo tienes que mirar el código fuente, buscar a dónde apunta la css y pegar la dirección relativa en el navegador:

http://www.araudi.net/Desplegables/css/menu-6.css

A ver si eres capaz de sacar con eso lo que buscas.
__________________
Visita mi nueva web idplus.org
  #11 (permalink)  
Antiguo 17/11/2008, 16:25
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Implementar un rollover

Cita:
Iniciado por Aresillo Ver Mensaje
Mik, se pueden poner dos spam y así se conseguiría?

Aresillo!!
PD: No investigo que estoy liao con el diseño de duelo..
No, porque deben ser enlaces, y además independientes del primer enlace, es decir, no pueden estar dentro de él, lo que complica la cosa, no tanto para FF y demás, pero sí para IE (6 y 7).

Hecha un vistazo al menu 6 del que habla y verás que se complica un poco.
__________________
Visita mi nueva web idplus.org
  #12 (permalink)  
Antiguo 17/11/2008, 17:26
 
Fecha de Ingreso: noviembre-2008
Mensajes: 48
Antigüedad: 15 años, 4 meses
Puntos: 1
Respuesta: Implementar un rollover

Muchas gracias! No estaba escribiendo la ruta (no por falta de intentos) pero me iba a un nivel anterior y claro, no está :)

Claro, el del desplegable es mucho más sencillo, la cuestión es que si voy de la derecha hacia la izquierda, ya aparecen los menús sin haber llegado a ellos, y bueno, si no tengo otro remedio es lo que haré, pero desde mi punto de vista no me parece la solución 100% buena...

Gracias en cualquier caso :)
  #13 (permalink)  
Antiguo 17/11/2008, 17:46
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Implementar un rollover

Ah, pero eso tiene fácil solución: añade un width al selector menú:

#menu { font-size: 0.7em;
margin: 20px;
position: relative;
width: 142px;
}

Es que como lo hice sin intención de usarlo nunca para nada, no había tocado eso, pero lo cierto es que está mejor, claro.

Vuelve a coger el html y la css, que además he corregido un fallito que tenía con IE7.
__________________
Visita mi nueva web idplus.org

Última edición por Mikmoro; 18/11/2008 a las 05:37 Razón: Corrección
  #14 (permalink)  
Antiguo 18/11/2008, 05:31
 
Fecha de Ingreso: noviembre-2008
Mensajes: 48
Antigüedad: 15 años, 4 meses
Puntos: 1
Respuesta: Implementar un rollover

Pues lo voy a intentar esta tarde a ver si lo consigo y os digo.

Muchísimas gracias por la ayuda :)
  #15 (permalink)  
Antiguo 18/11/2008, 15:36
 
Fecha de Ingreso: noviembre-2008
Mensajes: 48
Antigüedad: 15 años, 4 meses
Puntos: 1
Respuesta: Implementar un rollover

Genial! Ahora sí me funciona más o menos como quiera. Lo he probado con un borrador, y funciona con la idea que quería, así que muchísimas gracias, de verdad. Ahora tengo que implementarlo correctamente donde y como quiero :)

Sólo una pregunta, ¿qué significa, o qué función tiene, el !important del css?

Saludos.
  #16 (permalink)  
Antiguo 18/11/2008, 15:40
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 18 años, 11 meses
Puntos: 839
Respuesta: Implementar un rollover

Lo del important ya se ha tratado en varias ocasiones en el foro de CSS.

Por ejemplo:
http://www.forosdelweb.com/f53/que-important-642498/
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #17 (permalink)  
Antiguo 25/11/2008, 09:29
 
Fecha de Ingreso: noviembre-2008
Mensajes: 48
Antigüedad: 15 años, 4 meses
Puntos: 1
Respuesta: Implementar un rollover

Gracias a todos con la respuesta.

Por fin he conseguido implementarlo con mis imágenes y lo que necesitaba. Cuando tenga la web finalizada os pasaré el enlace, ya que todavía tengo que pulir algunas cosas y que, como aprendiz, voy modificando y rectificando sobre la marcha. Pero tengo otra pregunta y que no consigo solventar.

Resulta que este menú lo metí dentro de una <table> para ponerle un border="1" negro, y a pesar de que a la <table> le digo align="center", se me queda arriba a la izquierda y no centrada en la página.

Soy capaz de meterle unos márgenes arriba y a la izquierda, pero me gustaría que la tabla ésta estuviese centrada independientemente de las dimensiones de la pantalla del navegador. ¿Alguien tiene alguna idea? Yo de momento le he dado vueltas en 3 días diferentes y no consigo hacerlo :(

Gracias una vez más.
  #18 (permalink)  
Antiguo 25/11/2008, 10:58
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Implementar un rollover

¿Centrado horizontal o vertical? ¿cómo es el código de la tabla? ¿y su css?
__________________
Visita mi nueva web idplus.org
  #19 (permalink)  
Antiguo 25/11/2008, 16:13
 
Fecha de Ingreso: noviembre-2008
Mensajes: 48
Antigüedad: 15 años, 4 meses
Puntos: 1
Respuesta: Implementar un rollover

La tabla es así:

Código HTML:
<body>
<table width="768" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000">
<tr><td>
<div id="menu">
<ul>
  <li class="nivel1"><a href="es.html" class="nivel1 primera"><img src="img/es_0.gif" height="88" /></a>
<!--[if lte IE 6]><a href="#" class="nivel1ie primera">Opción 1<table class="falsa"><tr><td><![endif]-->
	<ul id="primero">
		<li><a href="es.html"><img src="img/es_1.gif" height="88" /></a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
  </li>
  <li class="nivel1"><a href="esta.html" class="nivel1"><img src="img/esta_0.gif" height="34" /></a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
	<ul>
		<li><a href="esta.html"><img src="img/esta_1.gif" height="34" /></a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
  <li class="nivel1"><a href="te.html" class="nivel1"><img src="img/te_0.gif" height="34" /></a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]-->
	<ul>
		<li><a href="te.html"><img src="img/te_1.gif" height="34" /></a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
  <li class="nivel1"><a href="voldria.html" class="nivel1"><img src="img/voldria_0.gif" height="58" /></a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]-->
	<ul>
		<li><a href="voldria.html"><img src="img/voldria_1.gif" height="58" /></a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
  <li class="nivel1"><a href="#" class="nivel1"><img src="img/e_0.gif" height="36" /></a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
	<ul>
		<li><a href="escultures.html"><img src="img/e_1.gif" height="36" /></a></li>
		<li><a href="escultors.html"><img src="img/e_2.gif" height="36" /></a></li>
	</ul>
    <li class="nivel1"><a href="#" class="nivel1"><img src="img/t_0.gif" height="36" /></a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
	<ul>
		<li><a href="taller.html"><img src="img/t_1.gif" height="36" /></a></li>
		<li><a href="agenda.html"><img src="img/t_2.gif" height="36" /></a></li>
	</ul><li class="nivel1"><a href="#" class="nivel1"><img src="img/imatge_sense_link.gif" height="29" /></a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
	<ul>
		<li></li>
	</ul><li class="nivel1"><a href="vols" class="nivel1"><img src="img/vols_0.gif" height="63" /></a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
	<ul>
		<li><a href="vols"><img src="img/vols_1.gif" height="63" /></a></li>
	</ul><li class="nivel1"><a href="#" class="nivel1"><img src="img/ensdones_0.gif" height="122" /></a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
	<ul>
		<li><a href="suportmoral.html"><img src="img/ensdones_1.gif" height="122" /></a></li>
		<li><a href="suporteconomic.html"><img src="img/ensdones_2.gif" height="122" /></a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</td>
</tr>
<tr>
    <td><div align="center" class="style1">© 2008 bla bla</div></td>
  </tr>
</table>
<div align="center"><br />
  <span class="style2">Bla bla <span class="style3"><a href="http://www.blabla.com" target="_blank">Bla bla</a></span></span></div>
</body> 
Y el css es el mismo que me cogí prestado, ligeramente modificado con lo que necesito:

Código HTML:
* { 
margin: 0px;
padding: 0px; 
outline: 0;
}

html, body {
width: 768px;
border: 0;
}

body { 
background: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#menu {  
font-size: 0.7em;
margin: 15px;
width: 164px;
}

#menu ul { 
list-style-type: none;
}

#menu ul li a.nivel1, 
#menu ul li a.nivel1ie { 
width: 164px;
}

#menu ul li a.primera {

}

#menu ul li a {
text-decoration: none;
color: #fff;
}

#menu ul li:hover {
position: relative;
color: #000;
}

#menu ul li a:hover, 
#menu ul li:hover a.nivel1 {
color: #000;
position: relative;
}

#menu ul li a.nivel1 {
display: block!important;
display: none;
position: relative;
}

#menu ul li ul {
display: none;
}

#menu ul li a:hover ul, 
#menu ul li:hover ul {
display: block;
position: absolute;
top:-1px!important;
top: -22px;
left:150px!important;
left: 152px;
width: 800px;
}

#menu ul li a:hover ul
#primero, 
#menu ul li:hover ul
#primero {
top:0px!important;
top: -22px;
}

#menu ul li ul li {
display:inline;
}

#menu ul li ul li a {
width: 320px;
float: left;
color: #000;
margin-left: -2px;

}

#menu ul li ul li a:hover {
position: relative;
color: #FFF;
}

table.falsa {
border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
El centrado de la tabla me gustaría que fuese tanto vertical como horizontal, es decir, que quede justo en el centro del navegador tanto si éste es más grande como más pequeño, aunque el tamaño de la tabla es fijo.

Por otro lado, me encuentro con el problema de que las imágenes que quiero poner en las diferentes opciones no son todas del mismo tamaño, y claro, hay alguna que se me solapa con otra porque todas tienen la misma medida en el css. ¿Debería realizar otro css para estos casos donde las medidas son diferentes (sólo me pasa en un caso) o existe alguna manera de arreglarlo?

Muchas gracias, una vez más.
  #20 (permalink)  
Antiguo 25/11/2008, 16:54
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Implementar un rollover

¿Lo has metido todo en una tabla sólo para que tuviera un borde? porque esto no es necesario: encierras todo dentro de un contenedor:

<div id="contenedor">
[...]
</div>

y le pones en la css:

#contenedor {width: 768px;
margin: 0 auto;
border: 1px solid #000;}

Quitando el width: 768px; del selector "html, body" que tienes puesto se centrará todo y tendrás el borde negro que necesitas.

El centrado vertical es más complicado, por lo que es imprescindible saber si el alto es fijo como dices al final,

Cita:
aunque el tamaño de la tabla es fijo.
o variará como dices antes

Cita:
tanto si éste es más grande como más pequeño
__________________
Visita mi nueva web idplus.org
  #21 (permalink)  
Antiguo 26/11/2008, 05:15
 
Fecha de Ingreso: noviembre-2008
Mensajes: 48
Antigüedad: 15 años, 4 meses
Puntos: 1
Respuesta: Implementar un rollover

Sí, lo he puesto todo dentro de una tabla para que tuviese el borde, ya que si al css que ya tenía le ponía borde, no quedaba como yo quería, y como de html sé más que de css, pues me las apañé como buenamente podía. Esta tarde intentaré implementar el contenedor a ver qué tal.

El alto de la tabla es fijo porque el menú también lo es, sólo que la tabla ya le pone el borde automáticamente en su tamaño. No sé si habría que decírselo al css de alguna manera. De todas maneras, esta noche investigaré a ver si lo consigo. Si no, volveré a preguntar :)

Lo que me refiero al diferente tamaño es a los navegadores. Para explicarme mejor, imagínate que solo tengo una fotografía y quiero que ésta esté en el centro del navegador. Si hago un poco más pequeño el navegador, ésta se moverá un poco para centrarse en el nuevo tamaño del navegador, pero el tamaño de la fotografía seguirá siendo el mismo siempre. Esto mismo, pero para el cuadro donde quiero poner todo el menú.

Gracias de nuevo :)
  #22 (permalink)  
Antiguo 26/11/2008, 05:58
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Implementar un rollover

Sí, de acuerdo. Eso no es problema. ¿Tienes el alto exacto de la tabla (que luego será un contenedor ?.

Si es así es sencillo: le pones posición relativa, le das un desplazamiento superior del 50% y luego un margen superior negativo de la mitad de su tamaño. Te pongo un ejemplo:

#contenedor {height: 500px;
position: relative;
top: 50%;
margin-top: -250px;
}

Con esto se deberá centrar verticalmente en cualqueir resolución.
__________________
Visita mi nueva web idplus.org
  #23 (permalink)  
Antiguo 27/11/2008, 15:02
 
Fecha de Ingreso: noviembre-2008
Mensajes: 48
Antigüedad: 15 años, 4 meses
Puntos: 1
De acuerdo Respuesta: Implementar un rollover

Gracias gracias y más gracias.

De momento, creo que me funciona con lo que quiero hacer así que ahora mismo está perfecto :)


Muchas gracias por las ayudas, de verdad :)
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 00:07.