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>
> <title>Cambios 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="etiqueta"onmouseover="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.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
>
>   

_______________________________________________
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

Responder a