Aquí Podrás Encontrar Ejemplos de Javascript

http://www.gamarod.com.
ar/
Aqu Podrs encontrar ejemplos de Javascript. Scrollers, Utilidades, Informaciones, Y mas curiosidades. Poco a poco iremos aadiendo nuevos ejemplos.
Para saber introducirlos deberas de dominar algo de java y html. aunque la mayora estn "tiraos"..xDD
Ejemplo Este simple cdigo sirve para escribir un mensaje en la barra de estado.. Puedes ver el que esta abajo.
Cdigo <BODY onLoad="window.defaultStatus='AQU VA TU MENSAJE';return true">
Ejemplo Este es otro scroller. Con este codigo podris incluir un mensaje en la barra de estado, al pasar el mouse por un link. Lo nico que debis de hacer es aadirlo justo detrs de A HREF="TuLink.html". ( Nota -> Yo he intentado aadirlo con FrontPage 2000, y no rula, pero pasarlo a Frontpage 98, que si os ira. )
Cdigo
onMouseOver="window.status='TU MENSAJE VA AQUI';return true"
Ejemplo Aade tu pagina a favoritos pulsando en una palabrita.
Cdigo <script language="JavaScript"> //AADIR A FAVORITOS //Autor: Ruben GF //Este script y otros muchos pueden //descarse en
//Wopzone: http://wopzone.miarroba.com var direccion = "http://wopzone.miarroba.com" var titulo = "Wopzone - MP3 - Infografia - Javascripts - Jamiroquai y Mas" if ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4)) { document.write('<small><a href="javascript:window.external.AddFavorite(direccion, titulo);" ') document.write('onMouseOver=" window.status=') document.write("'Aada esta pagina a sus favoritos.'; return true ") document.write('"onMouseOut=" window.status=') document.write("' '; return true ") document.write('">Aada esta pagina a sus favoritos</a></small>') } else { document.write("Aada esta pagina a sus marcadores!") } </script>
Ejemplo El siguiente es tambien un scroller, pero mas dinamico, y un pelin mas comlicado de ponerlo. Hay 2 codigos, el primero debes de incluirlo normalmente, pero el segundo debes introducirlo justo detras de : <BODY BGCOLOR="#FFFFFF" TEXT="#000080" LINK="#FF0000" VLINK="#000070" ALINK="#000070". Si todo a ido bien te aparecera un scroller, en el que se ira escribiendo tus mensajes como una maquina de escribir.
Cdigo <SCRIPT LANGUAGE="JavaScript"> var speed = 50 // decrease value to increase speed (must be positive) var pause = 2000 // increase value to increase pause var timerID = null var bannerRunning = false var ar = new Array() ar[0] = "TU MENSAJE #1" ar[1] = "TU MENSAJE#2" ar[2] = "TU MENSAJE #3" ar[3] = "TU MENSAJE #4" var currentMessage = 0 var offset = 0 function stopBanner() { if (bannerRunning) clearTimeout(timerID) bannerRunning = false } function startBanner() { stopBanner() showBanner() }
function showBanner() { var text = ar[currentMessage] if (offset < text.length) { if (text.charAt(offset) == " ") offset++ var partialMessage = text.substring(0, offset + 1) window.status = partialMessage offset++ timerID = setTimeout("showBanner()", speed) bannerRunning = true } else { offset = 0 currentMessage++ if (currentMessage == ar.length) currentMessage = 0 timerID = setTimeout("showBanner()", pause) bannerRunning = true } } // --> </SCRIPT> codigo 2 -> Ya sabes donde debes de introducirlo -> <body onLoad="startBanner()">
Ejemplo El siguiente cdigo le dice al visitante la resolucin a la que esta funcionando su monitor.
Cdigo <SCRIPT Language="JavaScript">document.write(screen.width + " x " + screen.height)</SCRIPT>
Ejemplo Este codigo le muestra al visitante el sistema operativo y el explorador que esta usando en ese momento.
Cdigo
<Script Language="JavaScript">  </script>
Ejemplo Este otro elimina el click derecho, y al pulsarlo te sale un mensaje de alerta. ( Siento no haber puesto el ejemplo,, pero es que no me mola nada )
Cdigo <SCRIPT language=JavaScript1.1> </SCRIPT>
Ejemplo Este codigo te permite ver el codigo fuente, pulsando un boton, ( Seguro que este te mola,, pillin !! )
Cdigo  </script>
Bien, en resumen lo que realiza este codigo es precargar las imagenes puestas en el vector imagenes...
var imagenes = new Array("imagen1.gif","imagen2.gif","imagen3.gif");

Podemos modificar la ruta de acceso a las imagenes ("imagen1.gif"....) y asi definir que imagenes queremos precargar, ahora bien lo que nos falta es llamar a la funcion cargarimagenes para cargar nuestras imagenes, esto lo hacemos dentro de la etiqueta BODY y es conveniente realizarlo antes de cualquier otro codigo...
<BODY> <script> cargarimagenes(); </script> </BODY>

Con el codigo anterior ya tenemos cargadas las imagenes, lo que nos queda es administrar bien la carga de imagenes, por ejemplo en una pagina x que no tenga mucho contenido podemos cargar las imagenes de otra pagina del sitio asi ya no ahorramos algo de tiempo, entonces cuando el usuario visita esa pagina las imagenes se cargan de forma inmediata ;-) Espero que les sea util, Saludos!
El objeto Image.El lenguaje JavaScript posee un objeto propio asociado a cada una de las imgenes de un documento HTML, el objeto Image. Adems, tambin posee un array particular, el array images, que contiene todas las imgenes presentes en la pgina. Dentro de la jerarqua propia de este lenguaje, tanto el objeto Image como la matriz images se encuentran incluidos dentro del objeto document, que a su vez se encuentra incluido en al objeto principal window. Por lo tanto, al ser estos objetos elementos propios del lenguaje, podemos referirnos a ellos y acceder a sus propiedades de forma directa, sin tener que recurrir a capas ni otros elementos externos. As, podemos acceder directamente a una propiedad cualquiera de una imagen del documento de dos formas diferentes: 1) mediante el objeto Image, siendo la sintaxis general en este caso la siguiente: document.nombre_imagen.nombre_propiedad donde nombre_imagen es el nombre asignado a la imagen mediante su atributo NAME (es condicin indispensable para usar este mtodo el haber asignado a la imagen un nombre identificador nico mediante el atributo NAME), y nombre_propiedad define la propiedad a la que queremos acceder. 2) mediante la matriz images[]: esta matriz contiene todas las imgenes del documento, empezando su ndice interno por 0, como en todos los arrays de JavaScript. La sintaxis general es del tipo: document.images[indice].nombre_propiedad
La equivalencia entre indice y la imagen que le corresponde se establece de forma secuencial, de tal forma que images[0] representar a la primera imagen insertada en el BODY de la pgina, images[1] a la segunda, y as sucesvamente, salvo que se haga una declaracin explcita al respecto. El array images posee la propiedad length, que almacena el nmero de imgenes presentes en el documento. Para obtener este, basta con escribir: document.images.length. Ejemplos: - Acceso a la propiedad WIDTH de la imagen bandera: document.images.bandera.width o document.bandera.width - Acceso a la propiedad SRC de la imagen bandera: document.images[1].src Ejemplo prctico: vamos a mostrar en pantalla la anchura de la imagen siguiente:
que hemos introducido en la pgina mediante:
<img src="img/logo.gif" name="logotipo" width="249" height="28" border="0">

y para ello escribimos:
<form> <inputtype="button"value= "dimeanchura"onClick="alert('anchura='+document.logotipo.width)"> </form>

que podemos ver en accin pulsando el botn creado: De esta forma podemos acceder y/o cambiar cada una de las propiedades de una imagen. Por ejemplo, si queremos cambiar la anchura de la imagen anterior basta escribir:
document.logotipo.width="500"
que podis comprobar pulsando el siguiente botn:
Nota: el atributo width es de slo lectura para Nestcape 4x, por lo que podemos leer su valor, pero no modificarlo. En cambio, s podemos hacer esto en Internet Explorer y en Nestcape 6x.
Propiedades del objeto Image.El objeto Image pose una serie de propiedades, a las que podemos acceder mediante JavaScript, permitiendo este lenguaje leer estas propiedades e incluso cambiar muchas de ellas. La forma de acceder a todas ellas es: document.nombre_imagen.propiedad Las principales propiedades del objeto Image son: name: que referencia el nombre identificador nico de la imagen asociada al objeto. La forma de acceder a esta propiedad es: document.images[indice].name Podemos por ejemplo aprovechar el array images para obtener el name de todas las imgenes de nuestra pgina:
<script language="JavaScript" type="text/javascript"> var nombres = ""; for (i=0;i<document.images.length;i++) { nombres= + document.images[i].name + "/n"; } </script> <input type="button" value="dame names" onClick="alert(nombres);">
El cdigo JavaScript anterior debe situarse al final de la pgina, antes de la etiqueta </BODY>, para que las imgenes estn situadas antes que l, con objeto de que sepa las imgenes que hay en la pgina. Si lo establecemos tal como est dentro de la cabecera, al no haberse cargado todava las imgenes, obtendremos la variable nombres como una cadena vaca. Para solucionar esto, podemos declarar antes de la variable las imgenes de la pgina, mediante el constructor de objetos Image, que veremos en el captulo siguiente. En nuestro caso, slo aparece en la ventana de resultados los nombres de la imagen del logo de la pgina y del punto rojo que he usado para crear la tabla que lo contiene, ya que estas son las nicas por encima a las que hemos asignado el atributo name. Tambin observars si pulsas el botn anterior que en la ventana que aparece quedan muchos huecos vacos; son debidos a todas las imgenes de la pgina por encima del cdigo a las que no hemos asignado la propiedad name. src: que almacena la ruta de la imagen asociada al objeto. As, si queremos asignar la ruta de una imagen a una variable, para poder por ejemplo presentar en pantalla esta ruta, deberemos escribir: var ruta = document.nombre_imagen.src; y luego podemos usar esta variable desde un botn de formulario, por ejemplo:
<img name="dinosaurio" src="img/avatar.gif" width="60" height="60" border="0">
<script language= "JavaScript" type="text/javascript"> var ruta = document.dinosaurio.src; </script> <input type="button" value="dame ruta" onClick="alert(ruta);">
Esta propiedad es fundamentalmente la usada para construir rollovers, en los que cambiamos dinmicamente su valor. Para ello, hay que establerlo siempre entre comillas, dobles o simples, ya que src trata la ruta como una cadena de texto (variable de tipo string). width / height: que representa la anchura y la altura de la imagen asociada al objeto, y que podemos leer (en los 3 navegadores comunes) y cambiar (slo en Explorer y Nestcape 6x) de forma dinmica. Ejemplo:
<input type="button" value= "dame altura" onClick="alert(document.dinosaurio.height)">

border: que se refiere al atributo border de la imagen asociada al objeto. Para acceder a esta propiedad deberemos escribir: document.images[indice].border o document.nombre_imagen.border
Como ejemplo, vamos a cambiar dinmicamente el borde de la imagen inferior:
<input type="button" value= "cambia borde"onClick="document.icono.border=10;">
Nota: esto slo funcionar en Internet Explorer y en Nestcape 6x; para las versiones 4x de Nestcape esta propiedad es de slo lectura, por lo que podemos abtener su valor, pero no cambiarlo. hspace / vspace: que define el espacio horizontal o vertical de una imagen flotante respecto al texto que la rodea. El acceso a esta propiedad se logra mediante: document.nombre_imagen.hspace lowsrc: que fija la ruta de una imagen accesoria, generalmente una versin de menos peso en Ks de la imagen principal, que se debe cargar en pantalle mientras se recibe esta. Su sintaxis es: document.nombre_imagen.lowsrc prototype: propiedad muy importante desde el punto de vista del programador web, ya que permite aadir propiedades y mtodos adicionales a un objeto Image, es decir, permite ampliar lo que es el objeto en s, aumentando sus propiedades por defecto. No vamos a entrar en detalles sobre esta propiedad, comn a muchos de los objetos propios de JavaScript, ya que para su uso hace falta un conocimiento profundo de este lenguaje. Pero s decir que sirve, por ejemplo, para asignar una nueva propiedad, que vamos a llamar orden, de tipo numrico, en la que podemos guardar un orden de presentacin en una ventana flotante, y mediante cdigo permitir al usuario que seleccione una serie de imgenes de las contenidas en nuestra pgina. Luego, mediante esta nueva propiedad orden podemos presentarlas ordenadas en la pantalla flotante (es slo un ejemplo). Para ms informacin al respecto, consultar un buen manual de JavaScript avanzado. complete: propiedad del objeto Image de tipo booleano, cierta cuando la imagen se ha acabado de cargar en memoria, y falsa en caso contrario. Slo es soportada por Nestcape Navigator, por lo que no se debe usar, en vistas a la compatibilidad.
Con esto acabamos las propiedades principales del objeto Image. Slo aadir que las propiedades border, name y vspace no son accesibles para objetos creados mediante el constructos Image( ). Este mtodo constructor de nuevos objetos Image lo vamos a estudiar a continuacin, junto con los principales eventos soportados por una imagen.
Eventos para imgenes.El objeto Image admite slamente 3 eventos comunes a los 3 navegadores comunes: Internet Explorer, Nestcape Navigator 4x y Nestcape Navigator 6x. Estos son: onAbort: que se activa cuando se aborta la carga de una imagen en pantalla, por ejemplo porque el usuario ha pulsado la opcin "detener" (stop) en la barra superior de iconos del navegador. Ejemplo de sintaxis:
<img name="imagen1"src="img/logo.gif"........onAbort="alert('ha cancelado la carga de la imagen')">

onError: que se dispara cuando por algn motivo externo no se ha podido realizar la carga de la imagen en pantalla, por ejemplo porque la ruta de la misma est mal especificada. Ejemplo de sintaxis:
<img name="imagen1"src="img/logo.gif"........onError="alert('la imagen del logotipo no se ha podido cargar')">

onLoad: que se activa cuando se ha acabado de cargar la imagen y se presenta en pantalla. Ejemplo de sintaxis:
<img name="imagen1"src="img/logo.gif"........onLoad="alert('ya se ha cargado la imagen del logotipo')">

Pero adems de estos eventos comunes, las imgenes soportan otra serie de eventos que si bien no son soportados por Nestcape 4x, s lo son por Internet Explorer y por Nestcape 6x. Por este motivo, slo es conveniente su uso cuando van a ejecutar una accin que no sea fundamental ni para la presentacin ni para la ejecucin de cdigo de la pgina. Esperemos a que pronto se estandarice el uso de Nestcape 6x y se deje a un lado las versiones 4x, y entonces podremos aplicar estos eventos con compatibilidad total. Estos eventos adicionales son: onClick: que se activa cuando se hace click con el puntero del ratn sobre la imagen. Ejemplo de sintaxis:
<img name="imagen1"src="img/logo.gif"........onClick="alert('gracias por pulsarme')">
onmouseOver: que se activa cuando se el puntero del ratn pasa sobre la imagen. Ejemplo de sintaxis:
<img name= "imagen1"src="img/logo.gif"........onmouseOver="alert('gracias por pasar sobre m)">
onmouseOut: que se activa cuando el puntero del ratn, trs pasar sobre la imagen, se va de ella. Ejemplo de sintaxis:
<img name= "imagen1"src="img/logo.gif"........onmouseOut="alert('adios, amigo')">
Nota cmo he situado la imagen anterior en el lateral izquierdo. Si la centro, como estn las anteriores, y coincide que el usuario ha desplazado la pgina con la barra lateral de scroll de tal forma que la imagen queda centrada tambin verticalmente, se produce un curioso y molesto efecto. Al irse el cursor de la imagen se lanza la pantalla de alerta, con lo que tienes que pulsar el botn aceptar de la misma para que se cierre. Pero al hacer esto, cuando se cierra, el cursor se encuentra de nuevo sobre la imagen, con lo que si lo quitas de encima se repite el proceso, y as sucesvamente. La nica solucin es cerrar la ventana de alerta pulsando la cruz de la esquina superior derecha de la misma, pero si el usuario no ce en ello, se ver obligado a cerrar la ventana del navegador mediante el Administrador de Tareas. Cuidado con estos ciclos indeseados!. Tambin podramos aplicar otros eventos de este tipo, como onmouseUp, ondblClick, etc., pero no suelen ser tiles, causando normalmente ms problemas que ventajas. Compatibilizando eventos.Hemos visto que las imgenes slo admiten como eventos estndares onLoad, onError y onAbort, pero la mayora de las veces nosotros necesitamos elementos que soporten todo tipo de eventos, como onClick, onmouseOver, etc., y en todo tipo de navegadores. Podemos, con un poco de imaginacin, utilizar otros elementos de JavaScript para conseguir esto. As, sabemos que el objeto Link s admite todo tipo de eventos, por lo que podemos usarlo como herramienta auxiliar para dotar a las imgenes de las funcionalidades que necesitamos. La idea es muy simple: basta situar la imagen que deseamos que soporte los eventos dentro de un enlace simple de HTML, es decir, situando la etiqueta <IMAGE> dentro de la pareja de etiquetas < A HREF.....>...</A>, y entonces establecer el evento necesario NO en la imagen, si no en el enlace. Como ejemplo prctico vamos a introducir una imagen que soporte de forma general el evento onClick:
<a href="#" onClick="alert('que evento ms bonito');return false;"><img src="img/avatar.gif" width="60" height="60" border="0"></a>
Nota lo siguiente: 1) si sitas el cursor sobre la imagen vers que ste se transforma en la mano tpica de los enlaces. Lgico, ya que hemos transformado la imagen en uno de ellos. Si deseas eliminar este efecto, basta con asignar al enlace un estilo para el cursor, dejando este como default:
<a href="#" ................ style="cursor:default;"><img src=..........></a>

