tooltip per ingrandire immagine, con fireofox va, con ie no

mjfan80

tooltip per ingrandire immagine, con fireofox va, con ie no

Salve a tutti
premetto: sono appena entrato nel mondo javascript

ho voluto crearmi uno script per il mio sito, in modo che, in tutte le immagini che avessero la proprietà title specificata (che io metterò solo a quelle immagini che ridimensioni nel documento html con widht e height), al passaggio dle mouse potesse crearsi un tooltip che facesse vedere le immagini con le dimensioni originali

in questo modo, nel io documento html, vorrei non inserire nessuno javascript a mano, ma semplicemente, per le immagini per cui voglio creare questo tooltip, le inserisco normalmente con il tag html <img> a cui do le proprietà width e height in modo da ridimensionare via html le immagini

questo è lo script:

 window.onload=enableTooltips;

function enableTooltips(){
    var div_contenuto=document.getElementById("contenuto");
    var immagini=div_contenuto.getElementsByTagName("img");
    if (immagini.lenght != 0){ //se ci sono immagini nel div contenitore
                
        for(i=0;i<immagini.length;i++){
            if(immagini*.getAttribute("title")){ //se l'immagine ha l'attributo title
                img_src= immagini*.getAttribute("src");
                immagini*.onmouseover = showTooltip;
                //immagini*.onmouseout = hideTooltip;
                
                //creo un div dove metterò dentro sia l'immagine sia il div tooltip
                var contenitore_tooltip = document.createElement("div");
                contenitore_tooltip.id = "div_contenitore_tooltip" + img_src;
                contenitore_tooltip.className = "div_contenitore_tooltip";
                contenitore_tooltip.style.position="relative";
                
                //creo il tooltip, vuoto per ora
                var tooltip = document.createElement("div");
                tooltip.id = "div_img_tooltip" + img_src;
                tooltip.className = "div_img_tooltip";
                //appendo il tooltip dentro il contenitore
                contenitore_tooltip.appendChild(tooltip);
                
                // sostituisco questo div contentore al posto di immagine
                immagine_vecchia = immagini*.parentNode.replaceChild(contenitore_tooltip,immagini*);
                
                //appendo l'immagine dentro il div contenitore
                contenitore_tooltip.appendChild(immagine_vecchia);
                
            }
        }
    }
}

function showTooltip(event){
    img_src = this.getAttribute("src");
    align = this.getAttribute("align");
    
    this.parentNode.getElementsByTagName("div")[0].style.visibility="visible";
    this.parentNode.getElementsByTagName("div")[0].style.zIndex="1000";
    this.parentNode.getElementsByTagName("div")[0].onmouseout = hideTooltip;
    
    if (align ==  "left" ){
        this.parentNode.getElementsByTagName("div")[0].innerHTML="<img src=\"" + img_src + "\" align=\"left\"/>";    
    }
    else if (align ==  "right" ){
        this.parentNode.getElementsByTagName("div")[0].innerHTML="<img src=\"" + img_src + "\" align=\"right\"/>";
    }
    else {
        this.parentNode.getElementsByTagName("div")[0].innerHTML="<img src=\"" + img_src + "\" align=\"left\"/>";    
    }
}

function hideTooltip(event){
    this.parentNode.getElementsByTagName("div")[0].style.visibility="hidden";
}

o script funziona, apparentemente, senza problemi con firefox, ma con ie no
provatelo qui http://www.mjj.it/upload/ajax/michael.php (PS solo le prime due immagini nel contenuto hanno l'attributo title)

come mai questa differenza?

claudioweb

Ciao

Explorer segnala un errore generico.

Ho provato a salvare la pagina e a testarla con quel solo script e la prima immagine e così funziona anche con Explorer.
Sarà qualche conflitto con altri script.

mjfan80

in effetti avevo alcuni script allegati che non mi servivano proprio
i ho tolti
ma non va comunque (tra l'altro a em IE pare non dare errori)
ma che incompatibilità può dare? e perchè non va solo con IE?

PS: ora non ci sono altri script nella pagina

claudioweb

Guarda so solo dirti che lasciando il div necessario e l'immagine e togliendo i css, funziona (seppur con un effetto sgradevole).

Prova partendo dal caso funzionante che ti ho ho detto ad aggiungere i vari pezzi e vedere cos'è che crea problema.

P.S. IE è originale in tutto

mjfan80

non ho capito molto cio che mi hai scritto
scusami
ho provato a togliere dal css la classe che coinvolgo (e ne ho eliminata una che non c'era nemmeno nel css)

ma con IE non funziona comunque

e lasciare il div necessario, intendevi lasciare il resto delo script invariato?

PS: leggo solo ora che i link attivi non sono obbligatori, scusatemi
PPS: vorrei modificare il codice di inizio post ma non posso più

claudioweb

@mjfan80 said:

non ho capito molto cio che mi hai scritto
Il senso era, togli tutto tutto tutto.
Lascia solo 1 foto, lo script e testa se funziona (a me funzionava).
Poi aggiungi man mano gli altri componenti della pagina (Script, css, div ecc)
fin quando non si presenta il problema.
@mjfan80 said:
PS: leggo solo ora che i link attivi non sono obbligatori, scusatemi
Sono obbligatori non attivi.
@mjfan80 said:
PPS: vorrei modificare il codice di inizio post ma non posso più
Che modifiche vuoi fare? Sta bene così per quanto riguarda il regolamento.
Eventualmente dimmelo in privato.