Re: [Ovillo] Duda Rollover
Aupa
En el anterior mail cuando decía que la primera opción ya me convencía
era exáctamente esta.
gracias a todos sois unos cracks
El 16/10/2008, a las 19:39, Ramón Corominas escribió:
Para mí la mejor técnica es la que comentamos hace poco de meter bajo
la alfombra.
Colocas la imagen como fondo de un span, sobre el texto del enlace
que
puede ir en otro span, por ejemplo (a lo mejor ni siquiera necesitas
ese
segundo span). Ese fondo tapará al texto (que tienes que dimensionar
bien para que no se salga, claro), y cuando hagas
el :active, :hover o
:focus en el a, colocas la imagen de reemplazo al span superior.
Más o menos:
...
ul id=menu
li id=li-1a href=1.htmspan class=bkg/spanspan
class=txtEnlace 1/span/a/li
...
/ul
#menu li, #menu li a, #menu li a span {
display: block;
position: relative;
width: 4em;
height: 1em;
}
#menu li a span.texto {
z-index: -1;
position: absolute;
font-size: 1em;
}
#menu li a span.bkg {
z-index: 1;
position: absolute;
background-repeat: no-repeat;
}
#menu li#li-1 a:link span.bkg { background-image: url('menu1-
lnk.png'); }
#menu li#li-1 a:active span.bkg ,
#menu li#li-1 a:hover span.bkg ,
#menu li#li-1 a:focus span.bkg { background-image: url('menu1-
hov.png'); }
Creo que algo así tiraría bien... Ya nos contarás guiño
Saludín,
Ramón.
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente
dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Duda Rollover
No entiendo el sentido que el menu sea con imagenes, en vez de ser fondo por css. ¿Para que queres que se vea esa imagen igual con los estilos deshabilitados? Quedaría fuera de contexto. Y no es necesario usar javascript, si los menus son links. (a) 2008/10/16 Martin Etxauri [EMAIL PROTECTED] Hola listeros. Vengo con una pregunta sobre rollovers La cuestión es que quiero hacer un menú con botones que sean imágenes, bien para que sean iconos o bien para poner una tipo especial. Y que tengan rollover. Lo primero que se me ocurre es poner las imágenes de fondo por CSS y poner un :hover, pero el tema del text indent no me convence ya que si alguien navega con estilos pero sin imágenes la liamos. Para hacer un menú con imágenes sería correcto poner los botones como imágenes con el alt apropiado, pero entonces pienso que tengo que hacer los rollovers por javascript porque, si no me equivoco, para hacer un :hover por CSS las imágenes tienen que estar como background. Buscando un poquillo he encontrado este link [1] que es lo que mas me ha convencido, rollover sobre img con CSS, aunque si ves esto sin estilos tienes las imágenes repetidas... pero bueno, me funciona. Usando esta manera con estilos sin imágenes se ve, sin estilos con imágenes también y sin estilos y sin imágenes también. y bueno se me ha ocurrido consultar por aquí a ver que opináis de este sistema o si tenéis algún otro sistema milagroso por ahí ;) gracias a todos martin p.d: he hecho una pequeña búsqueda en los archivos pero no ha sido muy satisfactoria... perdón si esto está tratado y re-tratado. [1] http://www.christianmontoya.com/2006/02/01/pure-css-image-rollover/ ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo -- ↓ Ignacio Ricci www.ignacioricci.com ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Duda Rollover
Hola, Martín Martin Etxauri escribió: Hola listeros. Vengo con una pregunta sobre rollovers La cuestión es que quiero hacer un menú con botones que sean imágenes, bien para que sean iconos o bien para poner una tipo especial. Y que tengan rollover. [...] Buscando un poquillo he encontrado este link [1] que es lo que mas me ha convencido, rollover sobre img con CSS, aunque si ves esto sin estilos tienes las imágenes repetidas... pero bueno, me funciona. Usando esta manera con estilos sin imágenes se ve, sin estilos con imágenes también y sin estilos y sin imágenes también. y bueno se me ha ocurrido consultar por aquí a ver que opináis de este sistema o si tenéis algún otro sistema milagroso por ahí ;) [...] [1] http://www.christianmontoya.com/2006/02/01/pure-css-image-rollover/ Sólo comentarte que ese sistema es maravilloso. Mira, te pongo un enlace con eso mismo pero además con efecto lupa, puro css: http://www.industriaoptica.com pásate por las imágenes del centro de la página ;-) ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Duda Rollover
Hola, Ignacio Ignacio Ricci escribió: No entiendo el sentido que el menu sea con imagenes, en vez de ser fondo por css. ¿Para que queres que se vea esa imagen igual con los estilos deshabilitados? Quedaría fuera de contexto. Y no es necesario usar javascript, si los menus son links. (a) Seguramente Martín quiera utilizar una tipografía concreta rara, y que sólo pueda utilizar imágenes para que se visualice. La ventaja del sistema que propone es que la imagen que hace de rollover ya está cargada (es la misma jejeje) y el efecto no sufre ni una milésima de retraso. 2008/10/16 Martin Etxauri [EMAIL PROTECTED] Hola listeros. Vengo con una pregunta sobre rollovers La cuestión es que quiero hacer un menú con botones que sean imágenes, bien para que sean iconos o bien para poner una tipo especial. Y que tengan rollover. Lo primero que se me ocurre es poner las imágenes de fondo por CSS y poner un :hover, pero el tema del text indent no me convence ya que si alguien navega con estilos pero sin imágenes la liamos. Para hacer un menú con imágenes sería correcto poner los botones como imágenes con el alt apropiado, pero entonces pienso que tengo que hacer los rollovers por javascript porque, si no me equivoco, para hacer un :hover por CSS las imágenes tienen que estar como background. Buscando un poquillo he encontrado este link [1] que es lo que mas me ha convencido, rollover sobre img con CSS, aunque si ves esto sin estilos tienes las imágenes repetidas... pero bueno, me funciona. Usando esta manera con estilos sin imágenes se ve, sin estilos con imágenes también y sin estilos y sin imágenes también. y bueno se me ha ocurrido consultar por aquí a ver que opináis de este sistema o si tenéis algún otro sistema milagroso por ahí ;) gracias a todos martin p.d: he hecho una pequeña búsqueda en los archivos pero no ha sido muy satisfactoria... perdón si esto está tratado y re-tratado. [1] http://www.christianmontoya.com/2006/02/01/pure-css-image-rollover/ ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Duda Rollover
Hola No entiendo el sentido que el menu sea con imagenes, en vez de ser fondo por css. ¿Para que queres que se vea esa imagen igual con los estilos deshabilitados? Quedaría fuera de contexto. Y no es necesario usar javascript, si los menus son links. (a) La cuestión no es que se vea la imagen con los estilos deshabilitados, la cuestión es que con los estilos habilitados pero las imágenes deshabilitadas se vea el link. si pongo la imagen como fondo de un a y me deshago del texto mediante text-indent (lo que no quiero es que se vea imagen y texto a la vez) entonces con estilos pero sin imágenes no se vería nada de nada. esa es la cuestión ;) 2008/10/16 Martin Etxauri [EMAIL PROTECTED] Hola listeros. Vengo con una pregunta sobre rollovers La cuestión es que quiero hacer un menú con botones que sean imágenes, bien para que sean iconos o bien para poner una tipo especial. Y que tengan rollover. Lo primero que se me ocurre es poner las imágenes de fondo por CSS y poner un :hover, pero el tema del text indent no me convence ya que si alguien navega con estilos pero sin imágenes la liamos. Para hacer un menú con imágenes sería correcto poner los botones como imágenes con el alt apropiado, pero entonces pienso que tengo que hacer los rollovers por javascript porque, si no me equivoco, para hacer un :hover por CSS las imágenes tienen que estar como background. Buscando un poquillo he encontrado este link [1] que es lo que mas me ha convencido, rollover sobre img con CSS, aunque si ves esto sin estilos tienes las imágenes repetidas... pero bueno, me funciona. Usando esta manera con estilos sin imágenes se ve, sin estilos con imágenes también y sin estilos y sin imágenes también. y bueno se me ha ocurrido consultar por aquí a ver que opináis de este sistema o si tenéis algún otro sistema milagroso por ahí ;) gracias a todos martin p.d: he hecho una pequeña búsqueda en los archivos pero no ha sido muy satisfactoria... perdón si esto está tratado y re-tratado. [1] http://www.christianmontoya.com/2006/02/01/pure-css-image-rollover/ ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo -- ↓ Ignacio Ricci www.ignacioricci.com ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Duda Rollover
hola El 16/10/2008, a las 18:05, Rodrigo Álvarez Virgós escribió: Hola, Martín Sólo comentarte que ese sistema es maravilloso. Mira, te pongo un enlace con eso mismo pero además con efecto lupa, puro css: http://www.industriaoptica.com pásate por las imágenes del centro de la página ;-) Claro, pero aquí las imágenes también están como fondo ¿no? la cuestión es que al deshabilitar las imágenes también se ve el link porque estamos viendo el texto también. gracias ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Duda Rollover
Unos enlaces: * http://www.dave-woods.co.uk/?p=124 * http://www.mezzoblue.com/tests/revised-image-replacement/ * http://css-tricks.com/nine-techniques-for-css-image-replacement/ * http://v2.easy-designs.net/articles/iIR/ Corrígeme si me equivoco pero no usas la técnica del text indent por si alguien navega con estilos pero sin imágenes y usas la que comentas que se ve duplicada sin estilos? ¿Por qué no hacer el hover (y sólo el hover) con javascript? (no duplicados, sin estilos ves la imagen, sin imagenes el alt, sin javascript no hay hover) ¿Por qué no sIFR: http://nettuts.com/javascript-ajax/how-to-implement-sifr3-into-your-website/? ¿Por qué no FLIR: http://nettuts.com/javascript-ajax/how-to-use-any-font-you-wish-with-flir/? La técnica perfecta no existe pero alguna se ajustará mejor que otras dependiendo de lo que quieras/necesites ;). Un saludete Ignacio Ricci escribió: No entiendo el sentido que el menu sea con imagenes, en vez de ser fondo por css. ¿Para que queres que se vea esa imagen igual con los estilos deshabilitados? Quedaría fuera de contexto. Y no es necesario usar javascript, si los menus son links. (a) 2008/10/16 Martin Etxauri [EMAIL PROTECTED] Hola listeros. Vengo con una pregunta sobre rollovers La cuestión es que quiero hacer un menú con botones que sean imágenes, bien para que sean iconos o bien para poner una tipo especial. Y que tengan rollover. Lo primero que se me ocurre es poner las imágenes de fondo por CSS y poner un :hover, pero el tema del text indent no me convence ya que si alguien navega con estilos pero sin imágenes la liamos. Para hacer un menú con imágenes sería correcto poner los botones como imágenes con el alt apropiado, pero entonces pienso que tengo que hacer los rollovers por javascript porque, si no me equivoco, para hacer un :hover por CSS las imágenes tienen que estar como background. Buscando un poquillo he encontrado este link [1] que es lo que mas me ha convencido, rollover sobre img con CSS, aunque si ves esto sin estilos tienes las imágenes repetidas... pero bueno, me funciona. Usando esta manera con estilos sin imágenes se ve, sin estilos con imágenes también y sin estilos y sin imágenes también. y bueno se me ha ocurrido consultar por aquí a ver que opináis de este sistema o si tenéis algún otro sistema milagroso por ahí ;) gracias a todos martin p.d: he hecho una pequeña búsqueda en los archivos pero no ha sido muy satisfactoria... perdón si esto está tratado y re-tratado. [1] http://www.christianmontoya.com/2006/02/01/pure-css-image-rollover/ ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo -- Mario Pérez - http://mpermon.com ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Duda Rollover
Hola El 16/10/2008, a las 18:25, Mario Pérez escribió: Unos enlaces: * http://www.dave-woods.co.uk/?p=124 * http://www.mezzoblue.com/tests/revised-image-replacement/ * http://css-tricks.com/nine-techniques-for-css-image-replacement/ * http://v2.easy-designs.net/articles/iIR/ Corrígeme si me equivoco pero no usas la técnica del text indent por si alguien navega con estilos pero sin imágenes y usas la que comentas que se ve duplicada sin estilos? ¿Por qué no hacer el hover (y sólo el hover) con javascript? (no duplicados, sin estilos ves la imagen, sin imagenes el alt, sin javascript no hay hover) ¿Por qué no sIFR: http://nettuts.com/javascript-ajax/how-to-implement-sifr3-into-your-website/? ¿Por qué no FLIR: http://nettuts.com/javascript-ajax/how-to-use-any-font-you-wish-with-flir/? La técnica perfecta no existe pero alguna se ajustará mejor que otras dependiendo de lo que quieras/necesites ;). Un saludete No te corrijo porque no te equivocas, por eso mismo pedía consejo :) Mil gracias por los enlaces y las toneladas de info que traen, a priori el primero ya me convence bastante, pero prometo estudiarme todo, que la verdad es una buena colección de técnicas. ¿porque no con javascript? me habéis pillado ;D soy diseñador y CSS si, pero javascript y php lo justo para saber mas o menos lo que leo pero no para hacerlo, esto lo dejo para los programadores y cuanto mas pueda adelantar yo mejor. Si puedo hacerlo con CSS lo hago, si no pues ya hablo con ellos. (Hombre siempre están los behaviors del Dreanweaver pero... pufff...). gracias y saludos. ___ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Duda Rollover
Para mí la mejor técnica es la que comentamos hace poco de meter bajo
la alfombra.
Colocas la imagen como fondo de un span, sobre el texto del enlace que
puede ir en otro span, por ejemplo (a lo mejor ni siquiera necesitas ese
segundo span). Ese fondo tapará al texto (que tienes que dimensionar
bien para que no se salga, claro), y cuando hagas el :active, :hover o
:focus en el a, colocas la imagen de reemplazo al span superior.
Más o menos:
...
ul id=menu
li id=li-1a href=1.htmspan class=bkg/spanspan
class=txtEnlace 1/span/a/li
...
/ul
#menu li, #menu li a, #menu li a span {
display: block;
position: relative;
width: 4em;
height: 1em;
}
#menu li a span.texto {
z-index: -1;
position: absolute;
font-size: 1em;
}
#menu li a span.bkg {
z-index: 1;
position: absolute;
background-repeat: no-repeat;
}
#menu li#li-1 a:link span.bkg { background-image: url('menu1-lnk.png'); }
#menu li#li-1 a:active span.bkg ,
#menu li#li-1 a:hover span.bkg ,
#menu li#li-1 a:focus span.bkg { background-image: url('menu1-hov.png'); }
Creo que algo así tiraría bien... Ya nos contarás guiño
Saludín,
Ramón.
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://lists.ovillo.org/mailman/listinfo/ovillo
