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.
Tutores.org
Mostrando Codigo - Javascript
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
# Codigo ofrecido por Tutores.org
- <head>
- <script>
- function permuter(arg)
- {
- var arg2 = String(arg);
- var elt2 = document[arg2];
- if (elt2.src.indexOf('/public/download/colapsado.gif') > -1)
- {
- elt2.src = '/public/download/expandido.gif';
- }
- else
- {
- elt2.src = '/public/download/colapsado.gif';
- }
- }
- </script>
- <style type="text/css">
- a:hover{text-decoration:underline;background-color:#5fe4ff;}
- a{text-decoration:none;color:#000000;}
- </style>
- </head>
- <body bgcolor="#FFFFFF">
- <img name="section1" src="/public/download/colapsado.gif" alt="" border="0" onclick="javascript:permuter('section1');">
- <a id="lien1" href="#lien1" alt="" onclick="javascript:permuter('section1');">
- Haz click para modificar </a>
- <br>
- <br>
- <img name="section2" src="/public/download/colapsado.gif" onclick="javascript:permuter('section2');" alt="">
- <a id="lien2" href="#lien2" alt="" onclick="javascript:permuter('section2');">
- Haz click para modificar </a>
- <br>
- <br>
- <img name="section3" src="/public/download/colapsado.gif" onclick="javascript:permuter('section3');" alt="">
- <a id="lien3" href="#lien3" alt="" onclick="javascript:permuter('section3');">
- Haz click para modificar </a>
- </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 -->
<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