Test Foro de elhacker.net SMF 2.1

Programación => Desarrollo Web => Mensaje iniciado por: llAudioslavell en 11 Agosto 2011, 08:43 AM

Título: Background como hipervinculo ... Ayuda !!!
Publicado por: llAudioslavell en 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 ^^
Título: Re: Background como hipervinculo ... Ayuda !!!
Publicado por: EFEX en 11 Agosto 2011, 09:46 AM
Propiedades CSS
http://www.mclibre.org/consultar/amaya/css/css_propiedades.html (http://www.mclibre.org/consultar/amaya/css/css_propiedades.html)

Código (css) [Seleccionar]

background-image: url("RutaImagen.jpg");
Título: Re: Background como hipervinculo ... Ayuda !!!
Publicado por: llAudioslavell en 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 (http://www.mclibre.org/consultar/amaya/css/css_propiedades.html)

Código (css) [Seleccionar]

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




ola gracias ^^ pero me podrias ayudar siendo un poco mas detallado porfavor ??? te lo agradeceria mucho
Título: Re: Background como hipervinculo ... Ayuda !!!
Publicado por: [u]nsigned en 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.
Título: Re: Background como hipervinculo ... Ayuda !!!
Publicado por: 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]

<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>
Título: Re: Background como hipervinculo ... Ayuda !!!
Publicado por: llAudioslavell en 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]

<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>



:D Muchas gracias ^^ lo intenrtare.... les cuento despues como me fue
Título: Re: Background como hipervinculo ... Ayuda !!!
Publicado por: llAudioslavell en 11 Agosto 2011, 20:04 PM
Cita de: Audioslave™ en 11 Agosto 2011, 19:22 PM

:D 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);