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; }

}

//-->

</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

encuentraenla capa, ésta vuelve a ocultarse.