Re: [Ovillo] comportamiento hover
On 8/17/07, final20 [EMAIL PROTECTED] wrote:
Hay voy de metiche otra vez... facil para no subordinar todas las anclas
le pones una clase o id... aunke no se porque dices que no te acepta
hover con class a mi me va bien pero bueno...
a#over {
...
cuidado que los id deben ser unicos, no debe haber dos elementos con el
mismo id.
___
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] comportamiento hover
Hola,
El jue, 16-08-2007 a las 13:48 -0500, final20 escribió:
Pues yo lo que te recomiendo es que lo hagas usando javascript para que
funcione en IE6 ya que para IE la pseudo clase hover solo existe en los
vínculos a quedaría de esta manera:
Sólo un pequeño apunte, aún veo más de una vez que la gente sigue usando
javascript a la antigua sin usar ningún framework tipo JQuery.
Vale que a veces si sólo lo queremos para una cosa puede ser incrementar
de forma tonta el tamaño de la web (aunque JQuery sólo ocupa un 20k's)
pero lo hace todo mucho más fácil.
Por ejemplo:
$(document).ready(function () {
$('#table_results tr').hover(
function(){
$(this).addClass(img_hover);
},
function(){
$(this).removeClass(img_hover);
}
);
});
Es tan fácil que creo que no hace falta ni explicarlo. Y todo totalmente
no intrusivo, y que en principio funciona igual en todos los navegadores
(en todos realmente no, en casi todos los que se usan actualmente)
EL CSS:
style type=text/css
#IMGHover { /*Identificador de la capa que hace el hover */
width: 200px;/*Especifico el tamaño del div para que no se pase de
las dimenciones visibles de la imagen en este caso 200x200px*/
height: 200px;
background-image: url(bg.jpg);/*Ponemos la imagen que se puede ver
abajo */
background-position: top;/* especificamos la posicion de la imagen
del fondo */
background-repeat:no-repeat;/* por si las dudas le decimos ke no
repita el fondo */
}
#IMGHover:hover, #IMGHover.over {/* aqui esta la magia ponemos la pseudo
clase :hover para mozilla IE7 y le ponemos la clase over para IE esta
sera reemplazada por DOM con javascript */
background-position: bottom; /* esto es lo que hace que la imagen
cambie en este caso solo cambiamos la posicion de la imagen para que se
vea la parte de abajo*/
}
/style
EL JavaScript:
// JavaScript Document
startList = function() {// modifique el script de suckerfish para que
funcione con esta div ^^
if(document.alldocument.getElementById){// checamos que se trate de IE
overDiv = document.getElementById(IMGHover);//Obtenemos la
div ^^
overDiv.onmouseover = function() {//cuando pasen el mouse sobre
la div...
this.className += over;//le agregamos una clase en este
caso over que es la que especificamos en css
}
overDiv.onmouseout = function() {//cuando el mouse salga de la
div...
this.className = this.className.replace( over,);//le
quitamos la clase ^^
}
}
}
window.onload=startList;//cuando la cargue la pagina ^^ ejecutar la
funcion xD
El HTML:
div id=IMGHover/div
y pues bueno para que veas como funciona lo colgué en geocities Jeje
allí puedes ver el código fuente para entender mejor su funcionamiento
ya lo probe en IE6 y pues no deveria dar problemas aunque pues no
aseguro nada ya ke mi IE6 es emulado ^^
http://mx.geocities.com/nma2040/divOver/div.html
Espero te sea de utilidad ^^ Saludos!!!
LISTAS escribió:
Funciona en Explorer, pero no en Firefox... y necesito que lo haga en por
lo
menos estos 2... :(
¿A ti te funciona en ambos?
Si es así, pásame el enlace a tu calendario y lo miro. Gracias.
A.V.W.
- Original Message -
From: Jazmin Azucena Nieto Garduño [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Wednesday, August 15, 2007 3:26 PM
Subject: Re: [Ovillo] comportamiento hover
Hola buenas tardes :)
yo tengo una que estoy usando en un calendario, te envio mi codigo, espero
que te sirva
y es class
( today, es como doy de alta en mi tabla la imagen (cuando cargas la
pagina))
.today {
FONT-WEIGHT: bold;
TEXT-ALIGN:center;
BACKGROUND-IMAGE: url(cuadc.gif);
COLOR: #00;
border-bottom: 0px;
height:20px;
}
TD.today A {
FONT-WEIGHT: bold;
TEXT-ALIGN:center;
COLOR: 66;
height:20px;
}
(esta es la imagen que se ve cuando pones el link, en mi caso yo tengo la
misma que en un principio)
TD.today A:link {
FONT-WEIGHT: bold;
TEXT-ALIGN:center;
BACKGROUND-IMAGE: url(cuadc.gif);
COLOR: #66;
height:20px;
}
(Aqui esta el meollo del asunto)(pones la misma imagen que en un principio
porque quiero que aunque ya hayan entrado en el link se siga viendo igual)
TD.today A:visited {
FONT-WEIGHT: bold;
TEXT-ALIGN:center;
BACKGROUND-IMAGE: url(cuadc.gif);
COLOR: #660033;
height:20px;
}
(esta imagen se ve cuando pones el puntero sobre el link)en esta caso tengo
otra)
TD.today A:hover {
FONT-WEIGHT: bold;
TEXT-ALIGN:center;
BACKGROUND-IMAGE: url(cuadclnk.gif);
COLOR: #FF;
height:20px;
}
bueno :), espero que te sirva. (es parte del codigo de un calendario que
tengo)
bye me dices si te sirvio
Re: [Ovillo] comportamiento hover
Por ejemplo:
$(document).ready(function () {
$('#table_results tr').hover(
function(){
$(this).addClass(img_hover);
},
function(){
$(this).removeClass(img_hover);
}
);
});
He copiado el código de una web mia y me he olvidado de cambiar lo del
#table_results tr. Ahí habría que poner un identificador del elemento
que queremos que tenga el comportamiento. En este caso sería #IMGHover.
un saludo,
--
Carlos Rincón
www.neuroticweb.com
www.neuroticweb.com/blog
___
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] comportamiento hover
El ancla (A) no admite coordenadas de ancho y alto en Firefox y primos
(Ópera, etc.)... :(
1) Con CSS sólo admite ID y no CLASS;
2) Debe ser resuelto sin Javascript;
3) Con Javascript ya pasé ayer mejores soluciones.
Gracias de todos modos.
A.V.W.
- Original Message -
From: Alvarez Laurnaga, Jose Antonio [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Friday, August 17, 2007 3:53 AM
Subject: Re: [Ovillo] comportamiento hover
Veamos, si he entendido bien lo que quieres es un contenedor con una imagen
de fondo que tenga un efecto hover de cambio de imagen de fondo ¿no?
Para ello tienes dos opciones ya que como te han comentado:
El problema es que IE sólo te deja usar hover con enlaces por lo
que tendrás que usar algún hack para IE.
Opción A: usar javascript (puedes usar comentarios condicionales para
servirselo sólo a IE 6 y menores que son los que lo necesitan)
Opción B: usar sólo CSS y que el contenedor sea un ancla con unos estilos
tal que así:
a:link {
display:block;
width:200px;
height:200px;
background: url(imagen.gif) no-repeat 0 0;
}
a:hover {
background: url(imagen.gif) no-repeat 0 -200px
}
Lógicamente un enlace no es lo mismo que un div, pero tal vez te sirva. No
sé que quieres meter dentro del contenedor, ¿texto, otras imágenes...?
Lo que no entiendo es la discusión clase / ID
¿Te sirve para algo?
___
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
___
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] comportamiento hover
Hola a todos,
el comportamiento del HOVER en FF solo funciona con IDs, según comentan
en un link de desarrollo de Mozilla [1] en la sección de Limitaciones.
Probando el siguiente código:
html
head
style type=text/css
.imagenFondo {
background-image:url(images/imagen1.jpg);
background-repeat:no-repeat;
}
.imagenFondo:hover {
background-image:url(images/imagen2.jpg);
background-repeat:no-repeat;
}
/style
/head
body
div class=imagenFondo
asdadadsadsad
/div
/body
/html
en IE6 no funciona, en FF2 tampoco, pero en Opera 9.22 anda perfecto.
Saludos!
[1]http://developer.mozilla.org/es/docs/CSS_din%C3%A1mico
El día 17/08/07, LISTAS [EMAIL PROTECTED] escribió:
El ancla (A) no admite coordenadas de ancho y alto en Firefox y primos
(Ópera, etc.)... :(
1) Con CSS sólo admite ID y no CLASS;
2) Debe ser resuelto sin Javascript;
3) Con Javascript ya pasé ayer mejores soluciones.
Gracias de todos modos.
A.V.W.
- Original Message -
From: Alvarez Laurnaga, Jose Antonio [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Friday, August 17, 2007 3:53 AM
Subject: Re: [Ovillo] comportamiento hover
Veamos, si he entendido bien lo que quieres es un contenedor con una
imagen
de fondo que tenga un efecto hover de cambio de imagen de fondo ¿no?
Para ello tienes dos opciones ya que como te han comentado:
El problema es que IE sólo te deja usar hover con enlaces por lo
que tendrás que usar algún hack para IE.
Opción A: usar javascript (puedes usar comentarios condicionales para
servirselo sólo a IE 6 y menores que son los que lo necesitan)
Opción B: usar sólo CSS y que el contenedor sea un ancla con unos estilos
tal que así:
a:link {
display:block;
width:200px;
height:200px;
background: url(imagen.gif) no-repeat 0 0;
}
a:hover {
background: url(imagen.gif) no-repeat 0 -200px
}
Lógicamente un enlace no es lo mismo que un div, pero tal vez te sirva. No
sé que quieres meter dentro del contenedor, ¿texto, otras imágenes...?
Lo que no entiendo es la discusión clase / ID
¿Te sirve para algo?
___
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
___
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
--
Juan José Montes de Oca Arbós.
[EMAIL PROTECTED]
[EMAIL PROTECTED]
http://world5.monstersgame.es/?ac=vidvid=58044309
http://www.montesoft.com.ar
http://www.es-facil.com/ganar/alta?Id=64395956
___
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] comportamiento hover
LISTAS escribió:
El ancla (A) no admite coordenadas de ancho y alto en Firefox y primos
(Ópera, etc.)... :(
Eso no es cierto, si miras el ejemplo que te dieron vas a notar que le
asignaron una visualización de bloque al elemento A:
a:link {
display:block;
width:200px;
height:200px;
...
}
Todo lo que sea (o haya sido convertido a) bloque puede tener asignado
un ancho y un alto, y se ve bien en todos los navegadores.
Saludos,
Hernán Beati
--
www.saberweb.com.ar
--
___
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] comportamiento hover
Es verdad, no presté atención... Pero de todos modos, si hago eso,
subordinaré toda ancla al mismo comportamiento, ¿o me equivoco? y sólo
quiero que ocurra en sólo algunos casos.
¡¡¡Vaya bolonqui que armé con esto...!!! Aún cuando ya lo resolví, claro,
pero sigue el jaleo... y con eso se aprende más de lo que se esperaba... :)
A.V.W.
- Original Message -
From: Hernán Beati - SaberWeb.com.ar [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Friday, August 17, 2007 10:57 AM
Subject: Re: [Ovillo] comportamiento hover
LISTAS escribió:
El ancla (A) no admite coordenadas de ancho y alto en Firefox y primos
(Ópera, etc.)... :(
Eso no es cierto, si miras el ejemplo que te dieron vas a notar que le
asignaron una visualización de bloque al elemento A:
a:link {
display:block;
width:200px;
height:200px;
...
}
Todo lo que sea (o haya sido convertido a) bloque puede tener asignado
un ancho y un alto, y se ve bien en todos los navegadores.
Saludos,
Hernán Beati
--
www.saberweb.com.ar
--
___
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] comportamiento hover
¡LO TENGO!
1) En STYLE creo la clase subordinante:
.enlace {width: 100px; height: 20px}
2) creo el parentezco del subordinado:
.enlace a {display:block; background:
url(imagenes/fondo-lenguetas-1.gif)}
.enlace a:hover {background: url(imagenes/fondo-lenguetas-2.gif)}
3) En el BODY, creo el objeto afectado:
div class=enlacea href=#CON ANCLA/a/div
Y ¡voilá! Va en Explorer 6, 7... Firefox, Opera...
Gracias a todos. Y como decía: esto es un asunto colectivo.
A.V.W.
- Original Message -
From: Hernán Beati - SaberWeb.com.ar [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Friday, August 17, 2007 10:57 AM
Subject: Re: [Ovillo] comportamiento hover
LISTAS escribió:
El ancla (A) no admite coordenadas de ancho y alto en Firefox y primos
(Ópera, etc.)... :(
Eso no es cierto, si miras el ejemplo que te dieron vas a notar que le
asignaron una visualización de bloque al elemento A:
a:link {
display:block;
width:200px;
height:200px;
...
}
Todo lo que sea (o haya sido convertido a) bloque puede tener asignado
un ancho y un alto, y se ve bien en todos los navegadores.
Saludos,
Hernán Beati
--
www.saberweb.com.ar
--
___
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] comportamiento hover
Hay voy de metiche otra vez... facil para no subordinar todas las anclas
le pones una clase o id... aunke no se porque dices que no te acepta
hover con class a mi me va bien pero bueno...
a#over {
display:block;
width: 200px;
height: 200px;
background-image:url(bg.jpg);
background-position: top;
background-repeat:no-repeat;
}
a#over:hover {
background-position:bottom;
}
a href=# id=over/a
O con class ke dicen que no funca...
a.over {
display:block;
width: 200px;
height: 200px;
background-image:url(bg.jpg);
background-position: top;
background-repeat:no-repeat;
}
a.over:hover {
background-position:bottom;
}
a href=# class=over/a
LISTAS escribió:
Es verdad, no presté atención... Pero de todos modos, si hago eso,
subordinaré toda ancla al mismo comportamiento, ¿o me equivoco? y sólo
quiero que ocurra en sólo algunos casos.
¡¡¡Vaya bolonqui que armé con esto...!!! Aún cuando ya lo resolví, claro,
pero sigue el jaleo... y con eso se aprende más de lo que se esperaba... :)
A.V.W.
- Original Message -
From: Hernán Beati - SaberWeb.com.ar [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Friday, August 17, 2007 10:57 AM
Subject: Re: [Ovillo] comportamiento hover
LISTAS escribió:
El ancla (A) no admite coordenadas de ancho y alto en Firefox y primos
(Ópera, etc.)... :(
Eso no es cierto, si miras el ejemplo que te dieron vas a notar que le
asignaron una visualización de bloque al elemento A:
a:link {
display:block;
width:200px;
height:200px;
...
}
Todo lo que sea (o haya sido convertido a) bloque puede tener asignado
un ancho y un alto, y se ve bien en todos los navegadores.
Saludos,
Hernán Beati
--
www.saberweb.com.ar
--
___
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] comportamiento hover
¡¡¡Felicitaciones maestro!!! ¿Vio que Ud. no era tan...?
Ahora, estaría bueno que alguien hiciese un resumen de toda esta experiencia
en un blog y nos lo muestre, ¿no le parece?
A.V.W.
- Original Message -
From: final20 [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Friday, August 17, 2007 2:33 PM
Subject: Re: [Ovillo] comportamiento hover
Hay voy de metiche otra vez... facil para no subordinar todas las anclas
le pones una clase o id... aunke no se porque dices que no te acepta
hover con class a mi me va bien pero bueno...
a#over {
display:block;
width: 200px;
height: 200px;
background-image:url(bg.jpg);
background-position: top;
background-repeat:no-repeat;
}
a#over:hover {
background-position:bottom;
}
a href=# id=over/a
O con class ke dicen que no funca...
a.over {
display:block;
width: 200px;
height: 200px;
background-image:url(bg.jpg);
background-position: top;
background-repeat:no-repeat;
}
a.over:hover {
background-position:bottom;
}
a href=# class=over/a
LISTAS escribió:
Es verdad, no presté atención... Pero de todos modos, si hago eso,
subordinaré toda ancla al mismo comportamiento, ¿o me equivoco? y sólo
quiero que ocurra en sólo algunos casos.
¡¡¡Vaya bolonqui que armé con esto...!!! Aún cuando ya lo resolví, claro,
pero sigue el jaleo... y con eso se aprende más de lo que se esperaba...
:)
A.V.W.
- Original Message -
From: Hernán Beati - SaberWeb.com.ar [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Friday, August 17, 2007 10:57 AM
Subject: Re: [Ovillo] comportamiento hover
LISTAS escribió:
El ancla (A) no admite coordenadas de ancho y alto en Firefox y
primos
(Ópera, etc.)... :(
Eso no es cierto, si miras el ejemplo que te dieron vas a notar que le
asignaron una visualización de bloque al elemento A:
a:link {
display:block;
width:200px;
height:200px;
...
}
Todo lo que sea (o haya sido convertido a) bloque puede tener asignado
un ancho y un alto, y se ve bien en todos los navegadores.
Saludos,
Hernán Beati
--
www.saberweb.com.ar
--
___
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] comportamiento hover
Gracias. Pero hete aquí un detalle: si va a funcionar por medio de ID, no
hace falta un javascript ya que el ID es común a todos los navegadores,
ergo: mayor accesibilidad y menores recursos. El truco estaría bueno si lo
hiciese con CLASS, y no lo hace... :(
A.V.W.
- Original Message -
From: final20 [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Thursday, August 16, 2007 3:48 PM
Subject: Re: [Ovillo] comportamiento hover
Pues yo lo que te recomiendo es que lo hagas usando javascript para que
funcione en IE6 ya que para IE la pseudo clase hover solo existe en los
vínculos a quedaría de esta manera:
EL CSS:
style type=text/css
#IMGHover { /*Identificador de la capa que hace el hover */
width: 200px;/*Especifico el tamaño del div para que no se pase de
las dimenciones visibles de la imagen en este caso 200x200px*/
height: 200px;
background-image: url(bg.jpg);/*Ponemos la imagen que se puede ver
abajo */
background-position: top;/* especificamos la posicion de la imagen
del fondo */
background-repeat:no-repeat;/* por si las dudas le decimos ke no
repita el fondo */
}
#IMGHover:hover, #IMGHover.over {/* aqui esta la magia ponemos la pseudo
clase :hover para mozilla IE7 y le ponemos la clase over para IE esta
sera reemplazada por DOM con javascript */
background-position: bottom; /* esto es lo que hace que la imagen
cambie en este caso solo cambiamos la posicion de la imagen para que se
vea la parte de abajo*/
}
/style
EL JavaScript:
// JavaScript Document
startList = function() {// modifique el script de suckerfish para que
funcione con esta div ^^
if(document.alldocument.getElementById){// checamos que se trate de IE
overDiv = document.getElementById(IMGHover);//Obtenemos la
div ^^
overDiv.onmouseover = function() {//cuando pasen el mouse sobre
la div...
this.className += over;//le agregamos una clase en este
caso over que es la que especificamos en css
}
overDiv.onmouseout = function() {//cuando el mouse salga de la
div...
this.className = this.className.replace( over,);//le
quitamos la clase ^^
}
}
}
window.onload=startList;//cuando la cargue la pagina ^^ ejecutar la
funcion xD
El HTML:
div id=IMGHover/div
y pues bueno para que veas como funciona lo colgué en geocities Jeje
allí puedes ver el código fuente para entender mejor su funcionamiento
ya lo probe en IE6 y pues no deveria dar problemas aunque pues no
aseguro nada ya ke mi IE6 es emulado ^^
http://mx.geocities.com/nma2040/divOver/div.html
Espero te sea de utilidad ^^ Saludos!!!
LISTAS escribió:
Funciona en Explorer, pero no en Firefox... y necesito que lo haga en por
lo
menos estos 2... :(
¿A ti te funciona en ambos?
Si es así, pásame el enlace a tu calendario y lo miro. Gracias.
A.V.W.
- Original Message -
From: Jazmin Azucena Nieto Garduño [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Wednesday, August 15, 2007 3:26 PM
Subject: Re: [Ovillo] comportamiento hover
Hola buenas tardes :)
yo tengo una que estoy usando en un calendario, te envio mi codigo, espero
que te sirva
y es class
( today, es como doy de alta en mi tabla la imagen (cuando cargas la
pagina))
.today {
FONT-WEIGHT: bold;
TEXT-ALIGN:center;
BACKGROUND-IMAGE: url(cuadc.gif);
COLOR: #00;
border-bottom: 0px;
height:20px;
}
TD.today A {
FONT-WEIGHT: bold;
TEXT-ALIGN:center;
COLOR: 66;
height:20px;
}
(esta es la imagen que se ve cuando pones el link, en mi caso yo tengo la
misma que en un principio)
TD.today A:link {
FONT-WEIGHT: bold;
TEXT-ALIGN:center;
BACKGROUND-IMAGE: url(cuadc.gif);
COLOR: #66;
height:20px;
}
(Aqui esta el meollo del asunto)(pones la misma imagen que en un principio
porque quiero que aunque ya hayan entrado en el link se siga viendo igual)
TD.today A:visited {
FONT-WEIGHT: bold;
TEXT-ALIGN:center;
BACKGROUND-IMAGE: url(cuadc.gif);
COLOR: #660033;
height:20px;
}
(esta imagen se ve cuando pones el puntero sobre el link)en esta caso
tengo
otra)
TD.today A:hover {
FONT-WEIGHT: bold;
TEXT-ALIGN:center;
BACKGROUND-IMAGE: url(cuadclnk.gif);
COLOR: #FF;
height:20px;
}
bueno :), espero que te sirva. (es parte del codigo de un calendario que
tengo)
bye me dices si te sirvio)
- Original Message -
From: LISTAS [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Subject: Re: [Ovillo] comportamiento hover
Date: Tue, 14 Aug 2007 18:32:47 -0300
OK, funciona con ID, pero no entiendo porqué con CLASS no funciona. Yo
había
hecho todo tal cual el ejemplo sugerido pero con CLASS.
¿Alguien sabe por qué con uno sí y con el otro no?
Con Explorer lo resolví anidando un Anchor entre dos DIV... pero me
desapareció la manito del enlace, aunque enlaza perfectamente... (!!) De
modo que hice una truca exclusiva para el cursor con
Re: [Ovillo] comportamiento hover
No entiendo exactamente a que te refieres el script lo único que hace es
emular el comportamiento hover en IE6, en IE7 va bien sin el script
pero en IE6 no se acepta este comportamiento cualquier otro elemento que
no sea un a esa es la función del script emular este comportamiento
en IE6 si me pudieras explicar un poco mejor lo del id ^^ tal ves
podríamos adaptarlo para que se ajuste mas a tus necesidades ^^
LISTAS escribió:
Gracias. Pero hete aquí un detalle: si va a funcionar por medio de ID, no
hace falta un javascript ya que el ID es común a todos los navegadores,
ergo: mayor accesibilidad y menores recursos. El truco estaría bueno si lo
hiciese con CLASS, y no lo hace... :(
A.V.W.
- Original Message -
From: final20 [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Thursday, August 16, 2007 3:48 PM
Subject: Re: [Ovillo] comportamiento hover
Pues yo lo que te recomiendo es que lo hagas usando javascript para que
funcione en IE6 ya que para IE la pseudo clase hover solo existe en los
vínculos a quedaría de esta manera:
EL CSS:
style type=text/css
#IMGHover { /*Identificador de la capa que hace el hover */
width: 200px;/*Especifico el tamaño del div para que no se pase de
las dimenciones visibles de la imagen en este caso 200x200px*/
height: 200px;
background-image: url(bg.jpg);/*Ponemos la imagen que se puede ver
abajo */
background-position: top;/* especificamos la posicion de la imagen
del fondo */
background-repeat:no-repeat;/* por si las dudas le decimos ke no
repita el fondo */
}
#IMGHover:hover, #IMGHover.over {/* aqui esta la magia ponemos la pseudo
clase :hover para mozilla IE7 y le ponemos la clase over para IE esta
sera reemplazada por DOM con javascript */
background-position: bottom; /* esto es lo que hace que la imagen
cambie en este caso solo cambiamos la posicion de la imagen para que se
vea la parte de abajo*/
}
/style
EL JavaScript:
// JavaScript Document
startList = function() {// modifique el script de suckerfish para que
funcione con esta div ^^
if(document.alldocument.getElementById){// checamos que se trate de IE
overDiv = document.getElementById(IMGHover);//Obtenemos la
div ^^
overDiv.onmouseover = function() {//cuando pasen el mouse sobre
la div...
this.className += over;//le agregamos una clase en este
caso over que es la que especificamos en css
}
overDiv.onmouseout = function() {//cuando el mouse salga de la
div...
this.className = this.className.replace( over,);//le
quitamos la clase ^^
}
}
}
window.onload=startList;//cuando la cargue la pagina ^^ ejecutar la
funcion xD
El HTML:
div id=IMGHover/div
y pues bueno para que veas como funciona lo colgué en geocities Jeje
allí puedes ver el código fuente para entender mejor su funcionamiento
ya lo probe en IE6 y pues no deveria dar problemas aunque pues no
aseguro nada ya ke mi IE6 es emulado ^^
http://mx.geocities.com/nma2040/divOver/div.html
Espero te sea de utilidad ^^ Saludos!!!
LISTAS escribió:
Funciona en Explorer, pero no en Firefox... y necesito que lo haga en por
lo
menos estos 2... :(
¿A ti te funciona en ambos?
Si es así, pásame el enlace a tu calendario y lo miro. Gracias.
A.V.W.
- Original Message -
From: Jazmin Azucena Nieto Garduño [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Wednesday, August 15, 2007 3:26 PM
Subject: Re: [Ovillo] comportamiento hover
Hola buenas tardes :)
yo tengo una que estoy usando en un calendario, te envio mi codigo, espero
que te sirva
y es class
( today, es como doy de alta en mi tabla la imagen (cuando cargas la
pagina))
.today {
FONT-WEIGHT: bold;
TEXT-ALIGN:center;
BACKGROUND-IMAGE: url(cuadc.gif);
COLOR: #00;
border-bottom: 0px;
height:20px;
}
TD.today A {
FONT-WEIGHT: bold;
TEXT-ALIGN:center;
COLOR: 66;
height:20px;
}
(esta es la imagen que se ve cuando pones el link, en mi caso yo tengo la
misma que en un principio)
TD.today A:link {
FONT-WEIGHT: bold;
TEXT-ALIGN:center;
BACKGROUND-IMAGE: url(cuadc.gif);
COLOR: #66;
height:20px;
}
(Aqui esta el meollo del asunto)(pones la misma imagen que en un principio
porque quiero que aunque ya hayan entrado en el link se siga viendo igual)
TD.today A:visited {
FONT-WEIGHT: bold;
TEXT-ALIGN:center;
BACKGROUND-IMAGE: url(cuadc.gif);
COLOR: #660033;
height:20px;
}
(esta imagen se ve cuando pones el puntero sobre el link)en esta caso
tengo
otra)
TD.today A:hover {
FONT-WEIGHT: bold;
TEXT-ALIGN:center;
BACKGROUND-IMAGE: url(cuadclnk.gif);
COLOR: #FF;
height:20px;
}
bueno :), espero que te sirva. (es parte del codigo de un calendario que
tengo)
bye me dices si te sirvio)
- Original Message -
From: LISTAS [EMAIL PROTECTED]
To: Ovillo, la lista de CSS
Re: [Ovillo] comportamiento hover
¡Oh, sí, claro! Me refiero a lo siguiente: ¿para qué emular algo que ya
existe por naturaleza propia? Es como inventar la pera virtual pudiendo
comerme la verdadera.
Si lo hago por truco (javascript) lo hago más limpio entonces: le digo que
al hacer mouseover reemplace el backgroundImage y lo vuelva a reemplazar con
el mouseuot... ;-)
¡¡¡Pero yo no quiero hacerlo con Javacript!!! Porque eso sería para mí lo
más fácil y quiero resolverlo todo con CSS. Bueno, al menos, ese es el
espíritu de esta lista, ¿no?
Con Javascript puedo hacerlo inclusive con CLASS e ID indistintamente con
unos bobos códigos de 1 sola línea inventados por mi y compatibles con
Firefox, Opera, Explorer 6, 7... Pero repito: creía que se podía hacerse con
CLASS tanto como con ID pero parece que ese día los cráneos del W3C
estaban mirando una mariposilla... ¡snif!
De todos modos gracias por el código, los consejos y las recomendaciones. Y
como gentileza, va mi engendro para quien lo desee aprovechar:
html
head
titleCambios de fondo (hasta suena revolucionario)/title
style type=text/css
!--
#etiqueta, .etiqueta1 {background-image:
url(imagenes/fondo-lenguetas-1.gif); width: 70px; height: 25px}
.etiqueta2 {background-image: url(imagenes/fondo-lenguetas-2.gif); width:
70px; height: 25px}
--
/style
script type=text/javascript
function cambioFondo(nombre,ruta){
document.getElementById(nombre).style.backgroundImage=url(+ruta+)
}
function cambioClase(nombre,clase){
document.getElementById(nombre).className=clase
}
/script
/head
body
div
id=etiquetaonmouseover=cambioFondo('etiqueta','imagenes/fondo-lenguetas-2.gif');
onmouseout=cambioFondo('etiqueta','imagenes/fondo-lenguetas-1.gif')CON
ID/div
div id=esta class=etiqueta1
onmouseover=cambioClase('esta','etiqueta2');
onmouseout=cambioClase('esta','etiqueta1')CON CLASS/div
/body
/html
A.V.W.
- Original Message -
From: final20 [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Thursday, August 16, 2007 5:25 PM
Subject: Re: [Ovillo] comportamiento hover
No entiendo exactamente a que te refieres el script lo único que hace es
emular el comportamiento hover en IE6, en IE7 va bien sin el script
pero en IE6 no se acepta este comportamiento cualquier otro elemento que
no sea un a esa es la función del script emular este comportamiento
en IE6 si me pudieras explicar un poco mejor lo del id ^^ tal ves
podríamos adaptarlo para que se ajuste mas a tus necesidades ^^
LISTAS escribió:
Gracias. Pero hete aquí un detalle: si va a funcionar por medio de ID, no
hace falta un javascript ya que el ID es común a todos los navegadores,
ergo: mayor accesibilidad y menores recursos. El truco estaría bueno si lo
hiciese con CLASS, y no lo hace... :(
A.V.W.
- Original Message -
From: final20 [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Thursday, August 16, 2007 3:48 PM
Subject: Re: [Ovillo] comportamiento hover
Pues yo lo que te recomiendo es que lo hagas usando javascript para que
funcione en IE6 ya que para IE la pseudo clase hover solo existe en los
vínculos a quedaría de esta manera:
EL CSS:
style type=text/css
#IMGHover { /*Identificador de la capa que hace el hover */
width: 200px;/*Especifico el tamaño del div para que no se pase de
las dimenciones visibles de la imagen en este caso 200x200px*/
height: 200px;
background-image: url(bg.jpg);/*Ponemos la imagen que se puede ver
abajo */
background-position: top;/* especificamos la posicion de la imagen
del fondo */
background-repeat:no-repeat;/* por si las dudas le decimos ke no
repita el fondo */
}
#IMGHover:hover, #IMGHover.over {/* aqui esta la magia ponemos la pseudo
clase :hover para mozilla IE7 y le ponemos la clase over para IE esta
sera reemplazada por DOM con javascript */
background-position: bottom; /* esto es lo que hace que la imagen
cambie en este caso solo cambiamos la posicion de la imagen para que se
vea la parte de abajo*/
}
/style
EL JavaScript:
// JavaScript Document
startList = function() {// modifique el script de suckerfish para que
funcione con esta div ^^
if(document.alldocument.getElementById){// checamos que se trate de
IE
overDiv = document.getElementById(IMGHover);//Obtenemos la
div ^^
overDiv.onmouseover = function() {//cuando pasen el mouse sobre
la div...
this.className += over;//le agregamos una clase en este
caso over que es la que especificamos en css
}
overDiv.onmouseout = function() {//cuando el mouse salga de la
div...
this.className = this.className.replace( over,);//le
quitamos la clase ^^
}
}
}
window.onload=startList;//cuando la cargue la pagina ^^ ejecutar la
funcion xD
El HTML:
div id=IMGHover/div
y pues bueno para que veas como funciona lo colgué en geocities Jeje
allí puedes ver el código fuente para entender mejor su
Re: [Ovillo] comportamiento hover
Bueno... yo solo quería ayudar disculpa si te moleste con mi inutil
javascript ...
LISTAS escribió:
¡Oh, sí, claro! Me refiero a lo siguiente: ¿para qué emular algo que ya
existe por naturaleza propia? Es como inventar la pera virtual pudiendo
comerme la verdadera.
Si lo hago por truco (javascript) lo hago más limpio entonces: le digo que
al hacer mouseover reemplace el backgroundImage y lo vuelva a reemplazar con
el mouseuot... ;-)
¡¡¡Pero yo no quiero hacerlo con Javacript!!! Porque eso sería para mí lo
más fácil y quiero resolverlo todo con CSS. Bueno, al menos, ese es el
espíritu de esta lista, ¿no?
Con Javascript puedo hacerlo inclusive con CLASS e ID indistintamente con
unos bobos códigos de 1 sola línea inventados por mi y compatibles con
Firefox, Opera, Explorer 6, 7... Pero repito: creía que se podía hacerse con
CLASS tanto como con ID pero parece que ese día los cráneos del W3C
estaban mirando una mariposilla... ¡snif!
De todos modos gracias por el código, los consejos y las recomendaciones. Y
como gentileza, va mi engendro para quien lo desee aprovechar:
html
head
titleCambios de fondo (hasta suena revolucionario)/title
style type=text/css
!--
#etiqueta, .etiqueta1 {background-image:
url(imagenes/fondo-lenguetas-1.gif); width: 70px; height: 25px}
.etiqueta2 {background-image: url(imagenes/fondo-lenguetas-2.gif); width:
70px; height: 25px}
--
/style
script type=text/javascript
function cambioFondo(nombre,ruta){
document.getElementById(nombre).style.backgroundImage=url(+ruta+)
}
function cambioClase(nombre,clase){
document.getElementById(nombre).className=clase
}
/script
/head
body
div
id=etiquetaonmouseover=cambioFondo('etiqueta','imagenes/fondo-lenguetas-2.gif');
onmouseout=cambioFondo('etiqueta','imagenes/fondo-lenguetas-1.gif')CON
ID/div
div id=esta class=etiqueta1
onmouseover=cambioClase('esta','etiqueta2');
onmouseout=cambioClase('esta','etiqueta1')CON CLASS/div
/body
/html
A.V.W.
- Original Message -
From: final20 [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Thursday, August 16, 2007 5:25 PM
Subject: Re: [Ovillo] comportamiento hover
No entiendo exactamente a que te refieres el script lo único que hace es
emular el comportamiento hover en IE6, en IE7 va bien sin el script
pero en IE6 no se acepta este comportamiento cualquier otro elemento que
no sea un a esa es la función del script emular este comportamiento
en IE6 si me pudieras explicar un poco mejor lo del id ^^ tal ves
podríamos adaptarlo para que se ajuste mas a tus necesidades ^^
LISTAS escribió:
Gracias. Pero hete aquí un detalle: si va a funcionar por medio de ID, no
hace falta un javascript ya que el ID es común a todos los navegadores,
ergo: mayor accesibilidad y menores recursos. El truco estaría bueno si lo
hiciese con CLASS, y no lo hace... :(
A.V.W.
- Original Message -
From: final20 [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Thursday, August 16, 2007 3:48 PM
Subject: Re: [Ovillo] comportamiento hover
Pues yo lo que te recomiendo es que lo hagas usando javascript para que
funcione en IE6 ya que para IE la pseudo clase hover solo existe en los
vínculos a quedaría de esta manera:
EL CSS:
style type=text/css
#IMGHover { /*Identificador de la capa que hace el hover */
width: 200px;/*Especifico el tamaño del div para que no se pase de
las dimenciones visibles de la imagen en este caso 200x200px*/
height: 200px;
background-image: url(bg.jpg);/*Ponemos la imagen que se puede ver
abajo */
background-position: top;/* especificamos la posicion de la imagen
del fondo */
background-repeat:no-repeat;/* por si las dudas le decimos ke no
repita el fondo */
}
#IMGHover:hover, #IMGHover.over {/* aqui esta la magia ponemos la pseudo
clase :hover para mozilla IE7 y le ponemos la clase over para IE esta
sera reemplazada por DOM con javascript */
background-position: bottom; /* esto es lo que hace que la imagen
cambie en este caso solo cambiamos la posicion de la imagen para que se
vea la parte de abajo*/
}
/style
EL JavaScript:
// JavaScript Document
startList = function() {// modifique el script de suckerfish para que
funcione con esta div ^^
if(document.alldocument.getElementById){// checamos que se trate de
IE
overDiv = document.getElementById(IMGHover);//Obtenemos la
div ^^
overDiv.onmouseover = function() {//cuando pasen el mouse sobre
la div...
this.className += over;//le agregamos una clase en este
caso over que es la que especificamos en css
}
overDiv.onmouseout = function() {//cuando el mouse salga de la
div...
this.className = this.className.replace( over,);//le
quitamos la clase ^^
}
}
}
window.onload=startList;//cuando la cargue la pagina ^^ ejecutar la
funcion xD
Re: [Ovillo] comportamiento hover
No hombre, tu ayuda es bienvenida, ¡¡¡siempre!!! Para mí y para cualquiera.
Permítete las observaciones de toda calaña y crecerás como un roble. Yo sólo
respondí a tu pregunta, con humor pero sin ánimo de ofensa (a mi edad
considero que el humor es lo único que puede rescatarnos, inclusive, de las
ofensas). Eso sí: casi-casi me contestaste antes de enviarte mi correo.
¿Eres dedos-rápidos en el teclado, ¡eh...!?
Por otro lado, no me molestaste con tu inútil código. No hay códigos
inútiles. Hay inútiles y códigos. Y códigos entre inútiles e
inútiles que hablan en código, ja. Pero ningún código es inútil porque un
código de programación es algo que SIEMPRE dependerá de otros, es algo que
se construye de modo COLECTIVO. Internet es un fenómeno colectivo, ¡vaya!
¿O acaso todos nacimos sabiendo y vamos por la vida de uno en uno? Sin ti yo
no sería nada y sin mi, tú tampoco, creo. Por eso estamos en esta lista
compartiendo ignorancia y conocimiento y creciendo juntos. Y no estamos
solos, ni ahí...
Yo hice esas 2 tontas líneas de código copiando partes de un código
inútil que sólo funcionaba en Explorer. Pero ese código me inspiró para
hacerlo crossbrowser, de modo que no fue tan inútil como parecía a simple
vista. Bueno, basta de jaleo que ya me estoy poniendo cursi... Bay, bay y
gracias por colaborar.
A.V.W.
- Original Message -
From: final20 [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Thursday, August 16, 2007 7:32 PM
Subject: Re: [Ovillo] comportamiento hover
Bueno... yo solo quería ayudar disculpa si te moleste con mi inutil
javascript ...
LISTAS escribió:
¡Oh, sí, claro! Me refiero a lo siguiente: ¿para qué emular algo que ya
existe por naturaleza propia? Es como inventar la pera virtual pudiendo
comerme la verdadera.
Si lo hago por truco (javascript) lo hago más limpio entonces: le digo que
al hacer mouseover reemplace el backgroundImage y lo vuelva a reemplazar
con
el mouseuot... ;-)
¡¡¡Pero yo no quiero hacerlo con Javacript!!! Porque eso sería para mí lo
más fácil y quiero resolverlo todo con CSS. Bueno, al menos, ese es el
espíritu de esta lista, ¿no?
Con Javascript puedo hacerlo inclusive con CLASS e ID indistintamente con
unos bobos códigos de 1 sola línea inventados por mi y compatibles con
Firefox, Opera, Explorer 6, 7... Pero repito: creía que se podía hacerse
con
CLASS tanto como con ID pero parece que ese día los cráneos del W3C
estaban mirando una mariposilla... ¡snif!
De todos modos gracias por el código, los consejos y las recomendaciones.
Y
como gentileza, va mi engendro para quien lo desee aprovechar:
html
head
titleCambios de fondo (hasta suena revolucionario)/title
style type=text/css
!--
#etiqueta, .etiqueta1 {background-image:
url(imagenes/fondo-lenguetas-1.gif); width: 70px; height: 25px}
.etiqueta2 {background-image: url(imagenes/fondo-lenguetas-2.gif); width:
70px; height: 25px}
--
/style
script type=text/javascript
function cambioFondo(nombre,ruta){
document.getElementById(nombre).style.backgroundImage=url(+ruta+)
}
function cambioClase(nombre,clase){
document.getElementById(nombre).className=clase
}
/script
/head
body
div
id=etiquetaonmouseover=cambioFondo('etiqueta','imagenes/fondo-lenguetas-2.gif');
onmouseout=cambioFondo('etiqueta','imagenes/fondo-lenguetas-1.gif')CON
ID/div
div id=esta class=etiqueta1
onmouseover=cambioClase('esta','etiqueta2');
onmouseout=cambioClase('esta','etiqueta1')CON CLASS/div
/body
/html
A.V.W.
- Original Message -
From: final20 [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Thursday, August 16, 2007 5:25 PM
Subject: Re: [Ovillo] comportamiento hover
No entiendo exactamente a que te refieres el script lo único que hace es
emular el comportamiento hover en IE6, en IE7 va bien sin el script
pero en IE6 no se acepta este comportamiento cualquier otro elemento que
no sea un a esa es la función del script emular este comportamiento
en IE6 si me pudieras explicar un poco mejor lo del id ^^ tal ves
podríamos adaptarlo para que se ajuste mas a tus necesidades ^^
LISTAS escribió:
Gracias. Pero hete aquí un detalle: si va a funcionar por medio de ID, no
hace falta un javascript ya que el ID es común a todos los navegadores,
ergo: mayor accesibilidad y menores recursos. El truco estaría bueno si
lo
hiciese con CLASS, y no lo hace... :(
A.V.W.
- Original Message -
From: final20 [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Thursday, August 16, 2007 3:48 PM
Subject: Re: [Ovillo] comportamiento hover
Pues yo lo que te recomiendo es que lo hagas usando javascript para que
funcione en IE6 ya que para IE la pseudo clase hover solo existe en los
vínculos a quedaría de esta manera:
EL CSS:
style type=text/css
#IMGHover { /*Identificador de la capa que hace el hover */
width: 200px
Re: [Ovillo] comportamiento hover
Jeje no soy dedos rápidos es solo que como estoy de vacaciones(no hay
proyectos ke hacer T_T) tengo abierto el thunderbird y pues ando viendo
en que puedo ayudar o que sale en las listas para entretenerme jeje^^ y
pues perdon el malentendido como ke los símbolos de exclamación !! se me
figuran gritos jeje y pues para que esto no sea offtopic... pues a mi
modo de ver las cosas tienes razon porque emular algo que existe por
naturaleza propia ... lo mismo le pregunto a mocosoft con IE6... pero
bueno... ya habrá alguna solución de mientras le pregunto a google haber
ke me dice jeje ke ya me dejaste la duda xD
LISTAS escribió:
No hombre, tu ayuda es bienvenida, ¡¡¡siempre!!! Para mí y para cualquiera.
Permítete las observaciones de toda calaña y crecerás como un roble. Yo sólo
respondí a tu pregunta, con humor pero sin ánimo de ofensa (a mi edad
considero que el humor es lo único que puede rescatarnos, inclusive, de las
ofensas). Eso sí: casi-casi me contestaste antes de enviarte mi correo.
¿Eres dedos-rápidos en el teclado, ¡eh...!?
Por otro lado, no me molestaste con tu inútil código. No hay códigos
inútiles. Hay inútiles y códigos. Y códigos entre inútiles e
inútiles que hablan en código, ja. Pero ningún código es inútil porque un
código de programación es algo que SIEMPRE dependerá de otros, es algo que
se construye de modo COLECTIVO. Internet es un fenómeno colectivo, ¡vaya!
¿O acaso todos nacimos sabiendo y vamos por la vida de uno en uno? Sin ti yo
no sería nada y sin mi, tú tampoco, creo. Por eso estamos en esta lista
compartiendo ignorancia y conocimiento y creciendo juntos. Y no estamos
solos, ni ahí...
Yo hice esas 2 tontas líneas de código copiando partes de un código
inútil que sólo funcionaba en Explorer. Pero ese código me inspiró para
hacerlo crossbrowser, de modo que no fue tan inútil como parecía a simple
vista. Bueno, basta de jaleo que ya me estoy poniendo cursi... Bay, bay y
gracias por colaborar.
A.V.W.
- Original Message -
From: final20 [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Thursday, August 16, 2007 7:32 PM
Subject: Re: [Ovillo] comportamiento hover
Bueno... yo solo quería ayudar disculpa si te moleste con mi inutil
javascript ...
LISTAS escribió:
¡Oh, sí, claro! Me refiero a lo siguiente: ¿para qué emular algo que ya
existe por naturaleza propia? Es como inventar la pera virtual pudiendo
comerme la verdadera.
Si lo hago por truco (javascript) lo hago más limpio entonces: le digo que
al hacer mouseover reemplace el backgroundImage y lo vuelva a reemplazar
con
el mouseuot... ;-)
¡¡¡Pero yo no quiero hacerlo con Javacript!!! Porque eso sería para mí lo
más fácil y quiero resolverlo todo con CSS. Bueno, al menos, ese es el
espíritu de esta lista, ¿no?
Con Javascript puedo hacerlo inclusive con CLASS e ID indistintamente con
unos bobos códigos de 1 sola línea inventados por mi y compatibles con
Firefox, Opera, Explorer 6, 7... Pero repito: creía que se podía hacerse
con
CLASS tanto como con ID pero parece que ese día los cráneos del W3C
estaban mirando una mariposilla... ¡snif!
De todos modos gracias por el código, los consejos y las recomendaciones.
Y
como gentileza, va mi engendro para quien lo desee aprovechar:
html
head
titleCambios de fondo (hasta suena revolucionario)/title
style type=text/css
!--
#etiqueta, .etiqueta1 {background-image:
url(imagenes/fondo-lenguetas-1.gif); width: 70px; height: 25px}
.etiqueta2 {background-image: url(imagenes/fondo-lenguetas-2.gif); width:
70px; height: 25px}
--
/style
script type=text/javascript
function cambioFondo(nombre,ruta){
document.getElementById(nombre).style.backgroundImage=url(+ruta+)
}
function cambioClase(nombre,clase){
document.getElementById(nombre).className=clase
}
/script
/head
body
div
id=etiquetaonmouseover=cambioFondo('etiqueta','imagenes/fondo-lenguetas-2.gif');
onmouseout=cambioFondo('etiqueta','imagenes/fondo-lenguetas-1.gif')CON
ID/div
div id=esta class=etiqueta1
onmouseover=cambioClase('esta','etiqueta2');
onmouseout=cambioClase('esta','etiqueta1')CON CLASS/div
/body
/html
A.V.W.
- Original Message -
From: final20 [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Thursday, August 16, 2007 5:25 PM
Subject: Re: [Ovillo] comportamiento hover
No entiendo exactamente a que te refieres el script lo único que hace es
emular el comportamiento hover en IE6, en IE7 va bien sin el script
pero en IE6 no se acepta este comportamiento cualquier otro elemento que
no sea un a esa es la función del script emular este comportamiento
en IE6 si me pudieras explicar un poco mejor lo del id ^^ tal ves
podríamos adaptarlo para que se ajuste mas a tus necesidades ^^
LISTAS escribió:
Gracias. Pero hete aquí un detalle: si va a funcionar por medio de ID, no
hace falta un javascript ya que el ID
Re: [Ovillo] comportamiento hover
Hola buenas tardes :)
yo tengo una que estoy usando en un calendario, te envio mi codigo, espero que
te sirva
y es class
( today, es como doy de alta en mi tabla la imagen (cuando cargas la pagina))
.today {
FONT-WEIGHT: bold;
TEXT-ALIGN:center;
BACKGROUND-IMAGE: url(cuadc.gif);
COLOR: #00;
border-bottom: 0px;
height:20px;
}
TD.today A {
FONT-WEIGHT: bold;
TEXT-ALIGN:center;
COLOR: 66;
height:20px;
}
(esta es la imagen que se ve cuando pones el link, en mi caso yo tengo la misma
que en un principio)
TD.today A:link {
FONT-WEIGHT: bold;
TEXT-ALIGN:center;
BACKGROUND-IMAGE: url(cuadc.gif);
COLOR: #66;
height:20px;
}
(Aqui esta el meollo del asunto)(pones la misma imagen que en un principio
porque quiero que aunque ya hayan entrado en el link se siga viendo igual)
TD.today A:visited {
FONT-WEIGHT: bold;
TEXT-ALIGN:center;
BACKGROUND-IMAGE: url(cuadc.gif);
COLOR: #660033;
height:20px;
}
(esta imagen se ve cuando pones el puntero sobre el link)en esta caso tengo
otra)
TD.today A:hover {
FONT-WEIGHT: bold;
TEXT-ALIGN:center;
BACKGROUND-IMAGE: url(cuadclnk.gif);
COLOR: #FF;
height:20px;
}
bueno :), espero que te sirva. (es parte del codigo de un calendario que tengo)
bye me dices si te sirvio)
- Original Message -
From: LISTAS [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Subject: Re: [Ovillo] comportamiento hover
Date: Tue, 14 Aug 2007 18:32:47 -0300
OK, funciona con ID, pero no entiendo porqué con CLASS no funciona. Yo había
hecho todo tal cual el ejemplo sugerido pero con CLASS.
¿Alguien sabe por qué con uno sí y con el otro no?
Con Explorer lo resolví anidando un Anchor entre dos DIV... pero me
desapareció la manito del enlace, aunque enlaza perfectamente... (!!) De
modo que hice una truca exclusiva para el cursor con Explorer y todo quedó a
pedir de boca.
De todos modos, es un bodrio que no se resuelva con una simple clase ya que
hay que encadenar tantos estilos como recursos haya (#enlace1, #enlace2,
#enlace3, etc. + (#enlace1:hover, #enlace2:hover, #enlace3:hover, etc. ).
En fin, gracias por todo.
A.V.W.
- Original Message -
From: Almorca [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Tuesday, August 14, 2007 9:17 AM
Subject: Re: [Ovillo] comportamiento hover
Pues con hover como muy bien has puesto en el título.
Prueba con
#id {
background: transparent url(imagen1.png) no-repeat;
}
#id:hover {
background: transparent url(imagen2.png) no-repeat;
}
El problema es que IE sólo te deja usar hover con enlaces por lo que tendrás
que usar algún hack para IE. Prueba con la librería
IE7.http://dean.edwards.name/IE7/
El día 14/08/07, LISTAS [EMAIL PROTECTED] escribió:
Un problema: tengo un div que como fondo tiene una imagen y quiero que al
poner el cursor sobre el mismo me cambie la imagen y al salir me devuelva
la
original. ¿Cómo se hace eso con CSS?
___
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
--
We don't need no education - Pink Floyd
___
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
--
___
http://mail.mexico.com
¡Disponible Ya! Utiliza el Outlook y Outlook Express para bajar tus correos por
solo US$24.95 al año
Now available! Download your mail into your computer with Outlook and Outlook
Express US$24.95/yr
___
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] comportamiento hover
Funciona en Explorer, pero no en Firefox... y necesito que lo haga en por lo
menos estos 2... :(
¿A ti te funciona en ambos?
Si es así, pásame el enlace a tu calendario y lo miro. Gracias.
A.V.W.
- Original Message -
From: Jazmin Azucena Nieto Garduño [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Wednesday, August 15, 2007 3:26 PM
Subject: Re: [Ovillo] comportamiento hover
Hola buenas tardes :)
yo tengo una que estoy usando en un calendario, te envio mi codigo, espero
que te sirva
y es class
( today, es como doy de alta en mi tabla la imagen (cuando cargas la
pagina))
.today {
FONT-WEIGHT: bold;
TEXT-ALIGN:center;
BACKGROUND-IMAGE: url(cuadc.gif);
COLOR: #00;
border-bottom: 0px;
height:20px;
}
TD.today A {
FONT-WEIGHT: bold;
TEXT-ALIGN:center;
COLOR: 66;
height:20px;
}
(esta es la imagen que se ve cuando pones el link, en mi caso yo tengo la
misma que en un principio)
TD.today A:link {
FONT-WEIGHT: bold;
TEXT-ALIGN:center;
BACKGROUND-IMAGE: url(cuadc.gif);
COLOR: #66;
height:20px;
}
(Aqui esta el meollo del asunto)(pones la misma imagen que en un principio
porque quiero que aunque ya hayan entrado en el link se siga viendo igual)
TD.today A:visited {
FONT-WEIGHT: bold;
TEXT-ALIGN:center;
BACKGROUND-IMAGE: url(cuadc.gif);
COLOR: #660033;
height:20px;
}
(esta imagen se ve cuando pones el puntero sobre el link)en esta caso tengo
otra)
TD.today A:hover {
FONT-WEIGHT: bold;
TEXT-ALIGN:center;
BACKGROUND-IMAGE: url(cuadclnk.gif);
COLOR: #FF;
height:20px;
}
bueno :), espero que te sirva. (es parte del codigo de un calendario que
tengo)
bye me dices si te sirvio)
- Original Message -
From: LISTAS [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Subject: Re: [Ovillo] comportamiento hover
Date: Tue, 14 Aug 2007 18:32:47 -0300
OK, funciona con ID, pero no entiendo porqué con CLASS no funciona. Yo
había
hecho todo tal cual el ejemplo sugerido pero con CLASS.
¿Alguien sabe por qué con uno sí y con el otro no?
Con Explorer lo resolví anidando un Anchor entre dos DIV... pero me
desapareció la manito del enlace, aunque enlaza perfectamente... (!!) De
modo que hice una truca exclusiva para el cursor con Explorer y todo quedó
a
pedir de boca.
De todos modos, es un bodrio que no se resuelva con una simple clase ya
que
hay que encadenar tantos estilos como recursos haya (#enlace1, #enlace2,
#enlace3, etc. + (#enlace1:hover, #enlace2:hover, #enlace3:hover, etc. ).
En fin, gracias por todo.
A.V.W.
- Original Message -
From: Almorca [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Tuesday, August 14, 2007 9:17 AM
Subject: Re: [Ovillo] comportamiento hover
Pues con hover como muy bien has puesto en el título.
Prueba con
#id {
background: transparent url(imagen1.png) no-repeat;
}
#id:hover {
background: transparent url(imagen2.png) no-repeat;
}
El problema es que IE sólo te deja usar hover con enlaces por lo que
tendrás
que usar algún hack para IE. Prueba con la librería
IE7.http://dean.edwards.name/IE7/
El día 14/08/07, LISTAS [EMAIL PROTECTED] escribió:
Un problema: tengo un div que como fondo tiene una imagen y quiero que
al
poner el cursor sobre el mismo me cambie la imagen y al salir me
devuelva
la
original. ¿Cómo se hace eso con CSS?
___
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
--
We don't need no education - Pink Floyd
___
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
--
___
http://mail.mexico.com
¡Disponible Ya! Utiliza el Outlook y Outlook Express para bajar tus correos
por solo US$24.95 al año
Now available! Download your mail into your computer with Outlook and
Outlook Express US$24.95/yr
___
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
Re: [Ovillo] comportamiento hover
Hola, Listas Un problema: tengo un div que como fondo tiene una imagen y quiero que al poner el cursor sobre el mismo me cambie la imagen y al salir me devuelva la original. ¿Cómo se hace eso con CSS? Como se ha dicho ya varias veces por aquí: la pseudo-clase hover sólo funciona (al menos de momento) para la etiqueta a no para div ni para ninguna otra. Tu solución (si no te queda más remedio que utilizar un div) es javascript y el evento onmouseover. Un saludo Rodrigo ___ 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] comportamiento hover
Pues con hover como muy bien has puesto en el título.
Prueba con
#id {
background: transparent url(imagen1.png) no-repeat;
}
#id:hover {
background: transparent url(imagen2.png) no-repeat;
}
El problema es que IE sólo te deja usar hover con enlaces por lo que tendrás
que usar algún hack para IE. Prueba con la librería
IE7.http://dean.edwards.name/IE7/
El día 14/08/07, LISTAS [EMAIL PROTECTED] escribió:
Un problema: tengo un div que como fondo tiene una imagen y quiero que al
poner el cursor sobre el mismo me cambie la imagen y al salir me devuelva
la
original. ¿Cómo se hace eso con CSS?
___
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
--
We don't need no education - Pink Floyd
___
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] comportamiento hover
Utilizando una imagen mayor que el div y limitando su visibilidad según el estado del enlace: Estado 1: (* delimita el DIV) * * - * * | img | * * | | | | - Estado 2: - | img | * * | | * * | | - Estado 3: - | img | | | * * | | * * También puedes hacerlo si utilizas una imagen transparente donde los bordes sean sólidos. Entonces con cambiar el Background según el estado consigues el mismo efecto Estado 1: ++ ++++++ ++++++ ++ Estado n: ++ ++++++ ++++++ ++ Espero que la utilización de pseudo-imágenes ASCII no haya contribuido a liarlo. Un saludo Victoria El mar, 14-08-2007 a las 08:31 -0300, LISTAS escribió: Un problema: tengo un div que como fondo tiene una imagen y quiero que al poner el cursor sobre el mismo me cambie la imagen y al salir me devuelva la original. ¿Cómo se hace eso con CSS? ___ 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] comportamiento hover
On 8/14/07, LISTAS [EMAIL PROTECTED] wrote:
Un problema: tengo un div que como fondo tiene una imagen y quiero que al
poner el cursor sobre el mismo me cambie la imagen y al salir me devuelva
la
original. ¿Cómo se hace eso con CSS?
sin probarlo, pero que debería funcionar en casi todo menos en IE:
#id_del_div
{
background-image: url(normal.png);
}
#id_del_div:hover
{
background-image: url(resaltado.png);
}
saludos.
--
Si no puedes deslumbrar con tu sabiduría,
desconcierta con tus gilipolleces
___
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] comportamiento hover
Para mi, la mas rapida es crear una clase, y asignarle a la
pseudo-clase:hoverun fondo a la la que no tiene psudoclase fondo
ninguno, asi:
.CLASEBOTON {
background-image:none;
}
.CLASEBOTON:hover {
background-image: url(imagen.png);
}
la imagen puede ser tambien .gif o jpg.
Espero que te sirva.
On 8/14/07, LISTAS [EMAIL PROTECTED] wrote:
Un problema: tengo un div que como fondo tiene una imagen y quiero que al
poner el cursor sobre el mismo me cambie la imagen y al salir me devuelva
la
original. ¿Cómo se hace eso con CSS?
___
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
--
Lucas Franco
___
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] comportamiento hover
Buenas. He hestado mirando un pokito el tema.
Si estas haciendo la web para netscape (mozilla, firefox...) el siguiente
codigo te funcionara:
style type=text/css
#imagenFondo:link{background-image:url(images/imagen1.jpg);background-repeat:no-repeat}
#imagenFondo:visited
{background-image:url(images/imagen1.jpg);background-repeat:no-repeat}
#imagenFondo:active
{background-image:url(images/imagen1.jpg);background-repeat:no-repeat}
#imagenFondo:hover
{background-image:url(images/imagen2.jpg);background-repeat:no-repeat}
/style
/head
body
!--a href=self class=imagenFondo --
div id=imagenFondo class=imagenFondo name=imagenFondo
asdadadsadsad
/div
!--/a--
/body
Si lo kieres para IE, lo suyo seria utilizar onMouseOver y onMouseOut. Otra
solucion seria poner el div dentro de una etiqueta a.
Espero que te sirva de ayuda
Suerte!!
2007/8/14, LISTAS [EMAIL PROTECTED]:
Un problema: tengo un div que como fondo tiene una imagen y quiero que al
poner el cursor sobre el mismo me cambie la imagen y al salir me devuelva
la
original. ¿Cómo se hace eso con CSS?
___
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] comportamiento hover
Eso, precisamente, es lo que no funciona... :(
Ve tú mismo tu propio ejemplo.
- Original Message -
From: Lucas Franco [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Tuesday, August 14, 2007 9:36 AM
Subject: Re: [Ovillo] comportamiento hover
Para mi, la mas rapida es crear una clase, y asignarle a la
pseudo-clase:hoverun fondo a la la que no tiene psudoclase fondo
ninguno, asi:
.CLASEBOTON {
background-image:none;
}
.CLASEBOTON:hover {
background-image: url(imagen.png);
}
la imagen puede ser tambien .gif o jpg.
Espero que te sirva.
On 8/14/07, LISTAS [EMAIL PROTECTED] wrote:
Un problema: tengo un div que como fondo tiene una imagen y quiero que al
poner el cursor sobre el mismo me cambie la imagen y al salir me devuelva
la
original. ¿Cómo se hace eso con CSS?
___
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
--
Lucas Franco
___
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] comportamiento hover
OK, funciona con ID, pero no entiendo porqué con CLASS no funciona. Yo había
hecho todo tal cual el ejemplo sugerido pero con CLASS.
¿Alguien sabe por qué con uno sí y con el otro no?
Con Explorer lo resolví anidando un Anchor entre dos DIV... pero me
desapareció la manito del enlace, aunque enlaza perfectamente... (!!) De
modo que hice una truca exclusiva para el cursor con Explorer y todo quedó a
pedir de boca.
De todos modos, es un bodrio que no se resuelva con una simple clase ya que
hay que encadenar tantos estilos como recursos haya (#enlace1, #enlace2,
#enlace3, etc. + (#enlace1:hover, #enlace2:hover, #enlace3:hover, etc. ).
En fin, gracias por todo.
A.V.W.
- Original Message -
From: Almorca [EMAIL PROTECTED]
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Sent: Tuesday, August 14, 2007 9:17 AM
Subject: Re: [Ovillo] comportamiento hover
Pues con hover como muy bien has puesto en el título.
Prueba con
#id {
background: transparent url(imagen1.png) no-repeat;
}
#id:hover {
background: transparent url(imagen2.png) no-repeat;
}
El problema es que IE sólo te deja usar hover con enlaces por lo que tendrás
que usar algún hack para IE. Prueba con la librería
IE7.http://dean.edwards.name/IE7/
El día 14/08/07, LISTAS [EMAIL PROTECTED] escribió:
Un problema: tengo un div que como fondo tiene una imagen y quiero que al
poner el cursor sobre el mismo me cambie la imagen y al salir me devuelva
la
original. ¿Cómo se hace eso con CSS?
___
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
--
We don't need no education - Pink Floyd
___
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
