Re: [Ovillo] Mostrar capa sobre imagenes al hacer mouseover
Buenas tardes:
Estoy intentando hacer un menú desplegable exclusivamente con CSS, y me
gustaría probar esta técnica,
¿hay alguna forma de que funcione en IE6 sin usar JS?
2010/4/15 Jairo Ochoa jairo.oc...@gmail.com
La estructura actual de la pagina es algo así:
h1Titulo de página/h1
h2Primer elemento/h2
img
breve descripción
h2Segundo elemento/h2
img
breve descripción
h2Tercer elemento/h2
img
breve descripción
el h2 a su vez contiene el enlace
Me gusta esa solución que das, con 2 span, y me parece perfecta mientras
visualmente haga lo mismo y creo que sí
Tú juegas con los z-index, ¿sería lo mismo hacerlo con display block/none?
Saludos,
--
Jairo Ochoa
El 15 de abril de 2010 17:06, Ramón Corominas
lis...@ramoncorominas.comescribió:
Sí, la validación fallaría porque igualmente el div es elemento de
bloque. De todos modos, sigo sin entender por qué usas h2, porque
aparentemente no estás encabezando contenidos de ningún tipo (el h2
debería encabezar contenidos en el documento donde lo pones, no en el
siguiente). Otra cosa es que puedes poner dos span con clases
distintas con display: block; y solaparlos para hacer ese efecto de
ocultamiento/desocultamiento. Más o menos la idea básica sería algo así:
div class=roll
a
span class=img1/span!-- imagen visible por defecto --
span class=img2/span!-- imagen oculta que se quiere mostrar en el
rollover --
/a
/div
.img1, .img2 { width: 100%; height: 100%; display: block; position:
absolute; top: 0; left: 0; }
.roll a .img1 { z-index: 0; }
.roll a .img2 { z-index: 1; }
.roll a:hover .img1, .roll a:focus .img1 { z-index: 1; }
.roll a:hover .img2, .roll a:focus .img2 { z-index: 0; }
De esa manera además cubres el acceso con teclado, que de otro modo no
se activaría si el usuario navega con el tabulador.
Saludín,
Ramón.
Jairo Ochoa escribió:
Aunque la imagen no puede ir dentro del H2 ya que está presente
antes de que se muestre el H2 y queda debajo, tapada por el
background/mascara del H2
___
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
Re: [Ovillo] Mostrar capa sobre imagenes al hacer mouseover
Con las últimas sugerencias de Ramón Corominas y algún añadido, el roll-over
funciona en todos los navegadores salvo en IE 6.
Los errores se deben a que uso un PNG para la máscara, y no hace la
transparencia, también que uso position, z-index, y no si por la forma
en anidar los a y span porque no hace el link ...
En lo referente al IE 6:
Ya se habló en otros emails del tema y yo al menos paso totalmente de hacer
webs compatibles con IE 6 si implica más trabajo o dejar de hacer cosas que
cumplan los estándares.
Basándome en estadísticas de Google Analytics que obtengo de webs de
clientes, la tendencia es que la presencia de IE 6 es cada vez menos
significativo.
Quedándome con un caso de una web de embalajes, donde se puede suponer
público de edad, profesionales, no joven geek a la última que actualiza su
navegador, se observa que IE 66%, FF 23 %, CHR 7%
Del porcentaje de IE, tenemos IE 8 46%, IE 6 29%, IE 7 23 %
Así que el 29% de 66% es el 19% del total de usuarios.
Que serán usarios de XP y SO anteriores que no tienen activadas las
actualizaciones de Windows.
Tienes que valorar si tu clientes o su target de clientes son usuarios de IE
6 y si tu cliente está dispuesto a pagar el esfuerzo extra.
Saludos,
--
Jairo Ochoa
El 16 de abril de 2010 14:12, Rafa Artacho teme...@gmail.com escribió:
Buenas tardes:
Estoy intentando hacer un menú desplegable exclusivamente con CSS, y me
gustaría probar esta técnica,
¿hay alguna forma de que funcione en IE6 sin usar JS?
2010/4/15 Jairo Ochoa jairo.oc...@gmail.com
La estructura actual de la pagina es algo así:
h1Titulo de página/h1
h2Primer elemento/h2
img
breve descripción
h2Segundo elemento/h2
img
breve descripción
h2Tercer elemento/h2
img
breve descripción
el h2 a su vez contiene el enlace
Me gusta esa solución que das, con 2 span, y me parece perfecta
mientras
visualmente haga lo mismo y creo que sí
Tú juegas con los z-index, ¿sería lo mismo hacerlo con display
block/none?
Saludos,
--
Jairo Ochoa
El 15 de abril de 2010 17:06, Ramón Corominas
lis...@ramoncorominas.comescribió:
Sí, la validación fallaría porque igualmente el div es elemento de
bloque. De todos modos, sigo sin entender por qué usas h2, porque
aparentemente no estás encabezando contenidos de ningún tipo (el h2
debería encabezar contenidos en el documento donde lo pones, no en el
siguiente). Otra cosa es que puedes poner dos span con clases
distintas con display: block; y solaparlos para hacer ese efecto de
ocultamiento/desocultamiento. Más o menos la idea básica sería algo
así:
div class=roll
a
span class=img1/span!-- imagen visible por defecto --
span class=img2/span!-- imagen oculta que se quiere mostrar en
el
rollover --
/a
/div
.img1, .img2 { width: 100%; height: 100%; display: block; position:
absolute; top: 0; left: 0; }
.roll a .img1 { z-index: 0; }
.roll a .img2 { z-index: 1; }
.roll a:hover .img1, .roll a:focus .img1 { z-index: 1; }
.roll a:hover .img2, .roll a:focus .img2 { z-index: 0; }
De esa manera además cubres el acceso con teclado, que de otro modo no
se activaría si el usuario navega con el tabulador.
Saludín,
Ramón.
Jairo Ochoa escribió:
Aunque la imagen no puede ir dentro del H2 ya que está presente
antes de que se muestre el H2 y queda debajo, tapada por el
background/mascara del H2
___
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
Re: [Ovillo] Mostrar capa sobre imagenes al hacer mouseover
Nota: h2 es elemento de bloque. a es elemento inline h2 no puede ir dentro de a si quieres que el código valide. Saludos, Ramón. Jairo escribió: Tengo este codigo html (que puedo cambiar si fuese necesario) div class=post a href=enlace.php h2spanmi titulo/span/h2 img class=thumbnail src=imagen.jpg / /a /div ___ 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] Mostrar capa sobre imagenes al hacer mouseover
Hola,
Te refieres a validación W3C?
Tal cual está funciona en todos los navegadores
- Mac OS: Firefox, Camino, Chrome, Safari, Opera, SeaMonkey y Netscape
- Windows XP: Firefox
- Windows 7: Firefox, Explorer 8
Y falla en:
- Windows XP: Explorer 6
Todas las capas las muestra sobre el primer elemento. En pantalla se muestra
un grid de 5x3 elemetos .post
Supongo que el error se debe a los valores de css position
Ahora, he hecho el cambio que sugieres
div class=post
h2a href=enlacespanMi titulo/span/a/h2
a href=enlaceimg class=thumbnail src=imagen.jpg //a
/div
En el css, cambio lo que comentaron en el anterior email por esto
.post:hover h2 { display:block; }
Estéticamente el efecto es el mismo salvo que la zona de enlace se restringe
sólo a al texto.
Es decir, si antes daba igual donde hiceiese click, porque siempre se abría
la página, ahora sólo funciona si hago click sobre las letras del título.
¿Qué alternativa sugieres que valide y que funcione de igual forma?
Saludos,
--
Jairo Ochoa
El 15 de abril de 2010 09:39, Ramón Corominas
lis...@ramoncorominas.comescribió:
Nota:
h2 es elemento de bloque.
a es elemento inline
h2 no puede ir dentro de a si quieres que el código valide.
Saludos,
Ramón.
Jairo escribió:
Tengo este codigo html (que puedo cambiar si fuese necesario)
div class=post
a href=enlace.php
h2spanmi titulo/span/h2
img class=thumbnail src=imagen.jpg /
/a
/div
___
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] Mostrar capa sobre imagenes al hacer mouseover
Enlaza el link que le pones a la imagen y ya está.
div class=post
h2a href=mipagina.htmlspanMi titulo/span/a/h2
a href=mipagina.htmlimg class=thumbnail src=imagen.jpg //a
/div
Carlos Acero Sánchez
Dpto. Sistemas
Aguirre Newman
-Mensaje original-
De: ovillo-boun...@lists.ovillo.org [mailto:ovillo-boun...@lists.ovillo.org] En
nombre de Jairo Ochoa
Enviado el: jueves, 15 de abril de 2010 12:26
Para: Ovillo, la lista de CSS en castellano
Asunto: [Correo sospechoso] Re: [Ovillo] Mostrar capa sobre imagenes al hacer
mouseover
Hola,
Te refieres a validación W3C?
Tal cual está funciona en todos los navegadores
- Mac OS: Firefox, Camino, Chrome, Safari, Opera, SeaMonkey y Netscape
- Windows XP: Firefox
- Windows 7: Firefox, Explorer 8
Y falla en:
- Windows XP: Explorer 6
Todas las capas las muestra sobre el primer elemento. En pantalla se muestra
un grid de 5x3 elemetos .post
Supongo que el error se debe a los valores de css position
Ahora, he hecho el cambio que sugieres
div class=post
h2a href=enlacespanMi titulo/span/a/h2
a href=enlaceimg class=thumbnail src=imagen.jpg //a
/div
En el css, cambio lo que comentaron en el anterior email por esto
.post:hover h2 { display:block; }
Estéticamente el efecto es el mismo salvo que la zona de enlace se restringe
sólo a al texto.
Es decir, si antes daba igual donde hiceiese click, porque siempre se abría
la página, ahora sólo funciona si hago click sobre las letras del título.
¿Qué alternativa sugieres que valide y que funcione de igual forma?
Saludos,
--
Jairo Ochoa
El 15 de abril de 2010 09:39, Ramón Corominas
lis...@ramoncorominas.comescribió:
Nota:
h2 es elemento de bloque.
a es elemento inline
h2 no puede ir dentro de a si quieres que el código valide.
Saludos,
Ramón.
Jairo escribió:
Tengo este codigo html (que puedo cambiar si fuese necesario)
div class=post
a href=enlace.php
h2spanmi titulo/span/h2
img class=thumbnail src=imagen.jpg /
/a
/div
___
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
En cumplimiento de la Ley 15/1999, de 13 de diciembre, de Protección de Datos
de Carácter Personal, le informamos que los datos de carácter personal
utilizados para la presente comunicación proceden de un fichero de datos de
carácter personal titularidad de Aguirre Newman, S.A., debidamente notificado
ante la Agencia Española de Protección de Datos, cuya finalidad es la gestión
(control, mantenimiento y archivo de la documentación) de la relación que
mantiene con el GRUPO AGUIRRE NEWMAN y la comunicación con terceros. Dichos
datos, por consiguiente, han sido incorporados o serán incorporados en dicho
fichero para los usos y finalidades indicadas, pudiendo ser objeto de
comunicación a las Compañías que integran el GRUPO AGUIRRE NEWMAN, cuya
identidad podrá consultar en el aviso legal de la página web corporativa
www.aguirrenewman.es, cuando sea necesario y/o pertinente para el cumplimiento
de las finalidades señaladas.
Si Ud. no consintiese la utilización del correo electrónico para enviarle
comunicaciones electrónicas, la comunicación de sus datos de contacto al resto
de empresas del GRUPO AGUIRRE NEWMAN o deseara revocar su consentimiento al
tratamiento de sus datos, podrá hacerlo mediante un correo electrónico dirigido
a asesoriajurid...@aguirrenewman.es. Asimismo, si Ud. desea ejercitar sus
derechos de acceso, rectificación, cancelación y oposición podrá hacerlo
dirigiéndose por escrito al Departamento de Asesoría Jurídica de Aguirre
Newman, S.A., calle General Lacy número 23, C.P. 28045 Madrid, remitiendo,
junto con la solicitud, una fotocopia de un documento oficial de identificación
(DNI, Pasaporte, etc).
According to Spanish Data Protection Law 15/1999, we hereby inform that the
personal data used in this communication come from an automated data filed
owned by Aguirre Newman, S.A., which has been duly notified to the Spanish Data
Protection Agency, and whose purpose is managing (control, maintenance and
archiving) the relationship you hold with GRUPO AGUIRRE NEWMAN and its
communication with third parties. Such personal data has been included within
the referred data file for the uses and purposes above-mentioned and may be
transferred to other companies of the AGUIRRE NEWMAN Group, when necessary for
the compliance of the purposes above-mentioned. The companies that form the
AGUIRRE NEWMAN GROUP are listed in the legal
Re: [Ovillo] Mostrar capa sobre imagenes al hacer mouseover
Lo he probado también, pero al estar h2 sobre la imagen, la 'tapa' y el
enlace que hay debajo no funciona.
h2 tiene un width y height del mismo tamaño que la imagen para que así el
png que es background de h2 deje ver la imagen con transparencia.
:-(
--
Jairo Ochoa
El 15 de abril de 2010 12:51, Carlos Acero Sánchez
carlos.ac...@aguirrenewman.es escribió:
Enlaza el link que le pones a la imagen y ya está.
div class=post
h2a href=mipagina.htmlspanMi titulo/span/a/h2
a href=mipagina.htmlimg class=thumbnail src=imagen.jpg //a
/div
Carlos Acero Sánchez
Dpto. Sistemas
Aguirre Newman
-Mensaje original-
De: ovillo-boun...@lists.ovillo.org [mailto:
ovillo-boun...@lists.ovillo.org] En nombre de Jairo Ochoa
Enviado el: jueves, 15 de abril de 2010 12:26
Para: Ovillo, la lista de CSS en castellano
Asunto: [Correo sospechoso] Re: [Ovillo] Mostrar capa sobre imagenes al
hacer mouseover
Hola,
Te refieres a validación W3C?
Tal cual está funciona en todos los navegadores
- Mac OS: Firefox, Camino, Chrome, Safari, Opera, SeaMonkey y Netscape
- Windows XP: Firefox
- Windows 7: Firefox, Explorer 8
Y falla en:
- Windows XP: Explorer 6
Todas las capas las muestra sobre el primer elemento. En pantalla se
muestra
un grid de 5x3 elemetos .post
Supongo que el error se debe a los valores de css position
Ahora, he hecho el cambio que sugieres
div class=post
h2a href=enlacespanMi titulo/span/a/h2
a href=enlaceimg class=thumbnail src=imagen.jpg //a
/div
En el css, cambio lo que comentaron en el anterior email por esto
.post:hover h2 { display:block; }
Estéticamente el efecto es el mismo salvo que la zona de enlace se
restringe
sólo a al texto.
Es decir, si antes daba igual donde hiceiese click, porque siempre se abría
la página, ahora sólo funciona si hago click sobre las letras del título.
¿Qué alternativa sugieres que valide y que funcione de igual forma?
Saludos,
--
Jairo Ochoa
El 15 de abril de 2010 09:39, Ramón Corominas
lis...@ramoncorominas.comescribió:
Nota:
h2 es elemento de bloque.
a es elemento inline
h2 no puede ir dentro de a si quieres que el código valide.
Saludos,
Ramón.
Jairo escribió:
Tengo este codigo html (que puedo cambiar si fuese necesario)
div class=post
a href=enlace.php
h2spanmi titulo/span/h2
img class=thumbnail src=imagen.jpg /
/a
/div
___
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
En cumplimiento de la Ley 15/1999, de 13 de diciembre, de Protección de
Datos de Carácter Personal, le informamos que los datos de carácter personal
utilizados para la presente comunicación proceden de un fichero de datos de
carácter personal titularidad de Aguirre Newman, S.A., debidamente
notificado ante la Agencia Española de Protección de Datos, cuya finalidad
es la gestión (control, mantenimiento y archivo de la documentación) de la
relación que mantiene con el GRUPO AGUIRRE NEWMAN y la comunicación con
terceros. Dichos datos, por consiguiente, han sido incorporados o serán
incorporados en dicho fichero para los usos y finalidades indicadas,
pudiendo ser objeto de comunicación a las Compañías que integran el GRUPO
AGUIRRE NEWMAN, cuya identidad podrá consultar en el aviso legal de la
página web corporativa www.aguirrenewman.es, cuando sea necesario y/o
pertinente para el cumplimiento de las finalidades señaladas.
Si Ud. no consintiese la utilización del correo electrónico para enviarle
comunicaciones electrónicas, la comunicación de sus datos de contacto al
resto de empresas del GRUPO AGUIRRE NEWMAN o deseara revocar su
consentimiento al tratamiento de sus datos, podrá hacerlo mediante un correo
electrónico dirigido a asesoriajurid...@aguirrenewman.es. Asimismo, si Ud.
desea ejercitar sus derechos de acceso, rectificación, cancelación y
oposición podrá hacerlo dirigiéndose por escrito al Departamento de Asesoría
Jurídica de Aguirre Newman, S.A., calle General Lacy número 23, C.P. 28045
Madrid, remitiendo, junto con la solicitud, una fotocopia de un documento
oficial de identificación (DNI, Pasaporte, etc).
According to Spanish Data Protection Law 15/1999, we hereby inform that the
personal data used in this communication come from an automated data filed
owned by Aguirre Newman, S.A., which has been duly notified to the Spanish
Data Protection Agency, and whose purpose is managing (control
Re: [Ovillo] Mostrar capa sobre imagenes al hacer mouseover
Yo me preguntaría... ¿Es realmente necesario que ese título sea un h2?
Tal como lo veo a lo mejor es más práctico que pongas un simple span.
Otra opción, si realmente es un h2 que encabeza algo más que la
imagen, podría ser meter dentro del h2 el enlace y que incluya tanto
al título como a la imagen. Y a ser posible un solo enlace, porque si no
eso puede ser repetitivo para el usuario de lector de pantalla. Y por
cierto, a la imagen le deberías poner un texto alternativo con el
atributo alt.
Algo así, tal vez (suponiendo que hay contenido detrás, si no lo suyo
sería no poner h2):
div ...
h2a href=...
span class=txtMi título/span
span class=imgimg src=... alt=... //span
/a/h2
... otros contenidos a los que da título el h2
/div
Saludos,
Ramón.
Jairo escribió:
Lo he probado también, pero al estar h2 sobre la imagen, la 'tapa' y el
enlace que hay debajo no funciona.
h2 tiene un width y height del mismo tamaño que la imagen para que así el
png que es background de h2 deje ver la imagen con transparencia.
:-(
--
Jairo Ochoa
El 15 de abril de 2010 12:51, Carlos Acero Sánchez
carlos.ac...@aguirrenewman.es escribió:
Enlaza el link que le pones a la imagen y ya está.
div class=post
h2a href=mipagina.htmlspanMi titulo/span/a/h2
a href=mipagina.htmlimg class=thumbnail src=imagen.jpg //a
/div
Carlos Acero Sánchez
Dpto. Sistemas
Aguirre Newman
-Mensaje original-
De: ovillo-boun...@lists.ovillo.org [mailto:
ovillo-boun...@lists.ovillo.org] En nombre de Jairo Ochoa
Enviado el: jueves, 15 de abril de 2010 12:26
Para: Ovillo, la lista de CSS en castellano
Asunto: [Correo sospechoso] Re: [Ovillo] Mostrar capa sobre imagenes al
hacer mouseover
Hola,
Te refieres a validación W3C?
Tal cual está funciona en todos los navegadores
- Mac OS: Firefox, Camino, Chrome, Safari, Opera, SeaMonkey y Netscape
- Windows XP: Firefox
- Windows 7: Firefox, Explorer 8
Y falla en:
- Windows XP: Explorer 6
Todas las capas las muestra sobre el primer elemento. En pantalla se
muestra
un grid de 5x3 elemetos .post
Supongo que el error se debe a los valores de css position
Ahora, he hecho el cambio que sugieres
div class=post
h2a href=enlacespanMi titulo/span/a/h2
a href=enlaceimg class=thumbnail src=imagen.jpg //a
/div
En el css, cambio lo que comentaron en el anterior email por esto
.post:hover h2 { display:block; }
Estéticamente el efecto es el mismo salvo que la zona de enlace se
restringe
sólo a al texto.
Es decir, si antes daba igual donde hiceiese click, porque siempre se abría
la página, ahora sólo funciona si hago click sobre las letras del título.
¿Qué alternativa sugieres que valide y que funcione de igual forma?
Saludos,
--
Jairo Ochoa
El 15 de abril de 2010 09:39, Ramón Corominas
lis...@ramoncorominas.comescribió:
Nota:
h2 es elemento de bloque.
a es elemento inline
h2 no puede ir dentro de a si quieres que el código valide.
Saludos,
Ramón.
Jairo escribió:
Tengo este codigo html (que puedo cambiar si fuese necesario)
div class=post
a href=enlace.php
h2spanmi titulo/span/h2
img class=thumbnail src=imagen.jpg /
/a
/div
___
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
En cumplimiento de la Ley 15/1999, de 13 de diciembre, de Protección de
Datos de Carácter Personal, le informamos que los datos de carácter personal
utilizados para la presente comunicación proceden de un fichero de datos de
carácter personal titularidad de Aguirre Newman, S.A., debidamente
notificado ante la Agencia Española de Protección de Datos, cuya finalidad
es la gestión (control, mantenimiento y archivo de la documentación) de la
relación que mantiene con el GRUPO AGUIRRE NEWMAN y la comunicación con
terceros. Dichos datos, por consiguiente, han sido incorporados o serán
incorporados en dicho fichero para los usos y finalidades indicadas,
pudiendo ser objeto de comunicación a las Compañías que integran el GRUPO
AGUIRRE NEWMAN, cuya identidad podrá consultar en el aviso legal de la
página web corporativa www.aguirrenewman.es, cuando sea necesario y/o
pertinente para el cumplimiento de las finalidades señaladas.
Si Ud. no consintiese la utilización del correo electrónico para enviarle
comunicaciones electrónicas, la comunicación de sus datos de contacto al
resto de empresas del GRUPO AGUIRRE NEWMAN o deseara revocar su
consentimiento al tratamiento de sus datos, podrá hacerlo mediante un correo
Re: [Ovillo] Mostrar capa sobre imagenes al hacer mouseover
Tal vez dando el mismo ancho y alto al enlace te pueda apañar. No sé si te
descolocará algo...
.post h2 a
{
display:block;
width:110px;
height:110px;
}
Carlos Acero Sánchez
Dpto. Sistemas
Aguirre Newman Madrid
C/ General Lacy, 23. 28045 Madrid
T +31 91 319 13 14 F +34 91 319 87 57
carlos.ac...@aguirrenewman.es
www.aguirrenewman.com
Sé ecológico, antes de imprimir este e-mail piense bien si es necesario hacerlo
-Mensaje original-
De: ovillo-boun...@lists.ovillo.org [mailto:ovillo-boun...@lists.ovillo.org] En
nombre de Jairo Ochoa
Enviado el: jueves, 15 de abril de 2010 12:57
Para: Ovillo, la lista de CSS en castellano
Asunto: [Correo sospechoso] Re: [Ovillo] Mostrar capa sobre imagenes al hacer
mouseover
Lo he probado también, pero al estar h2 sobre la imagen, la 'tapa' y el
enlace que hay debajo no funciona.
h2 tiene un width y height del mismo tamaño que la imagen para que así el
png que es background de h2 deje ver la imagen con transparencia.
:-(
--
Jairo Ochoa
El 15 de abril de 2010 12:51, Carlos Acero Sánchez
carlos.ac...@aguirrenewman.es escribió:
Enlaza el link que le pones a la imagen y ya está.
div class=post
h2a href=mipagina.htmlspanMi titulo/span/a/h2
a href=mipagina.htmlimg class=thumbnail src=imagen.jpg //a
/div
Carlos Acero Sánchez
Dpto. Sistemas
Aguirre Newman
-Mensaje original-
De: ovillo-boun...@lists.ovillo.org [mailto:
ovillo-boun...@lists.ovillo.org] En nombre de Jairo Ochoa
Enviado el: jueves, 15 de abril de 2010 12:26
Para: Ovillo, la lista de CSS en castellano
Asunto: [Correo sospechoso] Re: [Ovillo] Mostrar capa sobre imagenes al
hacer mouseover
Hola,
Te refieres a validación W3C?
Tal cual está funciona en todos los navegadores
- Mac OS: Firefox, Camino, Chrome, Safari, Opera, SeaMonkey y Netscape
- Windows XP: Firefox
- Windows 7: Firefox, Explorer 8
Y falla en:
- Windows XP: Explorer 6
Todas las capas las muestra sobre el primer elemento. En pantalla se
muestra
un grid de 5x3 elemetos .post
Supongo que el error se debe a los valores de css position
Ahora, he hecho el cambio que sugieres
div class=post
h2a href=enlacespanMi titulo/span/a/h2
a href=enlaceimg class=thumbnail src=imagen.jpg //a
/div
En el css, cambio lo que comentaron en el anterior email por esto
.post:hover h2 { display:block; }
Estéticamente el efecto es el mismo salvo que la zona de enlace se
restringe
sólo a al texto.
Es decir, si antes daba igual donde hiceiese click, porque siempre se abría
la página, ahora sólo funciona si hago click sobre las letras del título.
¿Qué alternativa sugieres que valide y que funcione de igual forma?
Saludos,
--
Jairo Ochoa
El 15 de abril de 2010 09:39, Ramón Corominas
lis...@ramoncorominas.comescribió:
Nota:
h2 es elemento de bloque.
a es elemento inline
h2 no puede ir dentro de a si quieres que el código valide.
Saludos,
Ramón.
Jairo escribió:
Tengo este codigo html (que puedo cambiar si fuese necesario)
div class=post
a href=enlace.php
h2spanmi titulo/span/h2
img class=thumbnail src=imagen.jpg /
/a
/div
___
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
En cumplimiento de la Ley 15/1999, de 13 de diciembre, de Protección de
Datos de Carácter Personal, le informamos que los datos de carácter personal
utilizados para la presente comunicación proceden de un fichero de datos de
carácter personal titularidad de Aguirre Newman, S.A., debidamente
notificado ante la Agencia Española de Protección de Datos, cuya finalidad
es la gestión (control, mantenimiento y archivo de la documentación) de la
relación que mantiene con el GRUPO AGUIRRE NEWMAN y la comunicación con
terceros. Dichos datos, por consiguiente, han sido incorporados o serán
incorporados en dicho fichero para los usos y finalidades indicadas,
pudiendo ser objeto de comunicación a las Compañías que integran el GRUPO
AGUIRRE NEWMAN, cuya identidad podrá consultar en el aviso legal de la
página web corporativa www.aguirrenewman.es, cuando sea necesario y/o
pertinente para el cumplimiento de las finalidades señaladas.
Si Ud. no consintiese la utilización del correo electrónico para enviarle
comunicaciones electrónicas, la comunicación de sus datos de contacto al
resto de empresas del GRUPO AGUIRRE NEWMAN o deseara revocar su
consentimiento al tratamiento de sus datos, podrá hacerlo mediante un correo
electrónico dirigido a asesoriajurid
Re: [Ovillo] Mostrar capa sobre imagenes al hacer mouseover
Voy a probar esta opción, yo daba tamaño al span y este sólo cogía el
tamaño del texto.
--
Jairo Ochoa
El 15 de abril de 2010 13:06, Carlos Acero Sánchez
carlos.ac...@aguirrenewman.es escribió:
Tal vez dando el mismo ancho y alto al enlace te pueda apañar. No sé si te
descolocará algo...
.post h2 a
{
display:block;
width:110px;
height:110px;
}
Carlos Acero Sánchez
Dpto. Sistemas
Aguirre Newman Madrid
C/ General Lacy, 23. 28045 Madrid
T +31 91 319 13 14 F +34 91 319 87 57
carlos.ac...@aguirrenewman.es
www.aguirrenewman.com
Sé ecológico, antes de imprimir este e-mail piense bien si es necesario
hacerlo
-Mensaje original-
De: ovillo-boun...@lists.ovillo.org [mailto:
ovillo-boun...@lists.ovillo.org] En nombre de Jairo Ochoa
Enviado el: jueves, 15 de abril de 2010 12:57
Para: Ovillo, la lista de CSS en castellano
Asunto: [Correo sospechoso] Re: [Ovillo] Mostrar capa sobre imagenes al
hacer mouseover
Lo he probado también, pero al estar h2 sobre la imagen, la 'tapa' y el
enlace que hay debajo no funciona.
h2 tiene un width y height del mismo tamaño que la imagen para que así el
png que es background de h2 deje ver la imagen con transparencia.
:-(
--
Jairo Ochoa
El 15 de abril de 2010 12:51, Carlos Acero Sánchez
carlos.ac...@aguirrenewman.es escribió:
Enlaza el link que le pones a la imagen y ya está.
div class=post
h2a href=mipagina.htmlspanMi titulo/span/a/h2
a href=mipagina.htmlimg class=thumbnail src=imagen.jpg //a
/div
Carlos Acero Sánchez
Dpto. Sistemas
Aguirre Newman
-Mensaje original-
De: ovillo-boun...@lists.ovillo.org [mailto:
ovillo-boun...@lists.ovillo.org] En nombre de Jairo Ochoa
Enviado el: jueves, 15 de abril de 2010 12:26
Para: Ovillo, la lista de CSS en castellano
Asunto: [Correo sospechoso] Re: [Ovillo] Mostrar capa sobre imagenes al
hacer mouseover
Hola,
Te refieres a validación W3C?
Tal cual está funciona en todos los navegadores
- Mac OS: Firefox, Camino, Chrome, Safari, Opera, SeaMonkey y Netscape
- Windows XP: Firefox
- Windows 7: Firefox, Explorer 8
Y falla en:
- Windows XP: Explorer 6
Todas las capas las muestra sobre el primer elemento. En pantalla se
muestra
un grid de 5x3 elemetos .post
Supongo que el error se debe a los valores de css position
Ahora, he hecho el cambio que sugieres
div class=post
h2a href=enlacespanMi titulo/span/a/h2
a href=enlaceimg class=thumbnail src=imagen.jpg //a
/div
En el css, cambio lo que comentaron en el anterior email por esto
.post:hover h2 { display:block; }
Estéticamente el efecto es el mismo salvo que la zona de enlace se
restringe
sólo a al texto.
Es decir, si antes daba igual donde hiceiese click, porque siempre se
abría
la página, ahora sólo funciona si hago click sobre las letras del título.
¿Qué alternativa sugieres que valide y que funcione de igual forma?
Saludos,
--
Jairo Ochoa
El 15 de abril de 2010 09:39, Ramón Corominas
lis...@ramoncorominas.comescribió:
Nota:
h2 es elemento de bloque.
a es elemento inline
h2 no puede ir dentro de a si quieres que el código valide.
Saludos,
Ramón.
Jairo escribió:
Tengo este codigo html (que puedo cambiar si fuese necesario)
div class=post
a href=enlace.php
h2spanmi titulo/span/h2
img class=thumbnail src=imagen.jpg /
/a
/div
___
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
En cumplimiento de la Ley 15/1999, de 13 de diciembre, de Protección de
Datos de Carácter Personal, le informamos que los datos de carácter
personal
utilizados para la presente comunicación proceden de un fichero de datos
de
carácter personal titularidad de Aguirre Newman, S.A., debidamente
notificado ante la Agencia Española de Protección de Datos, cuya
finalidad
es la gestión (control, mantenimiento y archivo de la documentación) de
la
relación que mantiene con el GRUPO AGUIRRE NEWMAN y la comunicación con
terceros. Dichos datos, por consiguiente, han sido incorporados o serán
incorporados en dicho fichero para los usos y finalidades indicadas,
pudiendo ser objeto de comunicación a las Compañías que integran el GRUPO
AGUIRRE NEWMAN, cuya identidad podrá consultar en el aviso legal de la
página web corporativa www.aguirrenewman.es, cuando sea necesario y/o
pertinente para el cumplimiento de las finalidades
Re: [Ovillo] Mostrar capa sobre imagenes al hacer mouseover
Voy a probar.
Aunque la imagen no puede ir dentro del H2 ya que está presente antes de que
se muestre el H2 y queda debajo, tapada por el background/mascara del H2
El H2 lo utilizo porque el H1 da título a la página y los H2 son los enlaces
a las páginas relacionadas.
Otra opción que se me ocurre es contener todo un div y reemplazar el
span por un h2
¿Cometería el mismo fallo de validación si el a encierra el div y este a
su vez al h2?
Saludos
--
Jairo Ochoa
El 15 de abril de 2010 13:05, Ramón Corominas
lis...@ramoncorominas.comescribió:
Yo me preguntaría... ¿Es realmente necesario que ese título sea un h2?
Tal como lo veo a lo mejor es más práctico que pongas un simple span.
Otra opción, si realmente es un h2 que encabeza algo más que la
imagen, podría ser meter dentro del h2 el enlace y que incluya tanto
al título como a la imagen. Y a ser posible un solo enlace, porque si no
eso puede ser repetitivo para el usuario de lector de pantalla. Y por
cierto, a la imagen le deberías poner un texto alternativo con el
atributo alt.
Algo así, tal vez (suponiendo que hay contenido detrás, si no lo suyo
sería no poner h2):
div ...
h2a href=...
span class=txtMi título/span
span class=imgimg src=... alt=... //span
/a/h2
... otros contenidos a los que da título el h2
/div
Saludos,
Ramón.
Jairo escribió:
Lo he probado también, pero al estar h2 sobre la imagen, la 'tapa' y el
enlace que hay debajo no funciona.
h2 tiene un width y height del mismo tamaño que la imagen para que así el
png que es background de h2 deje ver la imagen con transparencia.
:-(
--
Jairo Ochoa
El 15 de abril de 2010 12:51, Carlos Acero Sánchez
carlos.ac...@aguirrenewman.es escribió:
Enlaza el link que le pones a la imagen y ya está.
div class=post
h2a href=mipagina.htmlspanMi titulo/span/a/h2
a href=mipagina.htmlimg class=thumbnail src=imagen.jpg //a
/div
Carlos Acero Sánchez
Dpto. Sistemas
Aguirre Newman
-Mensaje original-
De: ovillo-boun...@lists.ovillo.org [mailto:
ovillo-boun...@lists.ovillo.org] En nombre de Jairo Ochoa
Enviado el: jueves, 15 de abril de 2010 12:26
Para: Ovillo, la lista de CSS en castellano
Asunto: [Correo sospechoso] Re: [Ovillo] Mostrar capa sobre imagenes al
hacer mouseover
Hola,
Te refieres a validación W3C?
Tal cual está funciona en todos los navegadores
- Mac OS: Firefox, Camino, Chrome, Safari, Opera, SeaMonkey y Netscape
- Windows XP: Firefox
- Windows 7: Firefox, Explorer 8
Y falla en:
- Windows XP: Explorer 6
Todas las capas las muestra sobre el primer elemento. En pantalla se
muestra
un grid de 5x3 elemetos .post
Supongo que el error se debe a los valores de css position
Ahora, he hecho el cambio que sugieres
div class=post
h2a href=enlacespanMi titulo/span/a/h2
a href=enlaceimg class=thumbnail src=imagen.jpg //a
/div
En el css, cambio lo que comentaron en el anterior email por esto
.post:hover h2 { display:block; }
Estéticamente el efecto es el mismo salvo que la zona de enlace se
restringe
sólo a al texto.
Es decir, si antes daba igual donde hiceiese click, porque siempre se
abría
la página, ahora sólo funciona si hago click sobre las letras del
título.
¿Qué alternativa sugieres que valide y que funcione de igual forma?
Saludos,
--
Jairo Ochoa
El 15 de abril de 2010 09:39, Ramón Corominas
lis...@ramoncorominas.comescribió:
Nota:
h2 es elemento de bloque.
a es elemento inline
h2 no puede ir dentro de a si quieres que el código valide.
Saludos,
Ramón.
Jairo escribió:
Tengo este codigo html (que puedo cambiar si fuese necesario)
div class=post
a href=enlace.php
h2spanmi titulo/span/h2
img class=thumbnail src=imagen.jpg /
/a
/div
___
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
En cumplimiento de la Ley 15/1999, de 13 de diciembre, de Protección de
Datos de Carácter Personal, le informamos que los datos de carácter
personal
utilizados para la presente comunicación proceden de un fichero de datos
de
carácter personal titularidad de Aguirre Newman, S.A., debidamente
notificado ante la Agencia Española de Protección de Datos, cuya
finalidad
es la gestión (control, mantenimiento y archivo de la documentación) de
la
relación que mantiene con el GRUPO AGUIRRE NEWMAN y la comunicación con
terceros. Dichos datos, por consiguiente, han sido
[Ovillo] Mostrar capa sobre imagenes al hacer mouseover
Hola,
Estaba pensando en hacer un efecto rollover de manera que al pasar por
encima de una imagen se muestre una capa con un texto.
Lo usaré como un link a otra página.
Tengo este codigo html (que puedo cambiar si fuese necesario)
div class=post
a href=enlace.php
h2spanmi titulo/span/h2
img class=thumbnail src=imagen.jpg /
/a
/div
Y este css (que también puedo cambiar si lo consideráis)
.post {
float: left;
position: relative;
width: 110px;
height: 110px;
}
.post h2 {
display: none;
position: absolute;
top: 55px;
left: 0;
width: 100px;
height: 55px;
background: url('images/mascara.png');
}
.post .thumbnail {
width: 110px;
height: 110px;
}
El resultado que obtengo es una imagen de 110x110px con una capa (con alfa)
que cubre la mitad de la imagen.
Dentro de esa capa un texto.
¿Qué es lo que quiero?
1) Que esa capa esté oculta siempre, mostrándose la imagen completa.
2) Que esa capa se muestre al pasar por encima de la imagen, de manera que
puede leerse el texto.
3) Que al retirar el ratón la capa se vuelva a ocultar.
¿Es posible hacerlo sólo con css, sin usar js?
Si fuese necesario js, utilizo jquery en la misma web.
Gracias de antemano.
Un saludo,
--
Jairo Ochoa
___
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] Mostrar capa sobre imagenes al hacer mouseover
Sí que era fácil, pero no sé como me lié y esto es lo que había hecho:
.post h2:hover { display:block; }
Muchas gracias!
--
Jairo Ochoa
El 14 de abril de 2010 18:01, Reactivo Química Visual
conta...@reactivo.esescribió:
Prueba con algo así...
.post a:hover h2 { display:block; }
El 14 de abril de 2010 16:40, Jairo Ochoa jairo.oc...@gmail.com
escribió:
Hola,
Estaba pensando en hacer un efecto rollover de manera que al pasar por
encima de una imagen se muestre una capa con un texto.
Lo usaré como un link a otra página.
Tengo este codigo html (que puedo cambiar si fuese necesario)
div class=post
a href=enlace.php
h2spanmi titulo/span/h2
img class=thumbnail src=imagen.jpg /
/a
/div
Y este css (que también puedo cambiar si lo consideráis)
.post {
float: left;
position: relative;
width: 110px;
height: 110px;
}
.post h2 {
display: none;
position: absolute;
top: 55px;
left: 0;
width: 100px;
height: 55px;
background: url('images/mascara.png');
}
.post .thumbnail {
width: 110px;
height: 110px;
}
El resultado que obtengo es una imagen de 110x110px con una capa (con
alfa)
que cubre la mitad de la imagen.
Dentro de esa capa un texto.
¿Qué es lo que quiero?
1) Que esa capa esté oculta siempre, mostrándose la imagen completa.
2) Que esa capa se muestre al pasar por encima de la imagen, de manera
que
puede leerse el texto.
3) Que al retirar el ratón la capa se vuelva a ocultar.
¿Es posible hacerlo sólo con css, sin usar js?
Si fuese necesario js, utilizo jquery en la misma web.
Gracias de antemano.
Un saludo,
--
Jairo Ochoa
___
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
