Foros del Web » Creando para Internet » HTML »

Problema con Rollover

Estas en el tema de Problema con Rollover en el foro de HTML en Foros del Web. Pues estoy haciendo un menu con rollover pero tengo un problema que me resulta bastante extraño... He hecho el primero boton del menu, lo he ...
  #1 (permalink)  
Antiguo 08/08/2008, 18:49
 
Fecha de Ingreso: febrero-2008
Mensajes: 269
Antigüedad: 9 años, 9 meses
Puntos: 5
Problema con Rollover

Pues estoy haciendo un menu con rollover pero tengo un problema que me resulta bastante extraño...

He hecho el primero boton del menu, lo he puesto y todo perfecto...el problema viene al poner el segundo, pongo este y el rollover no se muestra. Se queda la imagen como si tubiera el raton encima (las dos del menu) y no hace nada por mucho que pase el raton...Uso este codigo:

Código HTML:
<a href="URL" onMouseOver="if (document.images) document.maker1.src='NORMAL';" onMouseOut="if (document.images) document.maker1.src='HOVER';"><img src="NORMAL" width="139" height="55" name="maker1" border="0" alt="Portal"></a> 
Os dejaré dos URLs para que veais que con 1 boton si funciona pero con los dos, no...

shinobiswar.com/prueba1.html - Pagina con 1 boton
shinobiswar.com/prueba2.html - Pagina con 2 botones

Uso el mismo codigo para el segundo boton y lo pongo seguido...
  #2 (permalink)  
Antiguo 08/08/2008, 19:25
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problema con Rollover

Mira qué manera tan sencillita de hacerlo sin javascript, sólo con CSS:

Ejemplo
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 09/08/2008, 03:44
 
Fecha de Ingreso: febrero-2008
Mensajes: 269
Antigüedad: 9 años, 9 meses
Puntos: 5
Respuesta: Problema con Rollover

Vale y...Como lo has hecho? Porque en el codigo fuente veo el CSS y los dos links, copio y pego en mi documento y no salen como rollover sale con la imagen que le pongo y lo veo normal. En ese codigo no veo ningun sitio donde poner la imagen normal y luego el hover =\

Luego he copiado todo tu codigo y lo he pegado en un html junto y no sale xD Dejo la URL donde he hecho o intentado hacer, el rollover con eso que me has dicho..

shinobiswar.com/prueba3.html

Gracias por responder :)
  #4 (permalink)  
Antiguo 09/08/2008, 04:47
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problema con Rollover



Hay que ser un poco más curioso y fijarse en todo bien e investigar (no me rio de ti, sino de la sorpresa que te has debido llevar al ver que funciona y si lo coges y pegas no lo hace).

El truco se basa en el posicionamiento de la imagen de fondo. Todo empieza por hacer esta imagen:



Entonces la usas de fondo, de manera que con el enlace en reposo se ve sólo la mitad superior, y al pasar el ratón con

a:hover {background-position: left bottom;}

lo que haces es mostrar la mitad inferior.

Es un buen truco, porque además el cambio de imagen es mucho más rápido que con el onmouseover, ya que la imagen al completo está cargada y sólo cambia de posición el fondo.

No es mucho trabajo unir las imágenes de tus botones (pisado y sin pisar): yo como ves lo he hecho con dos en un minuto.
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 09/08/2008, 05:30
 
Fecha de Ingreso: febrero-2008
Mensajes: 269
Antigüedad: 9 años, 9 meses
Puntos: 5
Respuesta: Problema con Rollover

Cita:
Iniciado por Mikmoro Ver Mensaje


Hay que ser un poco más curioso y fijarse en todo bien e investigar

Uh, como iba a pensar yo que habias hecho eso con la imagen si nunca he tocado CSS xD ni ninca habia visto esta forma.

Bueno ahora supongo que si me funcionara xD

He intentado separar el codigo CSS en otro archivo...He puesto el css en la carpeta CSS y luego en el html he puesto esto...

