Allora ho una pagina con 30 foto di grandezza 100x150, allienate su 5 colonne per 6 righe. In pratica al passaggio del mouse su una di queste foto deve uscire un pop-up vicino al puntatore con un immagine più ingrandita, allo spostare del mouse dall'immagine il pop-up si chiude. Naturalmente il pop-up non deve avere la barra di windows, insomma deve essere giusto l'immagine. Come fare? Grazie.
Prova a vedere questo.
Su IE funziona, su FF non l'ho testato e quindi non garantisco
Codice PHP:<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tooltip image</title>
<script language="javascript">
var mouseX
var mouseY
function Tooltip(foto){
document.getElementById('pop').innerHTML="[img]"+foto+"[/img]"
}
function Show(obj){
document.getElementById(obj).style.display="block";
}
function Hide(obj){
document.getElementById(obj).style.display="none";
}
function coords(e){
if(!e) e=window.event;
mouseX = e.clientX;
mouseY = e.clientY;
document.getElementById('pop').style.left=mouseX;
document.getElementById('pop').style.top=mouseY;
}
document.onmousemove=coords;
</script>
</head>
<body bgcolor="#ffffff">
<div id="pop" style="position:absolute;z-index:2;width:410px;height:277px;background-color:#ffffff;top:200;left:100;"></div>
<div>
<table>
<tr>
<td>[img]img1_small.jpg[/img]</td>
<td>[img]img2_small.jpg[/img]</td>
<td>[img]img3_small.jpg[/img]</td>
</tr>
</table>
</div>
</body>
</html>
Su IE funziona alla perfezione ma non su FF.
se sostituisci queste 2 righe
document.getElementById('pop').style.left=mouseX;
document.getElementById('pop').style.top=mouseY;
con queste
document.getElementById('pop').style.left=mouseX+5 +'px';
document.getElementById('pop').style.top=mouseY+5+ 'px';
funziona con FF ed eviti un eventuale sfarfallio
considera che la prima volta che passi su di una miniatura devi fermarti un minimo per permettere all' immagine grande di essere caricata
ciao
Ora funzionano alla perfezione su entrambe, grazie.
Un ultima cosa, ho allineato anche le foto per verticale, solo succede che il pop-up esce dalla pagina facendo apparire la barra di scorrimento. C'è un modo per fare adattare il pop-up all'interno della pagina in modo tale che esso esca in alto o in basso o a destra o cmq in una posizione completamente visibile?
le immagini ingrandite hanno tutte le medesime dimensioni?
Si hanno tutte le stesse dimensioni.
ora vado un po' di fretta, cmq se non ti aiuta qualcun altro prima ti posto come farei io piu' avanti
Si una cosa le immagini che si ingrandiscono sono quasi tutte 300x450, ma alcune nella stessa pagina sono 450x300. Grazie
Permessi di invio
Rispondi quotando