Far apparire un immagine al passaggio del mouse

[JKley]

Nessuno allora sa come peter fare per evitare che le immagini escano dallo schermo? Grazie

[Xinod]

probabilmente avrai risolto, ma nel frattempo ho buttato giu questo esempio
http://www.xinod.it/scripts/tooltip_gallery/
qui la versione .zip
ciao

[JKley]

Si quaisi riuscito, solo che per metterci le mie immagini in pratica ho fatto così. Ho fatto due cartelle come nell'esempio, sm e xl, e dentro ognuna ho messo le immagini di diverse dimensioni, la piccosu su sm e la granse su xl, con il nome diverso da quelle dell'esempio ma con lo stesso nome nelle due cartelle. La path quindi è restata invariata, le immagini si vedono nel browser e IE mi da il messaggio che ha bloccato i pop-up, solo che al momento dell'attivazione dei pop-up l'immagine non esce e neanche il messagio loading, stessa cosa con ff. Devo cambiare qualcos'altro? Grazie.

[Xinod]

l' avvertimento di IE non e' da prendere in considerazione perche' appare solo in locale,
se non avviene nulla anche dopo aver sbloccato il controllo (e con FFox) stai sbagliando altro

pubblica online la pagina e i file annessi con le modifiche che hai apportato e lascia il link
ciao

[JKley]

Ti ho mandato un messagio.

[pmi]

Grazie per avermi segnalato questo script. Ho una situazione già esistente dove le cartelle delle immagini e le miniature non rispettano var xlPath='xl'; Praticamente tramite la parte html dovrei passare a var xlPath='xl'; // il link per ogni immagine che si deve ingrandire. Come posso fare ? Grazie

[Xinod]

non so quale regola tu segua nell' organizzazione delle immagini,
per cui ti propongo una modifica in modo da rendere completamente indipendente i 2 percorsi:
ogni immagine racchiusa in un link

[img]percorso/miniatura.jpg[/img]

e in href il percorso all' immagine ingrandita

questo

	imgs=d.getElementById('gallery').getElementsByTagName('img');
	for(var k=0;k<imgs.length;k++){
		imgs[k].onmouseout=xlHide;
		imgs[k].onmouseover=xlShow;
		imgs[k].onmousemove=xlGetCoords;
	}

lo cambi in

	imgs=d.getElementById('gallery').getElementsByTagName('img');
	for(var k=0;k<imgs.length;k++){
		if(imgs[k].parentNode.tagName=='A'){
			imgs[k].onmouseout=xlHide;
			imgs[k].onmouseover=xlShow;
			imgs[k].onmousemove=xlGetCoords;
			/* decommenta la prossima riga se vuoi impedire
			che al click sul link si apra l' immagine ingrandita */
			// imgs[k].parentNode.onclick=function(){return false}
		}
	}

questo

	var fileName=xlPath+source.src.substring(source.src.lastIndexOf('/'));

in

	var fileName=source.parentNode.href;

xlPath a questo punto non ti serve piu'
ciao

[pmi]

in questo modo la path è ok,
si dovrebbe escogitare un altro sistema per passargli l'immagine da ingrandire poichè il link di solito serve per andare ad un'altra pagine e in questo caso apre solo una pagina bianca che mostra l'immagine ingrandita.

Ho notato che se l'immagine compare nella parte bassa e tocca il fondo pagina, si muove solo in orizzontale e resta bloccata in verticale. Mentre se l'immagine compare nella parte alta funziona bene.

Per togliere il loading quali righe devo commentare?

Ciao e grazie

<!--
/*
author: Xinod | date: 14/01/07 | url: [url]www.xinod.it/scripts/tooltip_gallery/index.php[/url]
this script is free to use as long as this copyright notice remains intact
*/

var xlPath='xl'; // path to enlarged images
var dist=15; // horizontal distance from the cursor
var padd=5; // padding+border pop div;

var dfW=waitW=100; // default width while loading
var dfH=waitH=20; // default height while loading

// other reserved vars, do not modify/overwrite
var imgLoaded=false;
var dPadd=2*padd;
var d,vDoc,pDiv,pLoad,pTxt,pImg,bH,bW,mX,mY,scrX,scrY;

