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

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


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


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines