imagenA.gif
imagenB.gif
Para crear animaciones dinámicas reales y demostraciones eventualmente tendrás que dominar el arte de cambiar las imágenes en comando.
En esta lecciónn estaré cambiando dinámicamente "imagenA" en "imagenB":
|
imagenA.gif |
imagenB.gif |
Debes de estar seguro que las dos imágenes tienen exactamente las mismas dimensiones, de otra forma cuando las cambias, la imagen nueva se estirará para caber en la misma área. En situaciones donde deseas cambiar de imágenes que son de tamaños diferentes no podéis utilizar este tipo de código - tendrás que recurrir a simplemente esconder y mostrar capas separadas.
Para comenzar, tienes que inicialmente mostrar una de las imágenes - así que he decidido de tener un tag DIV llamado "imgDiv" con la "imageA" adentro de esta:
<DIV ID="imgDiv"> <IMG NAME="myImg" SRC="imageA.gif" WIDTH=75 HEIGHT=75 BORDER=0> </DIV>
Nota que he asignado un nombre NAME a la imagen (myImg), este nombre será utilizado cuando se cambia la imagen. El nombre deberá de ser totalmente único, no nombres la imagen el mismo nombre que el DIV que esta adentro, de otra forma no funcionará. Usualmente lo que hago es adjuntar "DIV" a los "ID" de la capa así no habrá ningún conflicto con el nombre.
Revisión: Borra la otra función anterior preload() con esta que es más simple. Todas las lecciones que utilizan esta función (GifAnim, Custom Forms) han sido puestas al día.
Antes de que puedas cambiar la imagen, tienes que precargar la imagen dentro de las reservas de los browsers. Este es el código básico para precargar una imagen :
imagename = new Image(); imagename.src = "imagefilename.gif";
Lo que esto hace es crear un objeto imagen. Nada dificultoso realmente, solamente que ahora tenemos un objeto con el cual podremos accesar una imagen en cualquier momento. Cuando necesitemos cambiar la imagen esta estará disponible inmediatamente - no tendrás que esperar a que la imagen se descargue porque esta estará ya en las reservas. Desde que vas a estar necesitando imagenA y imagenB en las reservas tendré que tener un código para precargar estas dos:
imageA = new Image(); imageA.src = "imageA.gif"; imageB = new Image(); imageB.src = "imageB.gif";
Por más imágenes que tengas para precargar, no te gustaría de escribir cada vez las dos líneas en cada una. Así que en lugar de escribir estas dos líneas, cortemos a una con utilizar la función genérica precargar():
function preload(imgObj,imgSrc) {
eval(imgObj+' = new Image()')
eval(imgObj+'.src = "'+imgSrc+'"')
}
donde:
Ejemplos:
preload('imageA','imageA.gif')
preload('imageB','imageB.gif')
Son mejor de precargar tus imágenes en el momento en que la página esta cargando en lugar de esperar hasta que la página termine de cargar, así que siempre recomiendo de llamar la función precargar inmediatamente después de definir esta.
Una vez que hayas precargado las imágenes podrás accesar y cambiar la imagen en la página. Para cambiar imágenes que están adentro de Capas funcionan un poco diferente entre Netscape y IE. Así que primero te mostrare un código explícito para cambiar cada imagen, luego te mostrare una función genérica la cual podrás utilizar en cualquiera situación.
Si la imagen no esta adentro de una capa, la siguiente es la forma general de cambiar la imagen:
document.images["imageName"].src = imageObject.src
Donde imagenNombre imageNameEs el nombre que supliste en el tag IMG, y imagenObjeto imageObject es el nombre del precargado imagen objeto.
Entonces en mi caso podre utilizar:
document.images["myImg"].src = imageB.src
Pero recuerda, que si la imagen no esta adentro de una capa, en el momento que se encuentre adentro de la capa las cosas cambian.
En Netscape, tienes que referirte a cual tag DIV está metido. En mi caso este está en la capa imgDiv así que tu tienes que adjuntarle document.imgDiv.document en frente de código:
if (ns4) document.imgDiv.document.images["myImg"].src = imageB.src
El "documento" extra entre el nombre del DIV y las imágenes es necesario porque Netscape trata a los DIV´s como un documento totalmente separado.
Pero en Internet Explorer no tienes que hacer esto, solamente tienes que accesarlo como si no estuviera del todo en la capa:
if (ie4) document.images["myImg"].src = imageB.src
Y ahí lo tienes. Todo lo que tienes que hacer ahora es de poner ese código dentro de una función separada y llamar a esa función cuando desees cambiarla:
function changeToA() {
if (ns4) document.imgDiv.document.images["myImg"].src = imageA.src
if (ie4) document.images["myImg"].src = imageA.src
}
function changeToB() {
if (ns4) document.imgDiv.document.images["myImg"].src = imageB.src
if (ie4) document.images["myImg"].src = imageB.src
}
Ver images1.html para un ligero ejemplo utilizando estas dos funciones.
La función changeImage() elimina la necesidad de tener funciones separadas para cada vez que deseas cambiar una imagen. Solamente tienes que mandar la capa en que este está, el nombre de la imagen, y el nombre del precargado imagen objeto - layer, imgName y imgObj respectivamente:
function changeImage(layer,imgName,imgObj) {
if (ns4 && layer!=null) eval('document.'+layer+'.document.images["'+imgName+'"].src = '+imgObj+'.src');
else document.images[imgName].src = eval(imgObj+".src");
}
En mi situación puedo reemplazar la función changeToA() con simplemente:
changeImage('imgDiv','myImg','imageA')
Y la misma para la imagenB:
changeImage('imgDiv','myImg','imageB')
Ver images2.html para una ejemplo de una funcion changeImage().
Notas:
La función changeImage() también puede ser utilizada para nested Layers, para él layer argumento puedes insertar él parentLayer.document.childLayer similarmente de como el objeto Dynamic Layer controla capas añadidas.
Puedes utilizar esta función para imágenes que ni siquiera son Layers, solamente pasa nulo null para el argumento layer:
changeImage(null,'myImg','imageB')
También, la función changeImage() es compatible con versiones viejas . Si tienes una página capa y la observas en Netscape 3, la función trabajará apropiadamente. Puedes practicar con observar cualquiera de estos ejemplos con ese Browser. No hay otro browser que sea captable de cambiar imágenes, así que si deseas chequear por errores para la habilidad de cambiar imágenes puedes utilizar esta alteración de la función changeImage():
function changeImage(layer,imgName,imgObj) {
if (document.images) {
if (ns4 && layer!=null) eval('document.'+layer+'.document.images["'+imgName+'"].src = '+imgObj+'.src');
else document.images[imgName].src = eval(imgObj+".src");
}
}
La dos funciones changeImage() y preload() son parte de DynAPI y estan en el fichero images.js :
Fuente de Código
images.js
He encontrado que el tópico de Mouse rollovers esta ya casi como muerto, así que no me he preocupado de cubrir este anteriormente. Como sea ha habido una cantidad de gente que me ha preguntado por esto, ligeramente mostrare como hacerlo utilizando mi función changeImage().
La idea atrás de los rollovers es muy simple, cuando pones el ratón encima de una imagen, cambia a una imagen diferente, y cuando mueves el ratón afuera de la imagen, esta cambia de vuelta a la anterior. Para realizar esto tendrás que encerrar el tag IMG con un anchor/hyperlink y llamar a la función changeImage() utilizando los eventos onMouseOver y onMouseOut. Los eventos onMouseOver y onMouseOut tienen que ser llamados por el hyperink porque en Netscape el tag IMG no tiene esos eventos incorporados en ello.
Sin embargo, recuerda, que tienes que encañonar el anchor "la ancla" a algún punto antes de utilizarla. Frecuentemente Rollovers son utilizados en barras de herramientas así que de esas forma se quedan pegados en la página la cual deseas que estos vayan. Pero en situaciones las cuales que no quieres que el hyperlink vaya a ningún lado, puedes en lugar insertar javascript:void(null) para el HREF. El cual es solamente un comando que hace absolutamente nada. El hyperlink continuará existiendo - este solamente ejecutará al comando javascript que no hace nada.
<DIV ID="imgDiv">
<A HREF="javascript:void(null)"
onMouseOver="changeImage('imgDiv','myImg','imageB')"
onMouseOut="changeImage('imgDiv','myImg','imageA')">
<IMG NAME="myImg" SRC="imageA.gif" WIDTH=75 HEIGHT=75 BORDER=0></A>
</DIV>
Ver images3.html para un mouse rollover.
| Casa | Próxima Lección: Escribiendo Capas |