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