Código HTML:
<link rel="stylesheet" type="text/css" href="CSS/style.css">
<a href="#" class="indice"></a>
<a href="#" class="faq"></a> 
dentro de la etiqueta body pero los botones no salen...Solo esta el link que si pasas el raton se nota pero la pagina se queda en blanco, que hago mal? =\ porque no se, va asi no?

Gracias por la ayuda ^^

Última edición por Vendetta; 09/08/2008 a las 05:41
  #6 (permalink)  
Antiguo 09/08/2008, 06:29
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problema con Rollover

Cita:
Iniciado por Vendetta Ver Mensaje
Uh, como iba a pensar yo que habias hecho eso con la imagen si nunca he tocado CSS xD ni ninca habia visto esta forma.
Ya, ya, supongo que nunca lo habías visto, no te ofendas.

Ahora el problema será de dirección relativa, es decir: si te has llevado la CSS a una carpeta, y las imágenes están en otra al mismo nivel, la ruta relativa que tenían los selectores para poner de fondo las imágenes:

Cita:
a.indice {width: 139px; height: 55px;background: url(img/indice.png) no-repeat;}
a.faq {width: 93px; height: 55px;background: url(img/faq.png) no-repeat;}
ya no sirve, y ahora debes indicar dónde están las imágenes de esta manera:

Cita:
a.indice {width: 139px; height: 55px;background: url(../img/indice.png) no-repeat;}
a.faq {width: 93px; height: 55px;background: url(../img/faq.png) no-repeat;}
poniendo correctamente el nombre que hayas dado a tu carpeta de imágenes.

Con eso le dices desde la hoja de estilo: en el nivel anterior al que estoy (../) en la carpeta "img", la imagen tal.

Mira a ver si era eso y si no lo subes para que podamos echarle un vistazo.
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 09/08/2008, 06:40
 
Fecha de Ingreso: febrero-2008
Mensajes: 269
Antigüedad: 9 años, 9 meses
Puntos: 5
Respuesta: Problema con Rollover

Cita:
Iniciado por Mikmoro Ver Mensaje
Ya, ya, supongo que nunca lo habías visto, no te ofendas.
No hombre, si lo habia dicho en coña =P no como ofendido jeje

Y si, era eso ya funciona a la perfeccion supongo, aun no lo he puesto en el archivo real, he estado haciendo pruebas en un html aparte pero vamos, no deberia tener problemas a la hora de cambiar las url al header del foro xD

