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.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