pero ten en cuenta que esto slo ser vlido para Internet Explorer y para Nestcape 6x. Las versiones 4x de este ltimo navegador no soportan el estilo en cursores, por lo que en ellos siempre aparacer la mano. 2) Ojo con el atributo border. Debes ponerlo siempre, igualndolo a cero, ya que si no se ver un recuadro azul alrededor de la imagen, el tpico de todos los enlaces. 3) Hemos escrito a href="#" porque no vamos a llamar a ninguna pgina, y return false para anular el efecto del enlace en s, ya que slo queremos que se ejecute el evento, no la llamada del enlace. Por lo dems este truco es totlmente compatible, y podemos desde el evento del enlace ejecutar cdigo JavaScript o llamar a una funcin previamente definida. El constructor de objetos Image.El objeto Image posee en JavaScript un mtodo constructor, de tal forma que podemos declarar con l un objeto de este tipo al principio de nuestra pgina, dentro de la cabecera de la misma. La sintaxis para usar este constructor es la siguiente: nombre_imagen = new Image (width,height); donde los parmetros width y height corresponden a los atributos anlogos de la imagen definida. Si no especificamos estos parmetros, con la declaracin del constructor tendremos ya creado el nuevo objeto Image, pero el navegador no sabr el tamao que va a tener la imagen asociada. No obstante, no suele ser necesario establecer estos parmetros, por lo siguiente. El navegador no sabe tampoco con la declaracin anterior qu imagen en concreto es la asociada al objeto, por lo que no podr cargarla en memoria, y si nos referimos a ella para hacer que aparezca dinmicamente se producir un error. Para evitar esto, la declaracin del objeto se debe acompaar de otra en la que establecemos qu imagen en concreto es la asociada al objeto, y esto se hace con la escritura: nombre_imagen = new Image ( ); nombre_imagen.src = "ruta_imagen"; Y con esto el navegador ya sabe que hemos declarado un nuevo objeto imagen y sabe tambin qu imagen en concreto es la asociada al objeto, por lo que conoce su peso en Ks, pudiendo cargarla en memoria y tenerla as disponible para poder usarla cuando queramos. Si adems hemos declarado su tamao mediante los parmetros width y height, ya tiene todos los datos que definen al nuevo objeto. Ejemplo de declaracin completa: logotipo = new Image(249,28); logotipo.src="img/logo.gif"; La declaracin de los objetos Image que va a haber en nuestra pgina es muy importante, sobre todo en el caso de que en ella vayamos a cambiar dinmicamente la ruta de alguna de las imgenes inicialmente presentes en el BODY, como ocurre con los famosos rollovers, ya que si no hemos declarado en la cabecera el objeto Image correspondiente a la nueva imagen a pintar en pantalla, con su ruta correcta, el navegador no sabr a qu nos referimos, con lo que nos dar el tpico error de JavaScript "document.nombre_imagen no es un objeto". Declarar una objeto Image dentro del HEAD de la pgina, dndo la ruta de su imagen asociada, se conoce tambin con el nombre de Precarga de imagen, ya que efectvamente se consigue con la declaracin que el navegador cargue la imagen en memoria. Aplicacin prctica - Rollover simple.-
Vamos a ver ahora algunas de las aplicaciones ms comunes del lenguaje JavaScript al tratamiento de imgenes, y sin duda la ms conocida de ellas es el efecto conocido como rollover, en el que al pasar el cursor sobre una o ms imgenes de nuestra pgina, stas cambian dinmicamente, apareciendo una nueva imagen. Posteriormente, cuando el cursor se va de esta, el sistema vuelve a su estado inicial. Vamos a empezar con un rollover simple, de una sla imagen, ya que con l podremos explicar con claridad las bases tericas de la construccin de este tipo de efectos. Tenemos pus una imagen en nuestra pantalla, y lo primero que deseamos en que al pasar el cursor sobre ella pase algo, pero hemos visto que el objeto Image no admite de forma estndar el evento que necesitamos, onmouseOver. Para solucionar esto hemos visto en el captulo anterior que podemos recurrir a situar nuestra imagen dentro de un enlace, ya que este s admite el evento que necesitamos. Por lo tanto, situamos la imagen, con el atributo border igualado a 0, dentro de un enlace, al que vamos a dejar el cursor estndar, ya que normalmente los rollover se usan para mens, y en estos la pulsacin debe llevar a una nueva pgina, por lo que con el cursor en forma de mano el usuario sabr que eso es un enlace. No obstante, en el ejemplo que vamos a construir no vamos a apuntar a ninguna pgina en concreto, para no perder la atencin, as que vamos a llamar a la pgina # (que no es ninguna), y en el evento onClick aadiremos return false. Qu ponemos dentro del evento onmouseOver del enlace?. Inicialmente, vamos a acceder desde l a la propiedad src de la imagen que contiene, y vamos a cambiar esta ruta, de forma que la imagen, an llamndose igual, apunte a otro fichero grfico, con lo que el cambio ser efectivo. Para ello necesitamos haber asignado un name a la imagen. El cdigo que necesitamos es pus:
<a href= "#" onmouseOver="document.ejemplo.src='img/avatar2.gif';" onClick="return false;"> <img name="ejemplo" src="img/avatar.gif" width="60" height="60" border="0"> </a>
que nos da:
Bien, ya nos cambia la imagen, pero....cmo hacemos que se vuelva a la original cuando el cursor deja la nueva?. Muy facil, usando el evento onmouseOut de forma anloga a como hemos usado onmouseOver:
<a href= "#" onmouseOver="document.ejemplo.src='img/avatar2.gif';" onClick= "return false;" onmouseOut="document.ejemplo.src='img/avatar.gif';"> <img name="ejemplo" src="img/avatar.gif" width="60" height="60" border="0"> </a>
Qu bonito!. Pero hay un problema, y gordo. Cuando se activa el evento onmouseOver nuestro cdigo llama a la imagen activa avatar2.gif, pero esta imagen no est cargada en la memoria cach del navegador, por lo que ste necesita hacer una nueva peticin HTTP al servidor para pedrsela, cargarla luego en memoria y por ltimo mostrarla en pantalla. Resultado de todo esto: hay un periodo de tiempo en el que la imagen inicial desaparece y se muestra en su lugar un recuadro vaco. Cmo podemos solucionar esto?.
Fcil, amigo. Basta con precargar la imagen activa antes de que se ejecute el cdigo del evento, ya que as el navegador la tendr disponible en su cach y el proceso de cambio de imgenes ser instantneo. Para precargar una imagen debemos usar el mtodo constructor de objetos Image en la cabecera de nuestra pgina, y en l debemos especificar tanto el tamao de la imagen que deseamos cargar como la ruta de la misma. Nuestro cdigo queda:
<script language="JavaScript" type="text/javascript"> imagenOn = new Image(60,60); imagenOn.src = "img/avatar2.gif"; </script> </head> <body> <Palign= center> <A href= "#" onclick="returnfalse;" onmouseover="document.ejemplo.src='img/avatar2.gif';" onmouseout="document.ejemplo.src='img/avatar.gif';"> <IMG name="ejemplo" src="img/avatar.gif" alt = "ejemplo de rolloversimple"width="60" height="60" border= "0"> </A> </P> ... ... </body>
y su resultado es el que sigue:
Tambin podemos crear un rollover compuesto en el que, adems del efecto que ya hemos obtenido, se presente una nueva imagen si el usuario hace click sobre la activada. Para ello slo es necesario precargar otra imagen y acceder de nuevo a la propiedad src, esta vez mediante el evento onClick. Pero para ello, esta vez vamos a definir unas cuantas funciones, una para cada evento, en la cabecera de la pgina, y vamos a llamarlas con los eventos. Examina el siguiente cdigo:
<script language= "JavaScript"type= "text/javascript"> var estado = false; imagenInicial = new Image(60,60); imagenOn = new Image(60,60); imagenClick = new Image(60,60); imagenInicial.src = "img/avatar.gif"; imagenOn.src = "img/avatar2.gif"; imagenClick.src = "img/avatar3.gif"; function over( ) { if(estado = = false) { document.ejemplo.src = imagenOn.src; } else { return;
} } function out( ) { if(estado = = false) { document.ejemplo.src = imagenInicial.src; } else { return; } } function pulsar( ) { document.ejemplo.src = imagenClick.src; estado = true; } </script> </head> <body> <P align=center> <A href="#" onmouseout="out();" onmouseover="over();" onclick="pulsar();return false;"> <IMG name="ejemplo" src = "img/avatar.gif" alt= "ejemplode rollover simple" width= "60" height = "60" border = "0"> </A> </P> ... ... </body>
cuyo resultado es el que sigue:
y que podemos explicar un poco: En el script de la cabecera declaramos los 3 objetos Image que nos van a hacer falta, uno para la imagen inicial (imagenInicial), otro para la activa (imagenOn) y el tercero para la imagen que debe aparecer al hacer click (imagenClick), estableciendo sus rutas de acceso, con lo que dichas imgenes se cargarn en la cach del navegador al empezar a cargar la pgina. Segudamente creamos 3 funciones, una para cambiar la imagen en pantalla en cada uno de los casos posibles, y luego en el enlace en que est incluida la imagen en el BODY llamamos a cada funcin mediante el evento correspondiente. Si el usuario pincha en la imagen, esta cambiar, pero al salir el cursor de ella volver a su estado inicial. Como ahora no nos interesa que ocurra esto, si no que lo que queremos es que una vez pinchada la imagen sta permanezca ya fija, lo que hacemos es declarar una variable contador, de tipo booleano, al principio del script, y lo hacemos fuera de toda funcin para que sea de caracter pblico, es decir, que pueda ser accedida en cualquier momento por cualquier funcin de nuestro c;digo.
Por ltimo, en la funcin pulsar( ), que es la que llamamos mediante el evento onClick, cambiamos el valor de esta variable contador a true, y establecemos en los cdigos de las funciones over( ) y out( ) que se cambie la imagen slo en el caso de que contador sea false. Con esto nos aseguramos que el cambio de imagen al pasar el cursor y al quitarlo slo se realice en caso de que antes no se haya hecho click en la imagen. En caso de que se haya hecho ya click (contador valdr true), las funciones over( ) y out( ) slo ejecutarn la orden return, que en realidad no hace nada, slo detener la ejecucin de la funcin. Resulta un poco lioso de explicar con palabras simples, pero si miras el cdigo de arriba deten;damente lo entenders bien. Bueno, amigos. Esto es todo respecto a la creacin de un rollover simple. Si observis el cdigo fuente de pginas con este efecto veris que el cdigo tal vez est escrito de otra forma, ms "profesional", pero creo que una explicacin basada en la aplicacin clara y directa de los eventos y propiedades del objeto Image es el mtodo ms claro de entender porqu ocurren estos cambios en una imagen.
Aplicacin prctica - Rollover mltiple.Vamos ahora a crear un rollover mltiple, entendiendo por tal el formado por varias imgenes que cambian al pasar el cursor sobre ellas, y para hacer algo til, vamos a aplicar este rollover a la construccin de un men. Indudablemente, podramos basarnos en lo estudiado en el rollover simple para crear uno mltiple, pus basta establecer en los eventos de los enlaces una llamada a la propiedad src de cada imagen, o tambin crear 2 funciones para cada imagen y llamar a cada una de ellas en el momento oportuno. No vamos a hacer esto, ya que repetiramos cdigo innecesario, pero tampoco vamos a crear unas funciones basadas en cambiar matrices de imgenes mediante bucles, porque creo que entonces no se vera claro el porqu de cada funcin y variable. Por lo tanto, vamos a crear un cdigo lo ms simple y claro posible, tal que se pueda entender bien su uso, ya que el objeto de este pequeo manual es aprender porqu se hacen las cosas, no presentar script muy avanzados y bonitos. Vamos a basarnos en lo aprendido hasta ahora, llamando a una misma funcin en los dos eventos, funcin que va a admitir dos parmetros: el name de la imagen a cambiar y el nombre del objeto Image cuyo src va a ser el nuevo que asignemos. Nuestro men va a estar formado por 3 imgenes, cada una con un enlace, y lgicamente lo primero que debemos hacer ser precargar todas ellas, tanto activas como iniciales. Vamos a ver primero el cdigo completo necesario para el men y su efecto, y posteriormente explicaremos el cdigo somramente:
<html> <head> <title>ejemplo de rollover mltiple</title> <script language="JavaScript" type="text/javascript"> home=new Image(80,20); homeOn=new Image(80,20); html=new Image(80,20); htmlOn=new Image(80,20); java=new Image(80,20); javaOn=new Image(80,20); home.src="img/homeOff.gif"; homeOn.src="img/homeOn.gif";
html.src="img/htmlOff.gif"; htmlOn.src="img/htmlOn.gif"; java.src="img/javaOff.gif"; javaOn.src="img/javaOn.gif"; function cambia(nombre,activa) { document.images[nombre].src=activa.src; } </script> </head> <body> <P> <A href="#" onmouseout="cambia('primera',home);" onmouseover="cambia('primera',homeOn);" onclick="return false;"> <img name="primera" src="img/homeOff.gif" width="80" height="20" border="0" alt="home"> </A> <P> <A href="#" onmouseout="cambia('segunda',html);" onmouseover="cambia('segunda',htmlOn);" onclick="return false;"> <img name="segunda" src="img/htmlOff.gif" width="80" height="20" border="0" alt="home"> </A> <P> <A href="#" onmouseout="cambia('tercera',java);" onmouseover="cambia('tercera',javaOn);" onclick="return false;"> <img name="tercera" src="img/javaOff.gif" width="80" height="20" border="0" alt="home"> </A> </P> </body> </html>
cuyo efecto es el que sigue:
Como hemos dicho antes, lo primero que hacemos es precargar las 6 imgenes que vamos a usar, asignando cada una de ellas a un objeto Image que creamos con el mtodo constructor conocido: las 3 iniciales (home, html y java) y las 3 activas (homeOn, htmlOn y javaOn). Segudamente creamos nuestra nica funcin, cambia(nombre,activa), que va a admitir como parmetros nombre, que es el name de la imagen del BODY que va a cambiarse, y activa, que es nombre del Objeto imagen cuya imagen asociada (mediante su parmetro src) es la que deseamos que aparezca mediante la funcin. Con este planteamiento podemos cambiar las veces que queramos cualquier imagen de la pgina; basta para ello decirle a la funcin qu imagen debe cambiar y por cul. Entonces, aprovechamos los enlaces de cada una de las 3 imgenes de nuestro men para llamar a la funcin cambia, pasndole en cada onmouseOver el name de la imagen contenida en el enlace
y el nombre del objeto Image que define la nueva imagen a aparecer, y llamndo a la funcin de nuevo en cada evento onmouseOut para volver las cosas a su estado inicial. En la funcin hemos escrito document.images[nombre].src, con el parmetro nombre entre parntesis porque la imagen es en este caso un elemento de la matriz images, que contiene todas las imgenes del documento (tambin se poda haber escrito document [nombre], ya que document contiene todos los objetos predefinidos del documento, sean imgenes, enlaces o formularios), y desde el evento hemos pasado este parmetro entre comillas simples porque como atributo de un objeto hay que hacerlo as (si se la hubisemos pasado sin comillas nos dara un error, ya que le estaramos pasando entonces un objeto, y no un atributo, que es lo que name es en realidad). Y desde estos eventos hemos pasado el valor del parmetro activa sin comillas porque en la escritura de la funcin tenemos activa.src, es decir, hace referencia a la propiedad src de un objeto Image. Como norma general, cuando a una funcin de JavaScript le pasamos como parmetro un atributo (name de una imagen o enlace, id de una capa, etc.) deberemos hacerlo siempre entre comillas, mientras que si le pasamos como parmetro un objeto, hay que hacerlo sin incluirlo entre ellas. No creo que sean necesarias ms explicaciones, ya que el cdigo es bastante simple. Slo decir que muchos autores introducen en el cdigo inicial de la funcin cambia un condicionante if(document.images), y que con ello lo que persiguen es que el cdigo siguiente slo se ejecute en el caso de que el navegador acepte este objeto de JavaScript. Podemos tranqulamente pasar de este condicionante, ya que la grn mayora de los navegadores actuales soportan el objeto Image de JavaScript. Este JavaScript cambia de color las celdas con links al pasar por encima de estas. A continuacin le mostramos los cdigos y como usarlos. Para entenderlo mejor, le damos un ejemplo de lo que vamos a explicar:
Artculos de JavaScript Artculos de ASP
Cmo pueden observar, al pasar por encima del link o celda esta cambia de color. Es algo muy atractivo que le da profesionalismo a un sitio. Vamos con los cdigos... Javascript: debes ubicar el siguiente script en la cabecera de la pgina (<head> ... </head>)
<script> function mOvr(src,clrOver) { if (!src.contains(event.fromElement)) { src.style.cursor = 'hand'; src.bgColor = clrOver; } } function mOut(src,clrIn) { if (!src.contains(event.toElement)) { src.style.cursor = 'default'; src.bgColor = clrIn; } } function mClk(src) { if(event.srcElement.tagName=='TD'){ src.children.tags('A')[0].click(); } } </script>
Men: estos menes se realizan mediante una tabla y diferentes celdas, las cuales pueden ser filas o columnas, en este ejemplo veremos filas.
<table> <tr> <td onclick="mClk(this);" onmouseout="mOut(this,'#475B70');" onmouseover="mOvr(this,'#729233');" vAlign="center" width="171" style="border-bottom: 1px solid rgb(0,0,0); padding-left: 6; paddingtop: 1; padding-bottom: 1" bgcolor="#475B70" height="12"><a style="COLOR: rgb(255,255,255); TEXT-DECORATION: none" href="link1.htm"><font face="Verdana" size="1">Artculos de JavaScript</font></a></td> </tr> <tr> <td onclick="mClk(this);" onmouseout="mOut(this,'#475B70');" onmouseover="mOvr(this,'#729233');" vAlign="center" width="171" style="border-bottom: 1px solid rgb(0,0,0); padding-left: 6; paddingtop: 1; padding-bottom: 1" bgcolor="#475B70" height="1"><a style="COLOR: rgb(255,255,255); TEXT-DECORATION: none" href="link2.htm"><font face="Verdana" size="1">Artculos de ASP</font></a></td> </tr> </table>
Lo marcado en negrita y azul son los valores hexadecimales de los colores a utilizar. En este caso se pasa a explicar: #475B70: es el color de fondo principal (bgcolor=".."). Cuando el mouse se para sobre la celda cambia de color y al quitarlo (onmouseout...) vuelve al original. #729233: es el color de fondo secundario, el cual aparecer al pasar el cursor del mouse sobre la celda (onmouseover...). Esperamos que les haya sido til el artculo, y que usen su imaginacin para realizar menes vistosos. El objeto Image.El lenguaje JavaScript posee un objeto propio asociado a cada una de las imgenes de un documento HTML, el objeto Image. Adems, tambin posee un array particular, el array images, que contiene todas las imgenes presentes en la pgina. Dentro de la jerarqua propia de este lenguaje, tanto el objeto Image como la matriz images se encuentran incluidos dentro del objeto document, que a su vez se encuentra incluido en al objeto principal window. Por lo tanto, al ser estos objetos elementos propios del lenguaje, podemos referirnos a ellos y acceder a sus propiedades de forma directa, sin tener que recurrir a capas ni otros elementos externos. As, podemos acceder directamente a una propiedad cualquiera de una imagen del documento de dos formas diferentes: 1) mediante el objeto Image, siendo la sintaxis general en este caso la siguiente: document.nombre_imagen.nombre_propiedad donde nombre_imagen es el nombre asignado a la imagen mediante su atributo NAME (es condicin indispensable para usar este mtodo el haber asignado a la imagen un nombre identificador nico mediante el atributo NAME), y nombre_propiedad define la propiedad a la que queremos acceder.
2) mediante la matriz images[]: esta matriz contiene todas las imgenes del documento, empezando su ndice interno por 0, como en todos los arrays de JavaScript. La sintaxis general es del tipo: document.images[indice].nombre_propiedad La equivalencia entre indice y la imagen que le corresponde se establece de forma secuencial, de tal forma que images[0] representar a la primera imagen insertada en el BODY de la pgina, images[1] a la segunda, y as sucesvamente, salvo que se haga una declaracin explcita al respecto. El array images posee la propiedad length, que almacena el nmero de imgenes presentes en el documento. Para obtener este, basta con escribir: document.images.length. Ejemplos: - Acceso a la propiedad WIDTH de la imagen bandera: document.images.bandera.width o document.bandera.width - Acceso a la propiedad SRC de la imagen bandera: document.images[1].src Ejemplo prctico: vamos a mostrar en pantalla la anchura de la imagen siguiente:
que hemos introducido en la pgina mediante:
<img src="img/logo.gif" name="logotipo" width="249" height="28" border="0">

