 |
| Estás en: Juan Rodríguez, web personal > JavaScript > Índice de guiones > Cambiar botón y texto onclick < |
Verificado en: Opera 9, 9.20Opera 6.05, 7 y 8 Firefox 1.5 y 3 Mozilla 1.8 Netscape 7 Internet Explorer 6 y 7
|
Pulsando sobre una imagen o un enlace, cambiamos tanto la imagen como el texto (si es que lo hay) asociado a la misma. Prueba en el ejemplo de la derecha. El guión contempla 3 imágenes y otros tantos textos. Observar que se establecen parámetros de estilo, en cabecera de página, con <style type="text/css">. |
Ejemplo de aplicación de este guión Buy the Opera browser  W3C XHTML 1.1  Made with cascading style sheets |
Ejecutar Instalación Ver código Descargar + guiones
Código en las cabeceras (head) de la página
<script type="text/javascript">
<!-- inicio
var num=0;
function cambiar() {
document.getElementById("imagen"+num).style.visibility='hidden';
num = (num + 1) % 3;
document.getElementById("imagen"+num).style.visibility='visible'; }
// final -->
</script>
<style type="text/css">
div.oculto {visibility:hidden; position:absolute; padding:0 0 0 2em}
div.visible {visibility:visible; position:absolute; padding:0 0 0 2em}
img.guion {height:31px; width:88px}
</style>
Código en el cuerpo (body) de la página
<div class="visible" id="imagen0">
<img src="6113-imagen_01.png" class="guion" alt="Imagen 01" onclick="javascript:cambiar()">
<br>Buy the Opera browser</div>
<div class="oculto" id="imagen1">
<img src="6114-imagen_02.png" class="guion" alt="Imagen 02" onclick="javascript:cambiar()">
<br>W3C XHTML 1.1</div>
<div class="oculto" id="imagen2">
<img src="6115-imagen_03.png" class="guion" alt="Imagen 03" onclick="javascript:cambiar()">
<br>Made with cascading style sheets</div>
Copyright ©
Juan Rodríguez, consultor y
Begues Internet, s.l.
Todos los derechos reservados
Aviso Legal
Cuidar de nuestro entorno natural,
puede y debe ser cosa de todos.
Por ejemplo, no gastando papel para
imprimir una información que siempre
puedes tener en la pantalla de tu pc.
- -
Juan Rodríguez, consultor
Castelldefels (Barcelona)
