• User

    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?


  • Super User

    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.
    :ciauz:


  • User

    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


  • Super User

    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 😄


  • User

    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ù


  • Super User

    @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.