Problema preview immagine ...

[MrRam]

Buongiorno a tutti, vi chiedo una mano su uno script che al passaggio del mouse sopra una immagine, ne mostra una versione ingrandita (una preview).
Prima di mostrare l'immagine, ce ne una classica di caricamento (nel mio caso la "images/progress_bar_preview.gif") alla quale però vorrei dare un borso bianco di 20px o meglio sarebbe poter dimensionare il div che la contiene con la stessa grandezza dell'immagine che poi verrà mostrata.
Sembra banale ma non riesco a ottenere la cosa modificando lo script.

Mi potreste aiutare? Una pagina dove poter vedere il problema è:
http://www.smalladvertise.com/chat.asp

Grazie a tutti, sotto lo script:

<!--
/*
Simple Image Trail script- By JavaScriptKit.com
Visit http://www.javascriptkit.com for this script and more
This notice must stay intact
*/

var w;
var h;

if (document.getElementById || document.all)
document.write('<div id="trailimageid" style="position:absolute;visibility:hidden;display :none;left:0px;top:-1000px;z-index:300;border:1px solid #404040;background:#FFFFFF;">[img]images/progress_bar_preview.gif[/img]</div>')

function gettrailobj()
{
if (document.getElementById) return document.getElementById("trailimageid").style
else if (document.all) return document.all.trailimagid.style
}

function truebody()
{
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function hidetrail()
{
document.getElementById('ttimg').src='images/progress_bar_preview.gif';
gettrailobj().active=false;
gettrailobj().visibility="hidden";
gettrailobj().display="none";
followmouse(e);
getMouseXY(e);
}

function showtrail(file)
{
if(navigator.userAgent.toLowerCase().indexOf('oper a') == -1 && navigator.userAgent.toLowerCase().indexOf('safari' ) == -1)
{
// followmouse()

var img = document.getElementById('ttimg');
img.src=file;
gettrailobj().visibility="visible"
gettrailobj().display="inline"
gettrailobj().width=img.style.width
gettrailobj().height=img.style.height
document.onmousemove = function(e){
followmouse(e);
getMouseXY(e);
}

w=gettrailobj().width
h=gettrailobj().height
}
}

function followmouse(e)
{

if(navigator.userAgent.toLowerCase().indexOf('oper a') == -1 && navigator.userAgent.toLowerCase().indexOf('safari' ) == -1)
{

var xcoord=55
var ycoord=-(gettrailobj().width)

if (typeof e != "undefined")
{
xcoord+=e.pageX
ycoord+=e.pageY
}
else if (typeof window.event !="undefined")
{
xcoord+=truebody().scrollLeft+event.clientX
ycoord+=truebody().scrollTop+event.clientY
}

var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)

if (xcoord+w+3>docwidth)
xcoord=xcoord-w-(20*2)

if (ycoord-truebody().scrollTop+h>truebody().clientHeight)
ycoord=ycoord-h-20;

gettrailobj().left=xcoord+"px"
gettrailobj().top=ycoord+"px"

}
}
//-->

[cavicchiandrea]

Originariamente inviato da MrRam
Buongiorno a tutti, vi chiedo una mano su uno script che al passaggio del mouse sopra una immagine, ne mostra una versione ingrandita (una preview).
Prima di mostrare l'immagine, ce ne una classica di caricamento (nel mio caso la "images/progress_bar_preview.gif") alla quale però vorrei dare un borso bianco di 20px o meglio sarebbe poter dimensionare il div che la contiene con la stessa grandezza dell'immagine che poi verrà mostrata.
Sembra banale ma non riesco a ottenere la cosa modificando lo script.

Mi potreste aiutare? Una pagina dove poter vedere il problema è:
http://www.smalladvertise.com/chat.asp

Grazie a tutti, sotto lo script:
...

Io userei attributo border=".." e imposterei il bordo dell'immagine a 20, se devi obbligatoriamente usare un div io aggiungerei un div dedicato all'immagine con dimensioni maggiori di 20 px per lato impostando lo sfondo di colore x (servirà per simulare il bordo).
Ridimensionare il div contenitore alle dimensioni della gif maggiorata di 20px per poi modificare nuovamente alle dimensioni x e y per far contenere l'immagine definitiva mi sembra l'operazione + complessa e + difficile da realizzare (è ho forti dubbi che sia possibile)

[MrRam]

si, la cosa + semplice sarebbe aumentare il bordo dell'immagine di precaricamento, e ci riesco, ma non riesco a far sparire il bordo per l'immagine vera.

[cavicchiandrea]

Prova cosi:
[img]images/progress_bar_preview.gif[/img] e nella funzione showtrail aggiungi gettrailobj().border="0"

[MrRam]

purtroppo avevo già fatto questa prova ma lavorando con lo stile che mi consentiva di dare il colore bianco al bordo.
putroppo però il bordo non sparisce quando appare la vera immagine.. :-(

[MrRam]

io ci provo ... UP!