ingrandire immagine al passaggio del mouse

superdany

Nuovo Utente
11 Nov 2008
6
0
0
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+'px';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+document.body.scrollLeft; y=window.event.clientY+document.body.scrollTop}else {x=evt.pageX ; y=evt.pageY }}

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

</script>
 

lukeonweb

Utente Attivo
5 Mar 2003
5.175
13
38
45
Napoli
www.lucaruggiero.it
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

Nuovo Utente
11 Nov 2008
6
0
0
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

Utente Attivo
5 Mar 2003
5.175
13
38
45
Napoli
www.lucaruggiero.it
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

Nuovo Utente
11 Nov 2008
6
0
0
perdonami ma onclick, vuol dire che devo cliccare e onmouseover che basta passarci sopra con il mouse, giusto?
 

superdany

Nuovo Utente
11 Nov 2008
6
0
0
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!!!!
 

superdany

Nuovo Utente
11 Nov 2008
6
0
0
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

Nuovo Utente
11 Nov 2008
6
0
0
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+'px';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+document.body.scrollLeft; y=window.event.clientY+document.body.scrollTop}else {x=evt.pageX ; y=evt.pageY }}

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

</script>
 
Discussioni simili
Autore Titolo Forum Risposte Data
G ingrandire una immagine al passaggio del mouse Webdesign e Grafica 6
Shyson ingrandire immagine png Webdesign e Grafica 1
L CSS, cambiare i colori della barra e ingrandire una immagine WordPress 1
B Ingrandire un'immagine con Gimp Webdesign e Grafica 4
T ingrandire immagine Javascript 5
M tooltip per ingrandire immagine, con fireofox Javascript 0
matteoraggi Ingrandire i moduli dei form con css HTML e CSS 2
Shyson Ingrandire ico Webdesign e Grafica 0
P Non riesco a mettere al centro i tasti e ingrandire la select PHP 10
A Ingrandire Unity Web Player Javascript 17
S Ingrandire testo in un campo input HTML e CSS 6
C FP2003 - Ingrandire immagini piccole con click o al passaggio del mouse Webdesign e Grafica 1
C photoshopCS:ingrandire immagini Webdesign e Grafica 1
F Aiuto! cambio immagine di sfondo al cambio pagina HTML e CSS 2
gara1 inserire immagine di sfondo in canvas Javascript 0
T Dividere un'immagine in 3 parti orizzontali e salvarle separatamente Photoshop 2
W Immagine come maschera photoshop Photoshop 1
L Ultima immagine Windows e Software 0
A Immagine decentrata con sfondo trasparente Photoshop 0
A Scontornare immagine di bassa qualità. Photoshop 2
B Selezionare un'immagine e salvare la selezione Photoshop 3
F Immagine come fosse selezione attiva Photoshop 1
Y Percorso assoluto file immagine HTML e CSS 9
K Come posso usare un'immagine al posto di un bottone? HTML e CSS 2
M Upload immagine con javascript problemi con FormData() Javascript 1
M Visulizzare immagine con php PHP 8
Stex1967 Salvare una immagine che si trova su porta TCP 8080 di altro sito PHP 7
L Come caricare un'immagine in Canvas dinamicamente Javascript 0
R Cambiare il nome dell'immagine dopo caricamento ftp HTML e CSS 0
L salvare una immagine elaborata in canvas Javascript 1
L salvare una immagine elaborata in canvas Javascript 1
Y Come caricare e visualizzare un'immagine PHP 0
S Testo scrolla su immagine che cambia HTML e CSS 0
M Quando ha l'immagine ingrandita è possibile fare rotazione per ritagliare? Photoshop 0
R Caricamento immagine su cartella remota + mysql PHP 3
R Non riesco a rinnovare l'immagine di sfondo PHP 1
R Non riesco a cambiare l'immagine di sfondo PHP 4
L Upload di un'immagine all'interno di un database usando php PHP 6
G Modifica immagine di sfondo attraverso un bottone PHP 18
F photoshop portable : spostamento immagine Photoshop 0
A Server Apache immagine not found (ERROR 404) Apache 5
P [Photoshop] ritagliare una immagine Photoshop 1
S [PHP] Recupero nome immagine da Form con input file PHP 3
D [Javascript] salvare immagine canvas - paypal Javascript 0
D [HTML] Inviare un link contenente un' immagine HTML e CSS 4
M [PHP] Cercare l'ultima immagine caricata in una cartella datata PHP 15
C [Photoshop] bordi tondi come posso fare per ottenerli come nell'immagine allegata Photoshop 2
M [HTML] Tasto condivisione social e immagine HTML e CSS 2
R [HTML] Effetto carousel di testo su immagine fissa HTML e CSS 2
L [HTML] problema sfondo tutto schermo con immagine HTML e CSS 1

Discussioni simili