Ver Mensaje Individual
  #9 (permalink)  
Antiguo 06/08/2019, 09:04
JUMASOL
 
Fecha de Ingreso: noviembre-2005
Mensajes: 889
Antigüedad: 18 años, 5 meses
Puntos: 8
Respuesta: Eventos onclick fallan por falta de id

Primeramente mi actitud parece haber sido malentendida. Si no coloqué el código completo es para no haceros perder el tiempo con temas que no son directamente relacionados con javascript.

El problema es que el enlace ya está incluido en el título.

Se me olvidó colocar el enlace en sí:

Código:
<section id="ventanas">

<section id="v1">
   <h3><a href="pagina1">Título 1...</a></h3>					 
      <p>Párrafo..............................</p>						
</section>

<section id="v2">
   <h3><a href="pagina2">Título 2...</a></h3>					 
      <p>Párrafo..............................</p>						
</section>

<section id="v3">
   <h3><a href="pagina3">Título 3...</a></h3>					 
      <p>Párrafo..............................</p>						
</section>

...

</section>
Los títulos ocupan todo el espacio de las secciones "v" (por ventana) con un fondo traslúcido por aplicación de opacity: 0.9, y el párrafo se superpone encima tras una animación por CSS.

La idea es que el usuario pueda pulsar sobre cualquier lugar de la ventana para ser conducido a la página.

Pasado el cursor por encima de una de esas ventanas, se mueve el título hacia arriba y sube el párrafo explicativo de exactamente 240 caracteres. El problema es que al estar el párrafo encima del título en el contexto de apilamiento, si pasas el cursor sobre el texto no deja pulsar el enlace dentro de h3.

No se puede utilizar z-index para traer el enlace al frente porque entonces no se ve el párrafo al quedar detrás de la lámina de fondo del título.

Todo esto no tiene más discusión porque entraña además un problema a la hora de la responsividad y no se va a tocar. La utilización de elemento section es correcta, el título y párrafo también, y la ubicación del enlace también está en su lugar, que es precisamente el título por lógica y SEO.

El enlace funciona en toda la ventana salvo en el espacio ocupado por el párrafo, así que la idea es recurrir a js para crear otro enlace que cubriera el problema sin tener que tocar nada más.

No se va a usar class porque además cada ventana tiene un fondo de imagen y porque deben ser individualizadas por una cuestión con otra parte de la página que no tiene nada que ver con esta discusión.

La identificación de elementos comunes a las ventanas ya se hace por especificación en css.

Y utilizar el atributo data para fijar la URL de destino y obtenerla dinamicamente me parece complicar las cosas más. Se trata de una página estática con las menores complicaciones posibles pero que sí tiene problemas de diseño, como por ejemplo que esas ventanas se colocan horizontalmente en dos filas de cuatro que tienen que tener exactamente el mismo ancho para hacer juego con elementos que hay encima y debajo. Exactitud que debe mantenerse en la responsividad.

Son todos temas de diseño que no viene al caso discutir porque todo esto no es un problema de javascript, que ya quedó claro en el primer post: fallo de sucesivos eventos onclick por falta de elementos en el código si se quiere utilizar el mismo archivo js para todo el sitio web, partiendo de que no voy a cambiar el html.

Última edición por JUMASOL; 06/08/2019 a las 09:37