Ejercicio paso a paso. Llamadas a javascript


Objetivo.

 

Practicar las operaciones que hay que realizar para hacer llamadas a funciones javascript.

 

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">
<!--
function MM_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);
function MM_findObj(n, d) { //v4.01
var p,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;
}
function MM_showHideLayers() { //v6.0
var i,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="#"><img src="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 javascript MM_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"><font size="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 javascript MM_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 encuentra en la capa, ésta vuelve a ocultarse.

 

   Inicio 


.