y para ello escribimos:
<form> <inputtype="button"value= "dimeanchura"onClick="alert('anchura='+document.logotipo.width)"> </form>

que podemos ver en accin pulsando el botn creado: De esta forma podemos acceder y/o cambiar cada una de las propiedades de una imagen. Por ejemplo, si queremos cambiar la anchura de la imagen anterior basta escribir:
document.logotipo.width="500"
que podis comprobar pulsando el siguiente botn:
Nota: el atributo width es de slo lectura para Nestcape 4x, por lo que podemos leer su valor, pero no modificarlo. En cambio, s podemos hacer esto en Internet Explorer y en Nestcape 6x.
Propiedades del objeto Image.El objeto Image pose una serie de propiedades, a las que podemos acceder mediante JavaScript, permitiendo este lenguaje leer estas propiedades e incluso cambiar muchas de ellas. La forma de acceder a todas ellas es: document.nombre_imagen.propiedad Las principales propiedades del objeto Image son: name: que referencia el nombre identificador nico de la imagen asociada al objeto. La forma de acceder a esta propiedad es: document.images[indice].name Podemos por ejemplo aprovechar el array images para obtener el name de todas las imgenes de nuestra pgina:
<script language="JavaScript" type="text/javascript"> var nombres = ""; for (i=0;i<document.images.length;i++) { nombres= + document.images[i].name + "/n"; } </script> <input type="button" value="dame names" onClick="alert(nombres);">
El cdigo JavaScript anterior debe situarse al final de la pgina, antes de la etiqueta </BODY>, para que las imgenes estn situadas antes que l, con objeto de que sepa las imgenes que hay en la pgina. Si lo establecemos tal como est dentro de la cabecera, al no haberse cargado todava las imgenes, obtendremos la variable nombres como una cadena vaca. Para solucionar esto, podemos declarar antes de la variable las imgenes de la pgina, mediante el constructor de objetos Image, que veremos en el captulo siguiente. En nuestro caso, slo aparece en la ventana de resultados los nombres de la imagen del logo de la pgina y del punto rojo que he usado para crear la tabla que lo contiene, ya que estas son las nicas por encima a las que hemos asignado el atributo name. Tambin observars si pulsas el botn anterior que en la ventana que aparece quedan muchos huecos vacos; son debidos a todas las imgenes de la pgina por encima del cdigo a las que no hemos asignado la propiedad name. src: que almacena la ruta de la imagen asociada al objeto. As, si queremos asignar la ruta de una imagen a una variable, para poder por ejemplo presentar en pantalla esta ruta, deberemos escribir: var ruta = document.nombre_imagen.src; y luego podemos usar esta variable desde un botn de formulario, por ejemplo:
<img name="dinosaurio" src="img/avatar.gif" width="60" height="60" border="0">
<script language= "JavaScript" type="text/javascript"> var ruta = document.dinosaurio.src; </script> <input type="button" value="dame ruta" onClick="alert(ruta);">
Esta propiedad es fundamentalmente la usada para construir rollovers, en los que cambiamos dinmicamente su valor. Para ello, hay que establerlo siempre entre comillas, dobles o simples, ya que src trata la ruta como una cadena de texto (variable de tipo string). width / height: que representa la anchura y la altura de la imagen asociada al objeto, y que podemos leer (en los 3 navegadores comunes) y cambiar (slo en Explorer y Nestcape 6x) de forma dinmica. Ejemplo:
<input type="button" value= "dame altura" onClick="alert(document.dinosaurio.height)">

