HTML - duda con un enlace

   
Vista:

duda con un enlace

Publicado por vicent (3 intervenciones) el 02/04/2011 22:12:23
Buenas, tengo una capa que posee una imagen y un texto y me gustaría que todo fuera un vinculo en el cual al pasar el ratón por encima de la capa que el texto cambiara de color...

En lo que tengo hecho solo se cambia cuando paso por encima del texto:

HTML:

<div class="apartados_home_elemento">
<img src="img/portada-grafico.jpg" alt="portada diseño grafico" />
<table class="tabla" width="170" cellspacing="0" cellpadding="0">
<tr>
<td><img src="img/icono-grafico.jpg" alt="icono diseño grafico" /></td>
<td class="elemento_texto1"><a href="diseno-grafico.html"><strong>Diseño gráfico</strong></a></td>
</tr>
</table>
</div>

CSS:

.apartados_home_elemento{ width:180px; display:inline-block; margin-right:80px;}
.elemento_texto1{ font-family: Verdana, Geneva, sans-serif; font-size: 10px; color:#FFF; line-height:14px; background-color:#000;}
.elemento_texto1 a:hover{color:#2EAADC;}


He intentado hacerlo insertando la etiqueta "<a...>de muchas formas y estoy por pensar que no se puede hacer...

¿Alguien me puede ayudar?

¡Muchas gracias!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

duda con un enlace

Publicado por xve (1178 intervenciones) el 03/04/2011 09:41:22
Hola Vicent, la verdad es que es un poco liado, y la única manera que he tenido para conseguirlo, es con javascript... supongo que hay alguna otra manera, pero no la he sabido encontrar...

Lo que he hecho, ha sido que cuando pase el ratón por el div principal, cambio los colores mediante javascript, y cuando el ratón ya no pasa por el div principal, se vuelve a cambiar el color.

El enlace lo he puesto fuera del div para que valga para todo el contenido...

Quedaría el código así:

<a href="diseno-grafico.html">
<div class="apartados_home_elemento" onmouseover="document.getElementById('texto').style.color='#ff0000';" onmouseout="document.getElementById('texto').style.color='#ffffff';">
<img src="img/portada-grafico.jpg" alt="portada diseño grafico" />
<table class="tabla" width="170" cellspacing="0" cellpadding="0">
<tr>
<td><img src="img/icono-grafico.jpg" alt="icono diseño grafico" /></td>
<td id='texto' class="elemento_texto1"><strong>Diseño gráfico</strong></td>
</tr>
</table>
</div>
</a>

Espero que te sirva
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

duda con un enlace

Publicado por vicent (3 intervenciones) el 03/04/2011 14:02:04
Muchas gracias xve!

Lo probaré luego como me has dicho y te digo algo...

Sólo una duda... ese código javascript es código validado por el W3C?

Es que no sé hasta que punto acepta el Javascript el W3C...

Gracias!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar