Background como hipervinculo ... Ayuda !!!

llAudioslavell · 11 Agosto 2011, 08:43 AM

Saludos a todos de este gran foro ^^

bueno tngo una duda y quisiera que me ayuden talves lo hagan talves no.. espero que si gracias de ante mano ^^

mi problema es que estoy desarrollando mi menu y quisiera darle mas estilo, quisiera que al pasar el mouse por la imagen que quiero .. cambie a una segunda imagen y que esta segunda imagen sea un hipervinculo .. bueno lo que yo eh intentado es lo siguiente

mi css:
td:hover {

   background:imagen1.png;

}

mi html:

<table>
   <tr>
      <td width="291" height="86" background="imagen2.png" >      </td>
   </tr>
</table>

aqui lo que quiero es que la segunda imagen sea el hipervinculo espero que me ayuden y para los que saven no se rian de mi pues solo soy un novato con ganas de aprender =) gracias ^^

EFEX · 11 Agosto 2011, 09:46 AM

Propiedades CSS
http://www.mclibre.org/consultar/amaya/css/css_propiedades.html

Código (css) [Seleccionar]


background-image: url("RutaImagen.jpg");

llAudioslavell · 11 Agosto 2011, 11:13 AM

Cita de: EFEX en 11 Agosto 2011, 09:46 AM
Propiedades CSS
http://www.mclibre.org/consultar/amaya/css/css_propiedades.html

Código (css) [Seleccionar] Expandir
background-image: url("RutaImagen.jpg");

ola gracias ^^ pero me podrias ayudar siendo un poco mas detallado porfavor ??? te lo agradeceria mucho

[u]nsigned · 11 Agosto 2011, 13:43 PM

Código (css) [Seleccionar]

td {
   background-image: url(imagen2.png);
   cursor:pointer;
}

td:hover {
   background-image: url(imagen1.png);
}

De esta forma al pasar el mouse por cualquier celda de una tabla su imagen de fondo cambiara de imagen2.png a imagen1.png, y ademas el cursor del mouse cambiara a una manito.

EFEX · 11 Agosto 2011, 14:35 PM

Tambièn el habla de que la segunda imagen sea un hipervínculo‎, mi idea es que oculte un .div y muestre otro .div que estaba oculto y que este muestre el hipervínculo, algo asì:

Código (html4strict) [Seleccionar]


<html>
<head>
<title>CSS</title>
<style type="text/css">
/* Como en el ejemplo de [u]nsigned, definis un background para td
y al pasar el mouse este cambia por imagen1.jpg*/
td {
   background-image: url(imagen2.jpg);
   cursor:pointer;
}
td:hover {
   background-image: url(imagen1.jpg);
}
.enlace a {
   display:none; /* Ocultamos el enlace */
}
td:hover .enlace a {
   display:block; /* Al pasar el mouse sobre td mostramos el enlace */
}
td:hover .ocultar{
   display:none; /* y ocultamos */
}

</style>
</head>
<body>

<table>
   <tr>
	  <td width="291" height="86" >
		<div class="ocultar">Enlace</div>
		<div class="enlace"> <a href="#">ENLACE</a></div>
	  </td>
   </tr>
</table>

</body>
</html>

llAudioslavell · 11 Agosto 2011, 19:22 PM

Cita de: EFEX en 11 Agosto 2011, 14:35 PM
Tambièn el habla de que la segunda imagen sea un hipervínculo‎, mi idea es que oculte un .div y muestre otro .div que estaba oculto y que este muestre el hipervínculo, algo asì:

Código (html4strict) [Seleccionar] Expandir
<html> <head> <title>CSS</title> <style type="text/css"> /* Como en el ejemplo de [u]nsigned, definis un background para td y al pasar el mouse este cambia por imagen1.jpg*/ td { background-image: url(imagen2.jpg); cursor:pointer; } td:hover { background-image: url(imagen1.jpg); } .enlace a { display:none; /* Ocultamos el enlace */ } td:hover .enlace a { display:block; /* Al pasar el mouse sobre td mostramos el enlace */ } td:hover .ocultar{ display:none; /* y ocultamos */ } </style> </head> <body> <table> <tr> <td width="291" height="86" > <div class="ocultar">Enlace</div> <div class="enlace"> <a href="#">ENLACE</a></div> </td> </tr> </table> </body> </html>

Muchas gracias ^^ lo intenrtare.... les cuento despues como me fue

llAudioslavell · 11 Agosto 2011, 20:04 PM

Cita de: Audioslave™ en 11 Agosto 2011, 19:22 PM

Muchas gracias ^^ lo intenrtare.... les cuento despues como me fue

que puedo decir..... miles gracias ^^ consegui lo que queria.. aun que modifique algo ^^ pero igual muchisimas gracias... que les valla bien ^^ javascript:void(0);