Re: [Ovillo] pseudo-clases en atributo style
Hey, Raúl Creo que las respuestas que te han dado... Te dejo un enlace: http://www.w3.org/TR/css-style-attr Pero no cuentes con el soporte de los navegadores. Muchas gracias tío, gran aportación, como siempre... :-) es justo lo que estaba buscando. ___ 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] pseudo-clases en atributo style
Hola Rodrigo,
en principio puedes especificar por CSS distintas imágenes de fondo para
los distintos estados del enlace (puesto que se trata de un enlace,
no?), y no utilizar JS querrá decir utilizar algún mecanismo en servidor
que haga la selección.
Si obtienes una lista de los productos a mostrar y conoces el límite de
productos mostrados (esto es, la BBDD te da ya una lista de 10, o de 20,
o de lo que sea pero un número conocido), puedes hacer que la propia
consulta a la BBDD te cree la hoja de estilos a la vez que el HTML.
Si eres tú quien ha creado el sistema de consultas a la BBDD puede ser
factible.
Tras la consulta a la BBDD:
- Puesto que la consulta necesariamente te devuelve un ARRAY con
los productos, puedes atribuir a cada producto un estilo
mediante el ID (a id=prod01... , a id=prod02..., hasta a
id=prod10 href= etc)
- A cada una de las imágenes recuperadas de la BBDD, atribuirle
un nombre según la nomenclatura anterior:
producto 01:color01.jpg bn01.jpg
producto 02 color02.jpg bn02.jpg
...
producto 10 color10.jpg bn10.jpg
- En la hoja de estilos tendrías los siguientes estilos:
#prod01.a:link, #prod01.a:visited {
background-image: url(./bn01.jpg)}
#prod01.a:active, #prod01.a:hover {
background-image: url(./color01.jpg)}
#prod02.a:link, #prod01.a:visited {
background-image: url(./bn02.jpg)}
#prod02.a:active, #prod02.a:hover {
background-image: url(./color02.jpg)}
...
#prod10 a:link, #prod10 a:visited {
background-image: url(./bn10.jpg)}
#prod10 a:active, #prod10 a:hover {
background-image: url(./color10.jpg)}
- En el HTML, para cada producto, debes construir el enlace
dando el ID de producto para que todo sea correcto.
Espero que te funcione
Un saludo
Victoria Gracia
El mar, 04-09-2007 a las 12:34 +0200, Rodrigo Álvarez Virgós escribió:
Hola, Ovillo
A ver si se os ocurre cómo darle solución a lo siguiente:
En un sitio dinámico muestro todos los productos de un catálogo. Saco
las imágenes de la base de datos, las remuestreo, las pongo en escala de
grises y las meto en el css como background de un enlace, hasta ahí bien.
Como tengo que darle un background distinto a cada producto, lo hago con
el atributo style (a href=... style=background-image:...). El
problema viene ahora: si quiero que al pasar el ratón por encima la
imagen se muestre con color en lugar de en b/n, ¿hay manera de hacer
algo parecido a a href=... *style[hover]*=background-image:... o
tengo que recurrir a javascript?
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
___
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] pseudo-clases en atributo style
Pues va a ser que no :(
El mar, 04-09-2007 a las 13:20 +0200, Rodrigo Álvarez Virgós escribió:
Agradezco a todos vuestras aportaciones, pero mi pregunta es si existe
algo parecido a
a style[hover]=... (en el A-T-R-I-B-U-T-O style)
a:hover {...} en una hoja de estilo no me sirve, no sé si es que no me
he explicado bien ...
Victoria, tu solución ya la había pensado, pero es imposible conocer el
límite de productos mostrados, y además las imágenes recuperadas de la
base de datos no las guardo como jpg, las muestro sin más.
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
___
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] pseudo-clases en atributo style
Agradezco a todos vuestras aportaciones, pero mi pregunta es si existe
algo parecido a
a style[hover]=... (en el A-T-R-I-B-U-T-O style)
a:hover {...} en una hoja de estilo no me sirve, no sé si es que no me
he explicado bien ...
Victoria, tu solución ya la había pensado, pero es imposible conocer el
límite de productos mostrados, y además las imágenes recuperadas de la
base de datos no las guardo como jpg, las muestro sin más.
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] pseudo-clases en atributo style
Hola Rodrigo,
Creo que las respuestas que te han dado...
Te dejo un enlace:
http://www.w3.org/TR/css-style-attr
Pero no cuentes con el soporte de los navegadores.
Puedes probar con:
.. onmouseover=this.style... onmouseout=this.style...
jeje, pero te aconsejo que barajes las otras opciones.
Original Message
Subject: Re: [Ovillo] pseudo-clases en atributo style
From: Rodrigo ?lvarez Virg?s [EMAIL PROTECTED]
Date: Tue, September 04, 2007 4:20 am
To: Ovillo, la lista de CSS en castellano ovillo@lists.ovillo.org
Agradezco a todos vuestras aportaciones, pero mi pregunta es si existe
algo parecido a
a style[hover]=... (en el A-T-R-I-B-U-T-O style)
a:hover {...} en una hoja de estilo no me sirve, no sé si es que no me
he explicado bien ...
Victoria, tu solución ya la había pensado, pero es imposible conocer el
límite de productos mostrados, y además las imágenes recuperadas de la
base de datos no las guardo como jpg, las muestro sin más.
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
___
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] pseudo-clases en atributo style
Usando css:
Te cuento segun mi experiencia, si quieres cambiar una imagen sin usar
javascript tienes q tener en cuenta que la imagen que se sustiuira deberia
de estar cargada, por lo q lo se podria hacer es cargar las dos imagenes en
una, y mostrar primero la parte superior y luego la inferior.
Sin embargo este sistema no se suele utilizar para mostrar imagenes grandes
sino para hacer botones tipo encendido y apagado.
La clase del a quedaria mas o menos
a{
background:url(miimagen.jpg) no-repeat left top;
}
a:hover {
background-position:0% -42px;
}
Tambien podrias pobrar utilizando los filtros que solo funcionan para
el explorer 6, el sistema seria
parecido pero haciendo la llamada al filtro.
Enlace imagen normal
a{
background:url(miimagen.jpg);
;
}
Imagen en byn
a:hover{
filter:gray
}
___
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] pseudo-clases en atributo style
On 9/4/07, Rodrigo Álvarez Virgós [EMAIL PROTECTED] wrote:
Hola, Ovillo
A ver si se os ocurre cómo darle solución a lo siguiente:
En un sitio dinámico muestro todos los productos de un catálogo. Saco
las imágenes de la base de datos, las remuestreo, las pongo en escala de
grises y las meto en el css como background de un enlace, hasta ahí bien.
Como tengo que darle un background distinto a cada producto, lo hago con
el atributo style (a href=... style=background-image:...). El
problema viene ahora: si quiero que al pasar el ratón por encima la
imagen se muestre con color en lugar de en b/n, ¿hay manera de hacer
algo parecido a a href=... *style[hover]*=background-image:... o
tengo que recurrir a javascript?
Un saludo
Rodrigo
Lo que quieres necesita javascript:
function addStyle(style) {
var styleNode = document.createElement(style);
document.body.appendChild(styleNode);
var styleSheet = document.styleSheets[document.styleSheets.length - 1];
styleSheet.insertRule(style, 0);
}
Luego la metes con
addStyle(#enlace:hover {background-image: url('algo.jpg') });
Saludos
--
Linux Registered User # 386081
A menudo unas pocas horas de Prueba y error podrán ahorrarte minutos
de leer manuales.
___
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