window.onload=function(){
    var d=document; if(!d.getElementById || !d.getElementsByTagName) return;
    vDoc=(d.documentElement && d.documentElement.clientWidth)?d.documentElement:d.body;

    pDiv=d.createElement('div');
    pDiv.setAttribute('id','pop');

    pLoad=d.createElement('div');
    pTxt=d.createTextNode('...Loading...');
    // comment the above line and decomment the one below if you are using an image to display loading activity,
    // set a valid path to your loading gif in pTxt.src and adjust waitW and waitH according to its width and height.
    // pTxt=d.createElement('img'); pTxt.src='loading.gif';
    pLoad.appendChild(pTxt);
    pDiv.appendChild(pLoad);

    pImg=d.createElement('img');
    pImg.style.display='none';

    pDiv.appendChild(pImg);
    d.body.appendChild(pDiv);

    imgs=d.getElementById('gallery').getElementsByTagName('img');
    for(var k=0;k<imgs.length;k++){
        if(imgs[k].parentNode.tagName=='A'){
            imgs[k].onmouseout=xlHide;
            imgs[k].onmouseover=xlShow;
            imgs[k].onmousemove=xlGetCoords;
            /* decommenta la prossima riga se vuoi impedire
            che al click sul link si apra l' immagine ingrandita */
            // imgs[k].parentNode.onclick=function(){return false}
        }
    }
}
function xlShow(e){
    if(!e) e=window.event;
    pLoad.style.display=pDiv.style.display='block';
    var source=(e.target)?e.target:e.srcElement;
    var fileName=source.parentNode.href;    
    imgLoader=new Image();
    imgLoader.onload=function(){
        pLoad.style.display='none';
        pImg.src=this.src;
        pImg.style.display='block';
        imgLoaded=true;
        imgLoader.onload=null;
    }
    imgLoader.src=fileName;
}
function xlHide(){
    pDiv.style.display=pImg.style.display='none';
    pDiv.style.top='0px';
    pDiv.style.left='0px';
    imgLoaded=false;
}
function xlGetCoords(e){
    if(!e) e=window.event;
    bW=(vDoc.clientWidth)?vDoc.clientWidth:self.innerWidth;
    bH=(vDoc.clientHeight)?vDoc.clientHeight:self.innerHeight;
    scrX=(window.scrollX)?window.scrollX:vDoc.scrollLeft;
    scrY=(window.scrollY)?window.scrollY:vDoc.scrollTop;
    mX = e.clientX;
    mY = e.clientY;    
    dfW=(imgLoaded)?imgLoader.width:waitW;
    dfH=(imgLoaded)?imgLoader.height:waitH;
    pDiv.style.left=(((mX+dfW+dPadd+dist)<bW)?mX+dist:mX-dfW-(dist+dPadd))+scrX+'px';
    pDiv.style.top=(((mY+dfH+dPadd)<bH)?mY:bH-(dfH+dPadd))+scrY+'px';
}
//--> 

[Xinod]

Originariamente inviato da pmi
si dovrebbe escogitare un altro sistema per passargli l'immagine da ingrandire poichè il link di solito serve per andare ad un'altra pagine e in questo caso apre solo una pagina bianca che mostra l'immagine ingrandita.

sono certo troverai un sistema migliore
comunque l' immagine ingrandita resta un contenuto ed e' meglio sia fruibile in qualche modo

comunque, come gia' scritto nelle note, basta decommentare questa riga
// imgs[k].parentNode.onclick=function(){return false}
per evitare che il link punti all' immagine ingrandita, se non altro quando lo script e' in grado di funzionare
mi sembra un compromesso accettabile

Ho notato che se l'immagine compare nella parte bassa e tocca il fondo pagina, si muove solo in orizzontale e resta bloccata in verticale. Mentre se l'immagine compare nella parte alta funziona bene.

e' voluto, che problema ti comporta?
lo script cerca di posizionare il tooltip in modo che venga mostrata la maggior parte possibile dell' immagine ingrandita

Per togliere il loading quali righe devo commentare?

mah... se proprio insisti, non vedo che male faccia favorire l' utente facendogli capire che restare col puntatore su di una miniatura carichera' la versione ingrandita...

commenta le seguenti righe

	pLoad=d.createElement('div');
	pTxt=d.createTextNode('...Loading...');
	pLoad.appendChild(pTxt);
	pDiv.appendChild(pLoad);
...
	pLoad.style.display='none';

e al posto di pLoad.style.display=pDiv.style.display='block';
lascia

pDiv.style.display='block';

buon proseguimento