ingrandire immagine al passaggio del mouse

[superdany]

Ciao chi mi aiuta a scrivere correttamente questo script. Mi funziona soltanto con il click. E' come se avessi attivato onclick invece di onmouseover?
Ho una sola immagine che vorrei far vedere piccola sulla pagina ma che si ingrandisce al passaggio del mouse. E sparisce quando il mouse si muove su un'altra immagine.
Chi è cosi gentile da aiutarmi?
grazie
daniela
questo è il testo che ho messo per visualizzare la mia immagine in una cella.

<a href="javascript:big('immagine.jpg')" onmouseout="big_hide()"><img src="immagine.jpg"></a></p>

questo è lo script

<script type="text/javascript" language="JavaScript">

ns4=(navigator.appName.indexOf("Netscape")>=0 && !document.getElementById)? 1 : 0;
ie4=(document.all && !document.getElementById)? 1 : 0;
ie5=(document.getElementById && document.all)? 1 : 0;
ns6=(document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? 1: 0;
w3c=(document.getElementById)? 1 : 0;

wid=(ie4||ie5)?window.document.body.clientWidth-20:window.innerWidth-36

if(ns4){document.write ('<layer name="di1"></layer>')}else{document.write ('<div id="di1" style="position:absolute;y-index:100" ></div>')}

outd=""

if(w3c)div1=document.getElementById('di1')
if(ie4)div1=document.all['di1']
if(ns4)div1=document.layers['di1']

function move_div(x,y){
if (isNaN(x+y))return
if(ns4){div1.moveTo(x,y)}else{div1.style.left=x+'p x';div1.style.top=y+'px';}
}

function write_div(text){
if(ns4){
div1.document.open();
div1.document.write(text);
div1.document.close();
}
else {div1.innerHTML=text;}
}

function big(n){
ondiv=n
write_div("<a href=javascript:void(0) onmouseout='big_hide()' onmouseover='ondiv=1'><img border=0 name=ib src="+n+"></a>");
move_div(x,y)
}

function big_hide(){
ondiv=0;
t3=window.setTimeout('big_hide2()',100)
}

function big_hide2(){
if (ondiv==0){
write_div("");
move_div(-1000,-1000)}
}

y=x=0
function dragIt(evt){if(ie4||ie5){x=window.event.clientX+do cument.body.scrollLeft; y=window.event.clientY+document.body.scrollTop}els e {x=evt.pageX ; y=evt.pageY }}

document.onmousemove = dragIt
if(ns4){document.captureEvents( Event.MOUSEMOVE )}

</script>

[lukeonweb]

In sostanza (vediamo se ho capito) hai delle miniature ed uno spazio per fare vedere la versione grande. Quando passi col mouse sulla piccola, nello spazio dedicato allo "zoom" deve comparire l'immagine grande corrispondente.

Giusto?

[superdany]

Giustissimo!!!
In pratica vorrei che le miniature s'ingradissero a centro pagina. Lo script che ho fatto me le ingrandisce solo in basso a sx e con un click e non con il passaggio del mouse.
Mi aiuti, ho visto dal forum che ci capisci tantissimo!!!
hai visto che bello il sito www.starpool.it poi entrando nella zona spa benessere? ci sono 9 foto che addirittura s'ingrandiscono a centro pagina!

[lukeonweb]

In questa riga:

write_div("<a href=javascript:void(0) onmouseout='big_hide()' onmouseover='ondiv=1'><img border=0 name=ib src="+n+"></a>");

sostituisci onmouseover con onclick.

Non so se è sufficiente. Fammi sapere!

PS. oggi ho scritto un articolo su come fare questa cosa con AJAX... sarà pubblicato nei prossimi giorni!

[superdany]

perdonami ma onclick, vuol dire che devo cliccare e onmouseover che basta passarci sopra con il mouse, giusto?

[superdany]

sigh! non funziona. lo sai che non so proprio come farlo funzionare al passaggio del mouse? farlo funzionare con il click non mi piace proprio!!!!!!!!! aiuto!!!!

[lukeonweb]

perdonami ma onclick, vuol dire che devo cliccare e onmouseover che basta passarci sopra con il mouse, giusto?

Esatto.

C'è questa riga:

document.onmousemove = dragIt

la penultima dello script. Commentala mettendo // avanti:

// document.onmousemove = dragIt

e fammi sapere.

[superdany]

ti ringrazio per la pazienza ma le due // mi cambiano soltanto la posizione della nuova immagine ingrandita che invece di stare accanto al click del mouse ora si apre nell'angolo a sx inalto della pagina.
però non capisco perchè sul div c'è scritto onmouseover e si comporta come onclick.

[superdany]

ho rispolto! il problema non era nello script!
ora funziona! te lo scrivo qui sotto.
L'unica cosa che non mi piace e ci devo lavorare, è che sarebbe meglio poter lavorare con un'immagine sola (miniatura e da ingrandire) piuttosto che due immagini una grande ed una in miniatura (pesano di più).
...e poi mi si apre tutta in basso a sx invece che al centro della miniatura. mi aiuti? grazie!

-----------
<a onmouseover="big('nome.jpg')" onmouseout="big_hide()"><img src="nome,jpg"></a>
-----------
<script type="text/javascript" language="JavaScript">

ns4=(navigator.appName.indexOf("Netscape")>=0 && !document.getElementById)? 1 : 0;
ie4=(document.all && !document.getElementById)? 1 : 0;
ie5=(document.getElementById && document.all)? 1 : 0;
ns6=(document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? 1: 0;
w3c=(document.getElementById)? 1 : 0;

wid=(ie4||ie5)?window.document.body.clientWidth-20:window.innerWidth-36

if(ns4){document.write ('<layer name="di1"></layer>')}else{document.write ('<div id="di1" style="position:absolute;y-index:100" ></div>')}

outd=""

if(w3c)div1=document.getElementById('di1')
if(ie4)div1=document.all['di1']
if(ns4)div1=document.layers['di1']

function move_div(x,y){
if (isNaN(x+y))return
if(ns4){div1.moveTo(x,y)}else{div1.style.left=x+'p x';div1.style.top=y+'px';}
}

function write_div(text){
if(ns4){
div1.document.open();
div1.document.write(text);
div1.document.close();
}
else {div1.innerHTML=text;}
}

function big(n){
ondiv=n
write_div("<a href=javascript:void(0) onmouseover='ondiv=1' onmouseout='big_hide()' ><img border=0 name=ib src="+n+"></a>");
move_div(x,y)
}

function big_hide(){
ondiv=0;
t3=window.setTimeout('big_hide2()',100)
}

function big_hide2(){
if (ondiv==0){
write_div("");
move_div(-1000,-1000)}
}

y=x=0
function dragIt(evt){if(ie4||ie5){x=window.event.clientX+do cument.body.scrollLeft; y=window.event.clientY+document.body.scrollTop}els e {x=evt.pageX ; y=evt.pageY }}

document.onmousemove = dragIt
if(ns4){document.captureEvents( Event.MOUSEMOVE )}

</script>