UN JAVASCRIPT A LA SEMANA: Thumbnails de imágenes

Thumbnails de imágenes ^1/2

semana 76 - 17 julio 2000

Las thumbnail no son sino imágenes GIF o JPG de pequeñas dimensiones que ofrecen una visión preliminar de imágenes más grandes. En otras palabras, cuando hay que visualizar muchas imágenes, con las thumbnail se evita tener que insertar decenas de grandes imágenes JPG que podrían hacer más lenta la página. De este modo, el visitante tiene una idea aproximada del aspecto de la imagen por la miniatura y puede, por tanto, pulsarla si le interesa para visualizarla en formato mayor.

Las thumbnail tienen un peso comprendido entre 1K y 3K (debido a sus reducidas dimensiones) y pueden insertarse por decenas en la misma página sin hacerla demasiado pesada.

El script de esta semana permite una operación de este tipo, con la diferencia de que pulsando en cada una de las miniatura, la imagen grande se visualizará en la misma página y no en una diferente.

El ejemplo consta de 7 file:

esempio.htm
thumb1.gif (la miniatura de la primera imagen)
thumb2.gif (la miniatura de la segunda imagen)
thumb3.gif (la miniatura de la tercera imagen)
01.gif (la primera imagen grande)
02.gif (la segunda imagen grande)
03.gif (la tercera imagen grande)

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 es la página en la cual queremos insertar el efecto.
El código Javascript necesario para el funcionamiento del ejemplo es bastante complejo, ya que debe responder a las exigencias de compatibilidad de MsIe y Netscape.
El código se insertará en el encabezamiento del documento (entre las marcas <HEAD>):

function enlarge(which,e){

if (document.all){
if (showimage.style.visibility=="hidden"){
showimage.style.left=document.body.scrollLeft+event.clientX
showimage.style.top=document.body.scrollTop+event.clientY
showimage.innerHTML='<img src="'+which+'">'
showimage.style.visibility="visible"
}
else
showimage.style.visibility="hidden"
return false
}

else if (document.layers){
if (document.showimage.visibility=="hide"){
document.showimage.document.write('<a href="#" onMouseover="drag_dropns(showimage)"><img src="'+which+'" border=0></a>')
document.showimage.document.close()
document.showimage.left=e.x
document.showimage.top=e.y
document.showimage.visibility="show"
}
else
document.showimage.visibility="hide"
return false
}

else
return true
}

</script>

var nsx
var nsy
var nstemp

function drag_dropns(name){
temp=eval(name)
temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
temp.onmousedown=gons
temp.onmousemove=dragns
temp.onmouseup=stopns
}

function gons(e){
temp.captureEvents(Event.MOUSEMOVE)
nsx=e.x
nsy=e.y
}
function dragns(e){
temp.moveBy(e.x-nsx,e.y-nsy)
return false
}

function stopns(){
temp.releaseEvents(Event.MOUSEMOVE)
}

var dragapproved=false

function drag_dropie(){
if (dragapproved==true){
document.all.showimage.style.pixelLeft=tempx+event.clientX-iex
document.all.showimage.style.pixelTop=tempy+event.clientY-iey
return false
}
}

function initializedragie(){
if (event.srcElement.parentElement.id=="showimage"){
iex=event.clientX
iey=event.clientY
tempx=showimage.style.pixelLeft
tempy=showimage.style.pixelTop
dragapproved=true
document.onmousemove=drag_dropie
}
}

if (document.all){
document.onmousedown=initializedragie
document.onmouseup=new Function("dragapproved=false")
}

</script>

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