Foro de elhacker.net

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
  1. background-image: url("RutaImagen.jpg");
  2.  


Título: Re: Background como hipervinculo ... Ayuda !!!
Publicado por: llAudioslavell en 11 Agosto 2011, 11:13 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
  1. background-image: url("RutaImagen.jpg");
  2.  



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
  1. td {
  2.   background-image: url(imagen2.png);
  3.   cursor:pointer;
  4. }
  5.  
  6. td:hover {
  7.   background-image: url(imagen1.png);
  8. }

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
  1. <title>CSS</title>
  2. <style type="text/css">
  3. /* Como en el ejemplo de [u]nsigned, definis un background para td
  4. y al pasar el mouse este cambia por imagen1.jpg*/
  5. td {
  6.   background-image: url(imagen2.jpg);
  7.   cursor:pointer;
  8. }
  9. td:hover {
  10.   background-image: url(imagen1.jpg);
  11. }
  12. .enlace a {
  13.   display:none; /* Ocultamos el enlace */
  14. }
  15. td:hover .enlace a {
  16.   display:block; /* Al pasar el mouse sobre td mostramos el enlace */
  17. }
  18. td:hover .ocultar{
  19.   display:none; /* y ocultamos */
  20. }
  21.  
  22. </head>
  23.  
  24.   <tr>
  25.  <td width="291" height="86" >
  26. <div class="ocultar">Enlace</div>
  27. <div class="enlace"> <a href="#">ENLACE</a></div>
  28.  </td>
  29.   </tr>
  30.  
  31. </body>
  32. </html>
  33.  


Título: Re: Background como hipervinculo ... Ayuda !!!
Publicado por: llAudioslavell en 11 Agosto 2011, 19:22 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
  1. <title>CSS</title>
  2. <style type="text/css">
  3. /* Como en el ejemplo de [u]nsigned, definis un background para td
  4. y al pasar el mouse este cambia por imagen1.jpg*/
  5. td {
  6.   background-image: url(imagen2.jpg);
  7.   cursor:pointer;
  8. }
  9. td:hover {
  10.   background-image: url(imagen1.jpg);
  11. }
  12. .enlace a {
  13.   display:none; /* Ocultamos el enlace */
  14. }
  15. td:hover .enlace a {
  16.   display:block; /* Al pasar el mouse sobre td mostramos el enlace */
  17. }
  18. td:hover .ocultar{
  19.   display:none; /* y ocultamos */
  20. }
  21.  
  22. </head>
  23.  
  24.   <tr>
  25.  <td width="291" height="86" >
  26. <div class="ocultar">Enlace</div>
  27. <div class="enlace"> <a href="#">ENLACE</a></div>
  28.  </td>
  29.   </tr>
  30.  
  31. </body>
  32. </html>
  33.  


: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

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