UN JAVASCRIPT A LA SEMANA: Efecto de transición en imágenes 1/2

Transición en imágenes ^1/2

semana 65 - 01 mayo 2000

La gestión de imágenes en una página Web está sujeta a limitaciones imputables al carácter estático de los documentos HTML, que, como es bien sabido, una vez cargados, no permiten la interacción con la página. Javascript y Dynamic HTML nos ofrecen su ayuda proporcionando instrumentos de interacción que no sólo permite manipular los objetos presentes en el documento con la página completamente cargada, sino también realizar efectos gráficos muy atractivos.
El ejemplo de esta semana lo confirma. Se trata de un script que permite visualizar una serie de imágenes en secuencia gracias a dos enlaces de tipo "precedente" y "sucesivo". Cuando se pasa de una página a otra va, una serie de efectos de transición producen un sugestivo resultado gráfico.

El ejemplo consta de 5 file:

Para comprender más fácilmente el presente script, haz siempre referencia a los file antedichos, verificando los procedimientos y datos expresados. Sólo de esta manera, con una comparación continua, podrás entender las peculiaridades de este Javascript.

esempio.htm

Este file respresenta la página en la que queremos insertar el script. El código se insertará, en parte, entre las marcas <HEAD> y, en parte, en el cuerpo del documento.
Las imágenes 01.gif, 02.gif, 03.gif y 04.gif son las imágenes que queremos visualizar en el ejemplo. Tienen que tener las mismas dimensiones tanto a lo ancho como a lo alto.

En el encabezamiento del documento (HEAD) hay que insertar el siguiente código:

var photos=new Array()
var photoslink=new Array()
var which=0

photos[0]="01.gif"
photos[1]="02.gif"
photos[2]="03.gif"
photos[3]="04.gif"

var linkornot=1

photoslink[0]="http://www.htmlpoint.com"
photoslink[1]="http://www.htmlpoint.com"
photoslink[2]="http://www.htmlpoint.com"
photoslink[3]="http://www.htmlpoint.com"

var preloadedimages=new Array()
for (i=0;i<photos.length;i++){
preloadedimages[i]=new Image()
preloadedimages[i].src=photos[i]
}

function applyeffect(){
if (document.all){
photoslider.filters.revealTrans.Transition=Math.floor(Math.random()*23)
photoslider.filters.revealTrans.stop()
photoslider.filters.revealTrans.apply()
}
}

function playeffect(){
if (document.all)
photoslider.filters.revealTrans.play()
}

function keeptrack(){
window.status="Image "+(which+1)+" of "+photos.length
}

function backward(){
if (which>0){
which--
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}
}

function forward(){
if (which<photos.length-1){
which++
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}
}

function transport(){
window.location=photoslink[which]
}

</script>

[ P á g i n a s u c e s i v a ]