Publicentral.com - publicentra, promocion, promocionar, buscadores, paginas webs, registroPublicentral.com - promocion de paginas web y negocios online
Mostrando Codigo - Javascript
Code

Javascript - Cambio de imagen al hacer click - Tipo menu

Códigos Javascript

El ejemplo muestra como al hacer click sobre un enlace este modifica la imagen asociada, muy util para utilizarlo como menus.
Visitas: 45,529 - 03/06/2005 0:36:38
DemoNO CONTIENE ARCHIVO DESCARGABLEComentario
EXPLICACION

Debemos modificar el path o rutas hacia las imagenes
 collapsado.gif
o
 expandido.gif

Puedes guardar estas imagenes pulsando el boton derecho y guardar imagen como.

CODIGO
Este codigo aun no ha sido probado por Tutores.org en ChromeEste codigo aun no ha sido probado por Tutores.org en FirefoxCodigo probado en Internet Explorer 7+Este codigo aun no ha sido probado por Tutores.org en OperaEste codigo aun no ha sido probado por Tutores.org en Safari


# Codigo ofrecido por Tutores.org

  1. <head>
  2.     <script>
  3.     function permuter(arg)
  4. {
  5.     var arg2 = String(arg);
  6.     var elt2 = document[arg2];
  7.     if (elt2.src.indexOf('/public/download/colapsado.gif') > -1)
  8.     {
  9.         elt2.src = '/public/download/expandido.gif';
  10.     }
  11.     else
  12.     {  
  13.         elt2.src = '/public/download/colapsado.gif';
  14.     }
  15. }
  16. </script>
  17.     <style type="text/css">
  18.         a:hover{text-decoration:underline;background-color:#5fe4ff;}
  19.         a{text-decoration:none;color:#000000;}
  20.     </style>
  21. </head>
  22. <body bgcolor="#FFFFFF">
  23.         <img name="section1" src="/public/download/colapsado.gif" alt="" border="0" onclick="javascript:permuter('section1');">
  24.         <a id="lien1" href="#lien1" alt="" onclick="javascript:permuter('section1');">
  25.             Haz click para modificar </a>  
  26.         <br>
  27.         <br>
  28.         <img name="section2" src="/public/download/colapsado.gif" onclick="javascript:permuter('section2');" alt="">
  29.         <a id="lien2" href="#lien2" alt="" onclick="javascript:permuter('section2');">
  30.             Haz click para modificar </a>  
  31.         <br>
  32.         <br>
  33.         <img name="section3" src="/public/download/colapsado.gif" onclick="javascript:permuter('section3');" alt="">
  34.         <a id="lien3" href="#lien3" alt="" onclick="javascript:permuter('section3');">
  35.             Haz click para modificar </a>  
  36. </body>



ENLACE AL CODIGO
Si quieres enlazar desde tu pagina a este codigo
<!-- Inicio enlace Tutores.org -->
<a title="Tutores.org - Cambio de imagen al hacer click - Tipo menu" href="http://www.tutores.org/codigo/1472/" target="_blank">Cambio de imagen al hacer click - Tipo menu</a>
<!-- Final enlace Tutores.org -->
COMENTARIOS
Comentario usuario
anavoig
5 5
muchas gracias era justo lo que necesitaba gracias!!!!!
Comentario usuario
albrt
1 5
gracias por el aporte! excelente
Comentario usuario
31-12-2007 10:37:04
3 5
exelente código me ayudo demasiado gracias
INSERTAR COMENTARIO

Usuario:
Email:
Comentario:
Codigo Seguridad


Antes de enviar un comentario...
Todos los comentarios son revisados personalmente
Todo comentario que no haga relacion al codigo mostrado en esta pagina sera eliminado

Usuarios registrados tienen preferencia en recibir respuestas de ayuda!!
Ademas de poder insertar Imagenes,Enlaces y otras propiedades del editor.
Por favor, insertar los comentarios descriptivos.