border: que se refiere al atributo border de la imagen asociada al objeto. Para acceder a esta propiedad deberemos escribir: document.images[indice].border o document.nombre_imagen.border
Como ejemplo, vamos a cambiar dinmicamente el borde de la imagen inferior:
<input type="button" value= "cambia borde"onClick="document.icono.border=10;">
Nota: esto slo funcionar en Internet Explorer y en Nestcape 6x; para las versiones 4x de Nestcape esta propiedad es de slo lectura, por lo que podemos abtener su valor, pero no cambiarlo. hspace / vspace: que define el espacio horizontal o vertical de una imagen flotante respecto al texto que la rodea. El acceso a esta propiedad se logra mediante: document.nombre_imagen.hspace lowsrc: que fija la ruta de una imagen accesoria, generalmente una versin de menos peso en Ks de la imagen principal, que se debe cargar en pantalle mientras se recibe esta. Su sintaxis es: document.nombre_imagen.lowsrc prototype: propiedad muy importante desde el punto de vista del programador web, ya que permite aadir propiedades y mtodos adicionales a un objeto Image, es decir, permite ampliar lo que es el objeto en s, aumentando sus propiedades por defecto. No vamos a entrar en detalles sobre esta propiedad, comn a muchos de los objetos propios de JavaScript, ya que para su uso hace falta un conocimiento profundo de este lenguaje. Pero s decir que sirve, por ejemplo, para asignar una nueva propiedad, que vamos a llamar orden, de tipo numrico, en la que podemos guardar un orden de presentacin en una ventana flotante, y mediante cdigo permitir al usuario que seleccione una serie de imgenes de las contenidas en nuestra pgina. Luego, mediante esta nueva propiedad orden podemos presentarlas ordenadas en la pantalla flotante (es slo un ejemplo). Para ms informacin al respecto, consultar un buen manual de JavaScript avanzado.
complete: propiedad del objeto Image de tipo booleano, cierta cuando la imagen se ha acabado de cargar en memoria, y falsa en caso contrario. Slo es soportada por Nestcape Navigator, por lo que no se debe usar, en vistas a la compatibilidad.
Con esto acabamos las propiedades principales del objeto Image. Slo aadir que las propiedades border, name y vspace no son accesibles para objetos creados mediante el constructos Image( ). Este mtodo constructor de nuevos objetos Image lo vamos a estudiar a continuacin, junto con los principales eventos soportados por una imagen.
Eventos para imgenes.El objeto Image admite slamente 3 eventos comunes a los 3 navegadores comunes: Internet Explorer, Nestcape Navigator 4x y Nestcape Navigator 6x. Estos son: onAbort: que se activa cuando se aborta la carga de una imagen en pantalla, por ejemplo porque el usuario ha pulsado la opcin "detener" (stop) en la barra superior de iconos del navegador. Ejemplo de sintaxis:
<img name="imagen1"src="img/logo.gif"........onAbort="alert('ha cancelado la carga de la imagen')">

onError: que se dispara cuando por algn motivo externo no se ha podido realizar la carga de la imagen en pantalla, por ejemplo porque la ruta de la misma est mal especificada. Ejemplo de sintaxis:
<img name="imagen1"src="img/logo.gif"........onError="alert('la imagen del logotipo no se ha podido cargar')">

onLoad: que se activa cuando se ha acabado de cargar la imagen y se presenta en pantalla. Ejemplo de sintaxis:
<img name="imagen1"src="img/logo.gif"........onLoad="alert('ya se ha cargado la imagen del logotipo')">

Pero adems de estos eventos comunes, las imgenes soportan otra serie de eventos que si bien no son soportados por Nestcape 4x, s lo son por Internet Explorer y por Nestcape 6x. Por este motivo, slo es conveniente su uso cuando van a ejecutar una accin que no sea fundamental ni para la presentacin ni para la ejecucin de cdigo de la pgina. Esperemos a que pronto se estandarice el uso de Nestcape 6x y se deje a un lado las versiones 4x, y entonces podremos aplicar estos eventos con compatibilidad total. Estos eventos adicionales son: onClick: que se activa cuando se hace click con el puntero del ratn sobre la imagen. Ejemplo de sintaxis:
<img name="imagen1"src="img/logo.gif"........onClick="alert('gracias por pulsarme')">
onmouseOver: que se activa cuando se el puntero del ratn pasa sobre la imagen. Ejemplo de sintaxis:
<img name= "imagen1"src="img/logo.gif"........onmouseOver="alert('gracias por pasar sobre m)">
onmouseOut: que se activa cuando el puntero del ratn, trs pasar sobre la imagen, se va de ella. Ejemplo de sintaxis:
<img name= "imagen1"src="img/logo.gif"........onmouseOut="alert('adios, amigo')">
Nota cmo he situado la imagen anterior en el lateral izquierdo. Si la centro, como estn las anteriores, y coincide que el usuario ha desplazado la pgina con la barra lateral de scroll de tal forma que la imagen queda centrada tambin verticalmente, se produce un curioso y molesto efecto. Al irse el cursor de la imagen se lanza la pantalla de alerta, con lo que tienes que pulsar el botn aceptar de la misma para que se cierre. Pero al hacer esto, cuando se cierra, el cursor se encuentra de nuevo sobre la imagen, con lo que si lo quitas de encima se repite el proceso, y as sucesvamente. La nica solucin es cerrar la ventana de alerta pulsando la cruz de la esquina superior derecha de la misma, pero si el usuario no ce en ello, se ver obligado a cerrar la ventana del navegador mediante el Administrador de Tareas. Cuidado con estos ciclos indeseados!. Tambin podramos aplicar otros eventos de este tipo, como onmouseUp, ondblClick, etc., pero no suelen ser tiles, causando normalmente ms problemas que ventajas. Compatibilizando eventos.Hemos visto que las imgenes slo admiten como eventos estndares onLoad, onError y onAbort, pero la mayora de las veces nosotros necesitamos elementos que soporten todo tipo de eventos, como onClick, onmouseOver, etc., y en todo tipo de navegadores. Podemos, con un poco de imaginacin, utilizar otros elementos de JavaScript para conseguir esto. As, sabemos que el objeto Link s admite todo tipo de eventos, por lo que podemos usarlo como herramienta auxiliar para dotar a las imgenes de las funcionalidades que necesitamos. La idea es muy simple: basta situar la imagen que deseamos que soporte los eventos dentro de un enlace simple de HTML, es decir, situando la etiqueta <IMAGE> dentro de la pareja de etiquetas < A HREF.....>...</A>, y entonces establecer el evento necesario NO en la imagen, si no en el enlace. Como ejemplo prctico vamos a introducir una imagen que soporte de forma general el evento onClick:
<a href="#" onClick="alert('que evento ms bonito');return false;"><img src="img/avatar.gif" width="60" height="60" border="0"></a>
Nota lo siguiente:
1) si sitas el cursor sobre la imagen vers que ste se transforma en la mano tpica de los enlaces. Lgico, ya que hemos transformado la imagen en uno de ellos. Si deseas eliminar este efecto, basta con asignar al enlace un estilo para el cursor, dejando este como default:
<a href="#" ................ style="cursor:default;"><img src=..........></a>

