Haber no me aguante las ganas espero sea lo ke kieres si no pues dime
exactamente ke es lo ke kieres y pues vemos ke onda... hice
modificaciones ahora funciona con class...
EL 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 IE6 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*/
}
EL HTML el id es solo para referenciarlo a javascript... puedes quitar
el script y el id pero en IE6 no funcionara...:
<div id="IMGHover" class="IMGHover"></div><!-- aclaro que el ID solo es
para referenciarlo en js para que funcione en IE6 -->
EL JavaScript Nota que este escript es solo para emular el
comportamiento en IE6 osea un hack.. ya que sin este script en IE6 no
reconocerá la pseudo clase hover...asi que no podras hacer que IE6
cambie el fondo de la div sin un poco de "ayuda" a menos de que en lugar
de hacer una div hagas un a...
// JavaScript Document
startList = function() {// modifique el script de suckerfish para que
funcione con esta div ^^
if(document.all&&document.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
cuelgo otra version en geocities..
http://mx.geocities.com/nma2040/divOver2/div.html para que veas
funcionamiento...
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.all&&document.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: #000000;
>> border-bottom: 0px;
>> height:20px;
>> }
>>
>> TD.today A {
>> FONT-WEIGHT: bold;
>> TEXT-ALIGN:center;
>> COLOR: 666666;
>> 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: #666666;
>> 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: #FFFFFF;
>> 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
>>>
>>>
>>
>>
>>
>>
>
> _______________________________________________
> 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
