Este documento proporciona instrucciones para modificar un archivo HTML llamado gatos.htm para agregar funcionalidad interactiva utilizando JavaScript. Se agrega código JavaScript al archivo para mostrar y ocultar una capa cuando se hace clic en una imagen y texto. Al hacer clic en la imagen, se muestra la capa con información adicional y al hacer clic en el texto "Cerrar", la capa se oculta nuevamente.

1. Trabajo 10
1 Si no tienes abierto el Bloc de notas, ábrelo para realizar el ejercicio.
2 Abre el archivo gatos.htm, que se encuentra en la carpeta animales.
3 Copia el siguiente código delante la etiqueta </head>:
<script language="JavaScript" type="text/JavaScript">
<!-functionMM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight;
onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH)
location.reload();
}
MM_reloadPage(true);
functionMM_findObj(n, d) { //v4.01
varp,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x &&d.getElementById) x=d.getElementById(n); return x;
}
functionMM_showHideLayers() { //v6.0
vari,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}

2. //-->
</script>
4 Busca la línea <a href="#"><imgsrc="imagenes/gatito.gif" alt="gatito" border="0"></a>.
Este código hace referencia a la imagen gatito.gif, que tiene borde 0 y el texto alternativo
gatito.
Al mismo tiempo, la imagen tiene asociado un vínculo vacío (<a href="#">).
Añade onClick="MM_showHideLayers('gatosemana','','show')" después de border="0".
Con este código, estarás llamando a la función javascriptMM_showHideLayers, que se
encuentra al principio del documento. Esta función se encarga de cambiar la visibilidad de las
capas. En este caso, le estás pasando como parámetros el nombre de la capa que tiene que
mostrar gatosemana y lo que tiene que hacer show (mostrar) , por lo que la función cambiará
la visibilidad de la capa gatosemana por el valor show (mostrar).
La llamada a la función se realizará cuando hagas clic sobre la imagen (onClick).
5 Añade antes de la etiqueta </td> el siguiente código <p align="center"><fontsize="2">Pulsa
sobre la imagen para ver el gato
de la semana</font></p> para que el texto aparezca debajo de la imagen.
6 Busca la línea <p align="center"><a href="#"><font color="#000000"
size="4">Cerrar</font></a></p>, que se encuentra casi al final del documento.
Este código hace referencia a un vínculo vacío (<a href="#">) con el texto Cerrar.
Añade onClick="MM_showHideLayers('gatosemana','','hide')" después de size="4" dentro de la
etiqueta <font.
Al igual que en el punto anterior, con este código, estarás llamando a la función
javascriptMM_showHideLayers, pero para cambiar la visibilidad de la capa gatosemana por el
valor hide (ocultar).
La llamada a la función se realizará cuando hagas clic sobre el texto (onClick). De esta manera
cuando hagas clic sobre el texto cerrar se esconderá la capa.
7 Haz clic sobre el menú Archivo.
8 Haz clic sobre la opción Guardar.
9 Abre el documento gatos.htm, que acabas de guardar, en un navegador, y comprueba que
obtienes una página como la que aparece si pulsas aquí. Comprueba cómo al pulsar sobre la
imagen del gato se muestra la capa, y cómo al pulsar sobre el texto Cerrar, que se

3. encuentraenla capa, ésta vuelve a ocultarse.