Re: [Ovillo] comportamiento hover

2007-08-20 Por tema Tei
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

2007-08-17 Por tema Carlos Rincón
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

2007-08-17 Por tema Carlos Rincón

 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

2007-08-17 Por tema LISTAS
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

2007-08-17 Por tema Juan José Montes de Oca Arbós
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

2007-08-17 Por tema Hernán Beati - SaberWeb.com.ar
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

2007-08-17 Por tema LISTAS
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

2007-08-17 Por tema LISTAS
¡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

2007-08-17 Por tema final20
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

2007-08-17 Por tema LISTAS
¡¡¡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

2007-08-16 Por tema LISTAS
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

2007-08-16 Por tema final20
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

2007-08-16 Por tema LISTAS
¡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

2007-08-16 Por tema final20
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

2007-08-16 Por tema LISTAS
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

2007-08-16 Por tema final20
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

2007-08-15 Por tema Jazmin Azucena Nieto Garduño


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

2007-08-15 Por tema LISTAS
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

[Ovillo] comportamiento hover

2007-08-14 Por tema 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? 

___
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

2007-08-14 Por tema Rodrigo Álvarez Virgós
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

2007-08-14 Por tema Almorca
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

2007-08-14 Por tema Victoria Gracia
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

2007-08-14 Por tema carlos campderrós
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

2007-08-14 Por tema Lucas Franco
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

2007-08-14 Por tema aleks salinas
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

2007-08-14 Por tema LISTAS
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

2007-08-14 Por tema LISTAS
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