Muchas gracias por la ayuda y de paso, como veo que sabes bastante :P Si puedes, podrias ayudarme en este tema que hice hace unos dias? ( http://www.forosdelweb.com/f4/ayuda-modificacion-del-perfil-phpbb-613081/ ) nadie me ha respondido y no se si es porque no se entiende o porque nadie lo ha visto...

Me harias un favor si me ayudaras con eso ó.ò, Gracias de nuevo decidas lo que decidas

Última edición por Vendetta; 09/08/2008 a las 06:59
  #8 (permalink)  
Antiguo 09/08/2008, 06:49
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problema con Rollover

Pues no respondí porque sólo leí "Ayuda en modificacion del Perfil", y pensaba que te referías al perfil de este foro y que habías puesto el mensaje en el foro equivocado.

No sé cómo construyes el bloque del perfil, pero si sale centrado tiene pinta de ser una tabla. Si es así, podrías probar a ponerle a la celda que contiene los datos un valign="top"

<td valign="top">...

Si no es eso, pon un enlace para poder verlo.
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 09/08/2008, 07:00
 
Fecha de Ingreso: febrero-2008
Mensajes: 269
Antigüedad: 9 años, 9 meses
Puntos: 5
Respuesta: Problema con Rollover

He editado el tema anterior, creia que estabas offline por eso edite o.o y cuando le doy a guardar veo que has respondido xD bueno, era esto:

Shit, parece que nunca vaya a terminar esto u.u

http://shinobiswar.com/prueba4.html

Sale un espacio entre el boton del faq y el de miembros ? He copiado la linea del faq y he cambiado las palabras faq por miembros, no entiendo -.-

El codigo que he usado es este

Código HTML:
a.indice, a.faq, a.miembros {display: block;float: left;}
a.indice {width: 139px; height: 55px;background: url(../images/menu1/indice-r.png) no-repeat;}
a.faq {width: 93px; height: 55px;background: url(../images/menu1/faq-r.png) no-repeat;}
a.miembros {width: 153px; height: 55px;background: url(../images/menu1/miembros-r.png) no-repeat;}
a:hover {background-position: left bottom;}
...u.u

Y en cuanto a lo del perfil, lo de valign ya esta puesto y bueno...la URL se supone que no deberia hacerla publica xD pero bue >.< luego edito y la quito:

deleted :P

Última edición por Vendetta; 09/08/2008 a las 07:18
  #10 (permalink)  
Antiguo 09/08/2008, 07:15
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problema con Rollover

Ya la puedes quitar si quieres.

Ahora miro lo otro.
__________________
Visita mi nueva web idplus.org
  #11 (permalink)  
Antiguo 09/08/2008, 07:19
 
Fecha de Ingreso: febrero-2008
Mensajes: 269
Antigüedad: 9 años, 9 meses
Puntos: 5
Respuesta: Problema con Rollover

Muchas gracias >.<

Posteo para que puedas responder sin hacer doble post :P asi queda todo mas ordenador
  #12 (permalink)  
Antiguo 09/08/2008, 07:29
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problema con Rollover



Parece mentira las cosas tan tontas en las que nos podemos equivocar: la cosa es que tu gráfico de las faq no mide 93px, sino 91, y en la css pone 93.

Me tengo que marchar. Luego miro si veo algo en lo del foro.
__________________
Visita mi nueva web idplus.org
  #13 (permalink)  
Antiguo 09/08/2008, 07:34
 
Fecha de Ingreso: febrero-2008
Mensajes: 269
Antigüedad: 9 años, 9 meses
Puntos: 5
Respuesta: Problema con Rollover

ouch siento haber molestado por eso
  #14 (permalink)  
Antiguo 09/08/2008, 10:00
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problema con Rollover

Es este td el que contiene los datos del perfil, y al que debes ponerle el valign="top"

Cita:
<td><a name="19"></a><b><span style=...
__________________
Visita mi nueva web idplus.org
  #15 (permalink)  
Antiguo 09/08/2008, 10:09
 
Fecha de Ingreso: febrero-2008
Mensajes: 269
Antigüedad: 9 años, 9 meses
Puntos: 5
Respuesta: Problema con Rollover

Anda, ya esta, muchas gracias ^^
  #16 (permalink)  
Antiguo 11/08/2008, 04:57
 
Fecha de Ingreso: febrero-2008
Mensajes: 269
Antigüedad: 9 años, 9 meses
Puntos: 5
Respuesta: Problema con Rollover

Siento volver a retomar esto, Mikmoro...la verdad es que me esta tocando los pendientes reales pero no se que pasa ahora...

Todo bien...pero entre el logo y el segundo menu hay un espacio que no se como quitarlo...Puse muchos <br> para que el segundo menu quedara abajo...Si quito un <br> el primer cuadrado del segundo menu queda al lado del logo y si añado el <br> que falta, queda ese espacio entre logo y menu =\ he mirado que los tamaños esten bien, que no pase lo de antes y estan bien =\ el espacio no esta linkeado por loq ue no es parte de ninguna imagen...

Aqui dejo la url para que veas...

http://shinobiswar.com/prueba4.html

Saludos y Gracias de new y.y
  #17 (permalink)  
Antiguo 11/08/2008, 11:32
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problema con Rollover

Quita todos los br's y añade al selector del enlace "a.m1" clear: left;

A ver qué tal.
__________________
Visita mi nueva web idplus.org
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 02:50.