pero ten en cuenta que esto slo ser vlido para Internet Explorer y para Nestcape 6x. Las versiones 4x de este ltimo navegador no soportan el estilo en cursores, por lo que en ellos siempre aparacer la mano. 2) Ojo con el atributo border. Debes ponerlo siempre, igualndolo a cero, ya que si no se ver un recuadro azul alrededor de la imagen, el tpico de todos los enlaces. 3) Hemos escrito a href="#" porque no vamos a llamar a ninguna pgina, y return false para anular el efecto del enlace en s, ya que slo queremos que se ejecute el evento, no la llamada del enlace. Por lo dems este truco es totlmente compatible, y podemos desde el evento del enlace ejecutar cdigo JavaScript o llamar a una funcin previamente definida. El constructor de objetos Image.El objeto Image posee en JavaScript un mtodo constructor, de tal forma que podemos declarar con l un objeto de este tipo al principio de nuestra pgina, dentro de la cabecera de la misma. La sintaxis para usar este constructor es la siguiente: nombre_imagen = new Image (width,height); donde los parmetros width y height corresponden a los atributos anlogos de la imagen definida. Si no especificamos estos parmetros, con la declaracin del constructor tendremos ya creado el nuevo objeto Image, pero el navegador no sabr el tamao que va a tener la imagen asociada. No obstante, no suele ser necesario establecer estos parmetros, por lo siguiente. El navegador no sabe tampoco con la declaracin anterior qu imagen en concreto es la asociada al objeto, por lo que no podr cargarla en memoria, y si nos referimos a ella para hacer que aparezca dinmicamente se producir un error. Para evitar esto, la declaracin del objeto se debe acompaar de otra en la que establecemos qu imagen en concreto es la asociada al objeto, y esto se hace con la escritura: nombre_imagen = new Image ( ); nombre_imagen.src = "ruta_imagen"; Y con esto el navegador ya sabe que hemos declarado un nuevo objeto imagen y sabe tambin qu imagen en concreto es la asociada al objeto, por lo que conoce su peso en Ks, pudiendo cargarla en memoria y tenerla as disponible para poder usarla cuando queramos. Si adems hemos declarado su tamao mediante los parmetros width y height, ya tiene todos los datos que definen al nuevo objeto. Ejemplo de declaracin completa: logotipo = new Image(249,28); logotipo.src="img/logo.gif"; La declaracin de los objetos Image que va a haber en nuestra pgina es muy importante, sobre todo en el caso de que en ella vayamos a cambiar dinmicamente la ruta de alguna de las imgenes inicialmente presentes en el BODY, como ocurre con los famosos rollovers, ya que si no hemos declarado en la cabecera el objeto Image correspondiente a la nueva imagen a pintar en pantalla, con su ruta correcta, el navegador no sabr a qu nos referimos, con lo que nos dar el tpico error de JavaScript "document.nombre_imagen no es un objeto".
Declarar una objeto Image dentro del HEAD de la pgina, dndo la ruta de su imagen asociada, se conoce tambin con el nombre de Precarga de imagen, ya que efectvamente se consigue con la declaracin que el navegador cargue la imagen en memoria. Aplicacin prctica - Rollover simple.Vamos a ver ahora algunas de las aplicaciones ms comunes del lenguaje JavaScript al tratamiento de imgenes, y sin duda la ms conocida de ellas es el efecto conocido como rollover, en el que al pasar el cursor sobre una o ms imgenes de nuestra pgina, stas cambian dinmicamente, apareciendo una nueva imagen. Posteriormente, cuando el cursor se va de esta, el sistema vuelve a su estado inicial. Vamos a empezar con un rollover simple, de una sla imagen, ya que con l podremos explicar con claridad las bases tericas de la construccin de este tipo de efectos. Tenemos pus una imagen en nuestra pantalla, y lo primero que deseamos en que al pasar el cursor sobre ella pase algo, pero hemos visto que el objeto Image no admite de forma estndar el evento que necesitamos, onmouseOver. Para solucionar esto hemos visto en el captulo anterior que podemos recurrir a situar nuestra imagen dentro de un enlace, ya que este s admite el evento que necesitamos. Por lo tanto, situamos la imagen, con el atributo border igualado a 0, dentro de un enlace, al que vamos a dejar el cursor estndar, ya que normalmente los rollover se usan para mens, y en estos la pulsacin debe llevar a una nueva pgina, por lo que con el cursor en forma de mano el usuario sabr que eso es un enlace. No obstante, en el ejemplo que vamos a construir no vamos a apuntar a ninguna pgina en concreto, para no perder la atencin, as que vamos a llamar a la pgina # (que no es ninguna), y en el evento onClick aadiremos return false. Qu ponemos dentro del evento onmouseOver del enlace?. Inicialmente, vamos a acceder desde l a la propiedad src de la imagen que contiene, y vamos a cambiar esta ruta, de forma que la imagen, an llamndose igual, apunte a otro fichero grfico, con lo que el cambio ser efectivo. Para ello necesitamos haber asignado un name a la imagen. El cdigo que necesitamos es pus:
<a href= "#" onmouseOver="document.ejemplo.src='img/avatar2.gif';" onClick="return false;"> <img name="ejemplo" src="img/avatar.gif" width="60" height="60" border="0"> </a>
que nos da:
Bien, ya nos cambia la imagen, pero....cmo hacemos que se vuelva a la original cuando el cursor deja la nueva?. Muy facil, usando el evento onmouseOut de forma anloga a como hemos usado onmouseOver:
<a href= "#" onmouseOver="document.ejemplo.src='img/avatar2.gif';" onClick= "return false;" onmouseOut="document.ejemplo.src='img/avatar.gif';"> <img name="ejemplo" src="img/avatar.gif" width="60" height="60" border="0"> </a>
Qu bonito!. Pero hay un problema, y gordo. Cuando se activa el evento onmouseOver nuestro cdigo llama a la imagen activa avatar2.gif, pero esta imagen no est cargada en la memoria cach del navegador, por lo que ste necesita hacer una nueva peticin HTTP al servidor para pedrsela, cargarla luego en memoria y por ltimo mostrarla en pantalla. Resultado de todo esto: hay un periodo de tiempo en el que la imagen inicial desaparece y se muestra en su lugar un recuadro vaco. Cmo podemos solucionar esto?. Fcil, amigo. Basta con precargar la imagen activa antes de que se ejecute el cdigo del evento, ya que as el navegador la tendr disponible en su cach y el proceso de cambio de imgenes ser instantneo. Para precargar una imagen debemos usar el mtodo constructor de objetos Image en la cabecera de nuestra pgina, y en l debemos especificar tanto el tamao de la imagen que deseamos cargar como la ruta de la misma. Nuestro cdigo queda:
<script language="JavaScript" type="text/javascript"> imagenOn = new Image(60,60); imagenOn.src = "img/avatar2.gif"; </script> </head> <body> <Palign= center> <A href= "#" onclick="returnfalse;" onmouseover="document.ejemplo.src='img/avatar2.gif';" onmouseout="document.ejemplo.src='img/avatar.gif';"> <IMG name="ejemplo" src="img/avatar.gif" alt = "ejemplo de rolloversimple"width="60" height="60" border= "0"> </A> </P> ... ... </body>
y su resultado es el que sigue:
Tambin podemos crear un rollover compuesto en el que, adems del efecto que ya hemos obtenido, se presente una nueva imagen si el usuario hace click sobre la activada. Para ello slo es necesario precargar otra imagen y acceder de nuevo a la propiedad src, esta vez mediante el evento onClick. Pero para ello, esta vez vamos a definir unas cuantas funciones, una para cada evento, en la cabecera de la pgina, y vamos a llamarlas con los eventos. Examina el siguiente cdigo:
<script language= "JavaScript"type= "text/javascript"> var estado = false; imagenInicial = new Image(60,60); imagenOn = new Image(60,60); imagenClick = new Image(60,60); imagenInicial.src = "img/avatar.gif"; imagenOn.src = "img/avatar2.gif"; imagenClick.src = "img/avatar3.gif"; function over( ) { if(estado = = false)
{ document.ejemplo.src = imagenOn.src; } else { return; } } function out( ) { if(estado = = false) { document.ejemplo.src = imagenInicial.src; } else { return; } } function pulsar( ) { document.ejemplo.src = imagenClick.src; estado = true; } </script> </head> <body> <P align=center> <A href="#" onmouseout="out();" onmouseover="over();" onclick="pulsar();return false;"> <IMG name="ejemplo" src = "img/avatar.gif" alt= "ejemplode rollover simple" width= "60" height = "60" border = "0"> </A> </P> ... ... </body>
cuyo resultado es el que sigue:
y que podemos explicar un poco: En el script de la cabecera declaramos los 3 objetos Image que nos van a hacer falta, uno para la imagen inicial (imagenInicial), otro para la activa (imagenOn) y el tercero para la imagen que debe aparecer al hacer click (imagenClick), estableciendo sus rutas de acceso, con lo que dichas imgenes se cargarn en la cach del navegador al empezar a cargar la pgina. Segudamente creamos 3 funciones, una para cambiar la imagen en pantalla en cada uno de los casos posibles, y luego en el enlace en que est incluida la imagen en el BODY llamamos a cada funcin mediante el evento correspondiente.
Si el usuario pincha en la imagen, esta cambiar, pero al salir el cursor de ella volver a su estado inicial. Como ahora no nos interesa que ocurra esto, si no que lo que queremos es que una vez pinchada la imagen sta permanezca ya fija, lo que hacemos es declarar una variable contador, de tipo booleano, al principio del script, y lo hacemos fuera de toda funcin para que sea de caracter pblico, es decir, que pueda ser accedida en cualquier momento por cualquier funcin de nuestro c;digo. Por ltimo, en la funcin pulsar( ), que es la que llamamos mediante el evento onClick, cambiamos el valor de esta variable contador a true, y establecemos en los cdigos de las funciones over( ) y out( ) que se cambie la imagen slo en el caso de que contador sea false. Con esto nos aseguramos que el cambio de imagen al pasar el cursor y al quitarlo slo se realice en caso de que antes no se haya hecho click en la imagen. En caso de que se haya hecho ya click (contador valdr true), las funciones over( ) y out( ) slo ejecutarn la orden return, que en realidad no hace nada, slo detener la ejecucin de la funcin. Resulta un poco lioso de explicar con palabras simples, pero si miras el cdigo de arriba deten;damente lo entenders bien. Bueno, amigos. Esto es todo respecto a la creacin de un rollover simple. Si observis el cdigo fuente de pginas con este efecto veris que el cdigo tal vez est escrito de otra forma, ms "profesional", pero creo que una explicacin basada en la aplicacin clara y directa de los eventos y propiedades del objeto Image es el mtodo ms claro de entender porqu ocurren estos cambios en una imagen.
Aplicacin prctica - Rollover mltiple.Vamos ahora a crear un rollover mltiple, entendiendo por tal el formado por varias imgenes que cambian al pasar el cursor sobre ellas, y para hacer algo til, vamos a aplicar este rollover a la construccin de un men. Indudablemente, podramos basarnos en lo estudiado en el rollover simple para crear uno mltiple, pus basta establecer en los eventos de los enlaces una llamada a la propiedad src de cada imagen, o tambin crear 2 funciones para cada imagen y llamar a cada una de ellas en el momento oportuno. No vamos a hacer esto, ya que repetiramos cdigo innecesario, pero tampoco vamos a crear unas funciones basadas en cambiar matrices de imgenes mediante bucles, porque creo que entonces no se vera claro el porqu de cada funcin y variable. Por lo tanto, vamos a crear un cdigo lo ms simple y claro posible, tal que se pueda entender bien su uso, ya que el objeto de este pequeo manual es aprender porqu se hacen las cosas, no presentar script muy avanzados y bonitos. Vamos a basarnos en lo aprendido hasta ahora, llamando a una misma funcin en los dos eventos, funcin que va a admitir dos parmetros: el name de la imagen a cambiar y el nombre del objeto Image cuyo src va a ser el nuevo que asignemos. Nuestro men va a estar formado por 3 imgenes, cada una con un enlace, y lgicamente lo primero que debemos hacer ser precargar todas ellas, tanto activas como iniciales. Vamos a ver primero el cdigo completo necesario para el men y su efecto, y posteriormente explicaremos el cdigo somramente:
<html> <head> <title>ejemplo de rollover mltiple</title> <script language="JavaScript" type="text/javascript"> home=new Image(80,20); homeOn=new Image(80,20);
html=new Image(80,20); htmlOn=new Image(80,20); java=new Image(80,20); javaOn=new Image(80,20); home.src="img/homeOff.gif"; homeOn.src="img/homeOn.gif"; html.src="img/htmlOff.gif"; htmlOn.src="img/htmlOn.gif"; java.src="img/javaOff.gif"; javaOn.src="img/javaOn.gif"; function cambia(nombre,activa) { document.images[nombre].src=activa.src; } </script> </head> <body> <P> <A href="#" onmouseout="cambia('primera',home);" onmouseover="cambia('primera',homeOn);" onclick="return false;"> <img name="primera" src="img/homeOff.gif" width="80" height="20" border="0" alt="home"> </A> <P> <A href="#" onmouseout="cambia('segunda',html);" onmouseover="cambia('segunda',htmlOn);" onclick="return false;"> <img name="segunda" src="img/htmlOff.gif" width="80" height="20" border="0" alt="home"> </A> <P> <A href="#" onmouseout="cambia('tercera',java);" onmouseover="cambia('tercera',javaOn);" onclick="return false;"> <img name="tercera" src="img/javaOff.gif" width="80" height="20" border="0" alt="home"> </A> </P> </body> </html>
cuyo efecto es el que sigue:
Como hemos dicho antes, lo primero que hacemos es precargar las 6 imgenes que vamos a usar, asignando cada una de ellas a un objeto Image que creamos con el mtodo constructor conocido: las 3 iniciales (home, html y java) y las 3 activas (homeOn, htmlOn y javaOn). Segudamente creamos nuestra nica funcin, cambia(nombre,activa), que va a admitir como parmetros nombre, que es el name de la imagen del BODY que va a cambiarse, y activa, que es nombre del Objeto imagen cuya imagen asociada (mediante su parmetro src) es la que deseamos que aparezca mediante la funcin.
Con este planteamiento podemos cambiar las veces que queramos cualquier imagen de la pgina; basta para ello decirle a la funcin qu imagen debe cambiar y por cul. Entonces, aprovechamos los enlaces de cada una de las 3 imgenes de nuestro men para llamar a la funcin cambia, pasndole en cada onmouseOver el name de la imagen contenida en el enlace y el nombre del objeto Image que define la nueva imagen a aparecer, y llamndo a la funcin de nuevo en cada evento onmouseOut para volver las cosas a su estado inicial. En la funcin hemos escrito document.images[nombre].src, con el parmetro nombre entre parntesis porque la imagen es en este caso un elemento de la matriz images, que contiene todas las imgenes del documento (tambin se poda haber escrito document [nombre], ya que document contiene todos los objetos predefinidos del documento, sean imgenes, enlaces o formularios), y desde el evento hemos pasado este parmetro entre comillas simples porque como atributo de un objeto hay que hacerlo as (si se la hubisemos pasado sin comillas nos dara un error, ya que le estaramos pasando entonces un objeto, y no un atributo, que es lo que name es en realidad). Y desde estos eventos hemos pasado el valor del parmetro activa sin comillas porque en la escritura de la funcin tenemos activa.src, es decir, hace referencia a la propiedad src de un objeto Image. Como norma general, cuando a una funcin de JavaScript le pasamos como parmetro un atributo (name de una imagen o enlace, id de una capa, etc.) deberemos hacerlo siempre entre comillas, mientras que si le pasamos como parmetro un objeto, hay que hacerlo sin incluirlo entre ellas. No creo que sean necesarias ms explicaciones, ya que el cdigo es bastante simple. Slo decir que muchos autores introducen en el cdigo inicial de la funcin cambia un condicionante if(document.images), y que con ello lo que persiguen es que el cdigo siguiente slo se ejecute en el caso de que el navegador acepte este objeto de JavaScript. Podemos tranqulamente pasar de este condicionante, ya que la grn mayora de los navegadores actuales soportan el objeto Image de JavaScript. Lo que queremos es que el usuario nos ingrese de forma obligatoria su 'nombre y apellido' y su 'email', con el email ademas averiguaremos si incluye '@' sino la direccion de email es incorrecta. Primero veamos el codigo html que genera el formulario:
<form name="Formulario" method="post" action="" OnSubmit="return validar(this)"> <table width="98%" border="0" cellspacing="0" cellpadding="2"> <tr> <td width="47%" align="center"> <div align="right"><b>Nombre y Apellido </b></div> </td> <td width="53%"> <input type="text" name="nomyape"> </td> </tr> <tr> <td width="47%" align="center"> <div align="right"><b>Email </b></div> </td> <td width="53%"> <input type="text" name="email"> </td> </tr> <tr align="center"> <td colspan="2"> <input type="submit" name="Submit" value="Enviar"> </td> </tr> </table> </form>
Miren bien la primer linea de este codigo, observen que se define un evento 'OnSubmit' y en este evento llamamos a una funcion JavaScript llamada 'validar()', noten que antes utilizamos la palabra clave return, esto sirve para cancelar el envio del formulario si este no es valido, ahora veamos el codigo JavaScript que valida el formulario:
<script language="JavaScript"> function validar() { ingreso = new String() ingreso = this.Formulario.nomyape.value if (ingreso.length == 0) { alert("Debe ingresar el Nombre y Apellido.") return false } ingreso = this.Formulario.email.value if (!ingreso.match("@")) { alert("Debe ingresar el Email o verifique que sea correcto.") return false } return true } </script>
Ahora una breve explicacion, lo primero que hacemos es definir la funcion que la palabre clave 'function', despues creamos una variable del tipo cadena o string que le asignamos el valor del campo 'nomyape', luego comprobamos con un 'if' que el tamao del texto sea igual a 0, si esto se cumple mostramos una advertencia y ponemos el return a falso, al poner el return a falso evitamos que el formulario se envie, luego analizamos el campo email pero esta ves utilizamos el metodo 'match' el cual nos devuelve verdadero o true si se encuentra el caracter pasado como parametro, es facil no, nos quedaria por averiguar si el campo email tiene como minimo un punto '.' pero esto se lo dejo a ustedes asi practican. Hoy trataremos un problema que varias veces se nos presenta, las famosas listas dependientes, que es esto?, tenemos dos listas, una lista con varios items y la otra con los items que corresponden al item seleccionado en la primer lista Que Lio?...Bueno para hacerlo mas grafico veamos primero el resultado y luego explicare como llegamos a esto.
Trimestre
Meses
Fijate que si seleccionas un trimestre, la lista de meses se modifica mostrando los meses que corresponden al trimestre seleccionado. Lo primero que hacemos es construir las dos listas con los elementos correspondientes, la lista de los meses la llenamos con la primer opcion que es la del primero trimestre dado que cuando carge la pagina esta opcion esta seleccionada por defecto.
<form name="formulario" method="post" action=""> <div align="center">Trimestre <select name="trimestres" OnChange="cambiar()"> <option value="1er. Trimestre" selected>1er. Trimestre</option> <option value="2do. Trimestre">2er. Trimestre</option> <option value="3er. Trimestre">3er. Trimestre</option> <option value="4to. Trimestre">4to. Trimestre</option> </select>
Meses <select name="meses"> <option value="Enero" selected>Enero</option> <option value="Febrero">Febrero</option> <option value="Marzo">Marzo</option> </select> </div> </form>
Cabe destacar de este codigo que debemos respetar los nombres de los objetos dado que sino el JavaScript no funcionara, otra cosa a destacar es la declaracion del evento 'OnChange' de la lista de trimestres, esta declaracion hace que cada ves que cambie el elemento seleccionado se ejecute la funcion de JavaScript llamada 'cambiar()', veamos ahora que contiene esta funcion...
function cambiar() { var index=document.forms.formulario.trimestres.selectedIndex; formulario.meses.length=0; if(index==0) if(index==1) if(index==2) if(index==3) } trimestre1(); trimestre2(); trimestre3(); trimestre4();
Esta y las demas funciones JavaScript van entre las etiquetas llamadas 'script' y las podemos ubicar en cualquier sector de la pagina, pero lo mas apropiado es ponerlas dentro de las etiquetas 'head'.
<script language="JavaScript"> function cambiar() . . . </script>

Bueno, ahora si comentemos el codigo anterior, la primr linea de codigo declara la variable llamada 'index' y a su ves le asigna el valor del elemento seleccionado en la lista trimestres, el valor 0 corresponde al primer trimestre, el 1 al segundo y asi hasta el 3 que corresponde al ultimo trimestre es decir el cuarto. Despues la segunda linea de codigo asigna 0 al la propiedad length de la lista meses, esta propiedad maneja el numero de elementos que tiene esa lista, a ponerla a cero se borran todos los elementos de la lista meses. Luego siguen un grupo de if que evaluan la variable 'index', si esta es igual a cero va a la funcion 'trimestre1()', si es 1 va a la funcion 'trimestre2()' y si sucesivamente, ahora que hacen esta funciones? simple, llenan la lista de meses por ejemplo 'trimestre1()' llena la lista meses con los primeros tres meses del ao, veamos como...
function trimestre1(){ opcion0=new Option("Enero","Enero","defauldSelected"); opcion1=new Option("Febrero","Febrero"); opcion2=new Option("Marzo","Marzo"); document.forms.formulario.meses.options[0]=opcion0; document.forms.formulario.meses.options[1]=opcion1; document.forms.formulario.meses.options[2]=opcion2; }
Aqui creamos 3 variables a las cuales les asignamos el objeto 'Option' creado mediante la palabra clave 'new', para crear un objeto del tipo 'Option' debemos especificar como minimo 2 parametros, el primero es el texto que aparecera en la lista y el segundo es el 'listvalue' que tendra dicho
elemento. Tambie existe un tercer parametro opcional que sirve para especificar si el elemento esta seleccionado,si queremos que esto sea asi debemos poner el tercer parametro con el valor 'defauldSelected'. Despues de crear los objetos 'Option' debemos asignarselos a la lista de los meses. Las demas funciones son iguales a esta lo unico que cambia son los valores de los meses, igual aca va el codigo de las otras funciones...
function trimestre2(){ opcion0=new Option("Abril","Abril","defauldSelected"); opcion1=new Option("Mayo","Mayo"); opcion2=new Option("Junio","Junio"); document.forms.formulario.meses.options[0]=opcion0; document.forms.formulario.meses.options[1]=opcion1; document.forms.formulario.meses.options[2]=opcion2; } function trimestre3(){ opcion0=new Option("Julio","Julio","defauldSelected"); opcion1=new Option("Agosto","Agosto"); opcion2=new Option("Septiembre","Septiembre"); document.forms.formulario.meses.options[0]=opcion0; document.forms.formulario.meses.options[1]=opcion1; document.forms.formulario.meses.options[2]=opcion2; } function trimestre4(){ opcion0=new Option("Octubre","Octubre","defauldSelected"); opcion1=new Option("Noviembre","Noviembre"); opcion2=new Option("Diciembre","Diciembre"); document.forms.formulario.meses.options[0]=opcion0; document.forms.formulario.meses.options[1]=opcion1; document.forms.formulario.meses.options[2]=opcion2;
Este script nos permitira seleccionar todos los CheckBox que contiene un formulario, es muy util para que el usuario no tenga que ir seleccionando uno por uno. antes que nada veamos un ejemplo de como se puede aplicar. Supongamos que tenemos un formulario donde le pedimos al usuario que seleccione los temas que le interesan, si le interesan todos hace click en todos y listo!!! Se ahorra un par de clicks no? Veamos...
Musica Cine Television Teatro Tecnologia Entretenimiento Literatura
Internet Video Juegos Turismo Todos Bien, para el que no hizo click en "Todos" por favor hagalo asi ve el funcionamiento del script. Es muy simple armar este tipo de formularios, a continuacion le paso el codigo fuente del mismo...
<form name="form1" method="post" action=""> <table width="340" border="0" align="center" cellpadding="2" cellspacing="1"> <tr> <td width="12" bgcolor="#E3E3E3"><input type="checkbox" name="checkbox" value="checkbox"> Musica</td> </tr> <tr> <td bgcolor="#F0F0F0"><input type="checkbox" name="checkbox2" value="checkbox"> Cine</td> </tr> <tr> <td bgcolor="#E3E3E3"><input type="checkbox" name="checkbox3" value="checkbox"> Television</td> </tr> <tr> <td bgcolor="#F0F0F0"><input type="checkbox" name="checkbox4" value="checkbox"> Teatro </td> </tr> <tr> <td bgcolor="#E3E3E3"><input type="checkbox" name="checkbox5" value="checkbox"> Tecnologia</td> </tr> <tr> <td bgcolor="#F0F0F0"><input type="checkbox" name="checkbox6" value="checkbox"> Entretenimiento</td> </tr> <tr> <td bgcolor="#E3E3E3"><input type="checkbox" name="checkbox7" value="checkbox"> Literatura</td> </tr> <tr> <td bgcolor="#F0F0F0"><input type="checkbox" name="checkbox8" value="checkbox"> Internet</td> </tr> <tr> <td bgcolor="#E3E3E3"><input type="checkbox" name="checkbox9" value="checkbox"> Video Juegos</td> </tr> <tr> <td bgcolor="#F0F0F0"><input type="checkbox" name="checkbox10" value="checkbox"> Turismo </td> </tr> <tr> <td bgcolor="#FFFFCC"><input type="checkbox" name="checkbox11" value="checkbox" onClick="ChequearTodos(this);"> Todos</td> </tr> </table> </form>
A destacar en este formulario es el ultimo checkbox que contiene la funcion JavaScript que selecciona a todos los demas...
<td bgcolor="#FFFFCC"><input type="checkbox" name="checkbox11" value="checkbox" onClick="ChequearTodos(this);"> Todos</td>

A continuacion les dejo el codigo de la funcion...
<script> function ChequearTodos(chkbox) { for (var i=0;i < document.forms[0].elements.length;i++) { var elemento = document.forms[0].elements[i]; if (elemento.type == "checkbox") { elemento.checked = chkbox.checked } } } </script>
Este codigo pueden ubicarlo en cualquier parte de la pagina HTML, siempre recuerden agregar la etiqueta <script>. Sin mas les mando un saludo!

Aquí Podrás Encontrar Ejemplos de Javascript

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Aquí Podrás Encontrar Ejemplos de Javascript

Caricato da

Copyright:

Formati disponibili

http://www.gamarod.com.

Cdigo <BODY onLoad="window.defaultStatus='AQU VA TU MENSAJE';return true">

onMouseOver="window.status='TU MENSAJE VA AQUI';return true"

Ejemplo Aade tu pagina a favoritos pulsando en una palabrita.

Cdigo <SCRIPT Language="JavaScript">document.write(screen.width + " x " + screen.height)</SCRIPT>

<Script Language="JavaScript">  </script>

<!-- Seccion de Javascript.<form><INPUT TYPE="button" VALUE="Actualizar" onClick='parent.location="javascript:location.reload()"'><SCRIPT LANGUAGE="JavaScript"> </form>

Ejemplo Este codigo te colocar un reloj en la barra de estado.

Precarga de imagenes en JavaScript

var imagenes = new Array("imagen1.gif","imagen2.gif","imagen3.gif");

<BODY> <script> cargarimagenes(); </script> </BODY>

que hemos introducido en la pgina mediante:

<img src="img/logo.gif" name="logotipo" width="249" height="28" border="0">

<form> <inputtype="button"value= "dimeanchura"onClick="alert('anchura='+document.logotipo.width)"> </form>

<img name="dinosaurio" src="img/avatar.gif" width="60" height="60" border="0">

<input type="button" value= "dame altura" onClick="alert(document.dinosaurio.height)">

Como ejemplo, vamos a cambiar dinmicamente el borde de la imagen inferior:

<input type="button" value= "cambia borde"onClick="document.icono.border=10;">

<img name="imagen1"src="img/logo.gif"........onAbort="alert('ha cancelado la carga de la imagen')">

<img name="imagen1"src="img/logo.gif"........onError="alert('la imagen del logotipo no se ha podido cargar')">

<img name="imagen1"src="img/logo.gif"........onLoad="alert('ya se ha cargado la imagen del logotipo')">

<img name="imagen1"src="img/logo.gif"........onClick="alert('gracias por pulsarme')">

<img name= "imagen1"src="img/logo.gif"........onmouseOver="alert('gracias por pasar sobre m)">

<img name= "imagen1"src="img/logo.gif"........onmouseOut="alert('adios, amigo')">

<a href="#" ................ style="cursor:default;"><img src=..........></a>

que hemos introducido en la pgina mediante:

<img src="img/logo.gif" name="logotipo" width="249" height="28" border="0">

<form> <inputtype="button"value= "dimeanchura"onClick="alert('anchura='+document.logotipo.width)"> </form>

<img name="dinosaurio" src="img/avatar.gif" width="60" height="60" border="0">

<input type="button" value= "dame altura" onClick="alert(document.dinosaurio.height)">

Como ejemplo, vamos a cambiar dinmicamente el borde de la imagen inferior:

<input type="button" value= "cambia borde"onClick="document.icono.border=10;">

<img name="imagen1"src="img/logo.gif"........onAbort="alert('ha cancelado la carga de la imagen')">

<img name="imagen1"src="img/logo.gif"........onError="alert('la imagen del logotipo no se ha podido cargar')">

<img name="imagen1"src="img/logo.gif"........onLoad="alert('ya se ha cargado la imagen del logotipo')">

<img name="imagen1"src="img/logo.gif"........onClick="alert('gracias por pulsarme')">

<img name= "imagen1"src="img/logo.gif"........onmouseOver="alert('gracias por pasar sobre m)">

<img name= "imagen1"src="img/logo.gif"........onmouseOut="alert('adios, amigo')">

<a href="#" ................ style="cursor:default;"><img src=..........></a>

<script language="JavaScript"> function cambiar() . . . </script>

Musica Cine Television Teatro Tecnologia Entretenimiento Literatura

<td bgcolor="#FFFFCC"><input type="checkbox" name="checkbox11" value="checkbox" onClick="ChequearTodos(this);">&nbsp;Todos</td>

Potrebbero piacerti anche

<td bgcolor="#FFFFCC"><input type="checkbox" name="checkbox11" value="checkbox" onClick="ChequearTodos(this);"> Todos</td>