[JS] Fumetto su link con titolo personalizzato

Ciao a tutti, date le mie basse capacità di JavaScript vorrei creare questa cosa:

...vorrei però solo la descrizione. Sto provando, ma appena ci passo con il mouse e come se mi si aprisse una nuova pagina, non va visualizzato nel template. Mi spunta una pagina bianca con il testo preso da testo. Il file è incluso con il tag <script>

    function chiudi() {
        return '<div class="testo" style="display:none;">'+testo+'</div>';
    }
    
    function apri(testo) {
        return '<div class="testo" style="display:inline;">'+testo+'</div>';
    } 

Grazie mille, Ciao Davide! ^^"

[mycarlo]

Perchè usi return? E comunque è sbagliato il metodo.
Si puo fare anche senza javascript vedi qui:
http://blogs.microsoft.co.il/blogs/j...l-and-css.aspx
http://css.html.it/articoli/leggi/24...tip-con-i-css/

Saluti!

[sevenjeak]

Anche io ero interessato a creare un tooltip in javascript per migliorare il mio sito, e facendo una ricerca su internet ho trovato questo:

http://javascript.html.it/articoli/l...bble-tooltips/

La forma non è proprio quella che mostri nel tuo esempio, ma credo che si possa cambiare

Allora io avevo pensato una cosa...creare un div che appare con javascript quando si passa solo se a ha il title.
Esempio:
<a href="http://www.altervista.org">AlterVista</a> ---> Non si attiva in rollover
<a href="http://www.altrosito.com" title="Beh, mostrare nel fumetto che....">AltroSito.com</a> ---> Si attiva il rollover e quindi viene mostrato il fumetto (il div).
Ora, da css dovrei creare il div che appare da javascript.
E da javascript devo prelevare il testo del title....ma la mia domanda è questa:
- Come faccio a prelevare il testo dal title??

var testo = document.getElementsByTagName("title"); 

Grazie mille....

[mycarlo]

Perchè non ti leggi una guida per il DOM?

var testo = document.getElementById(

alert(testo.getAttribute("title"));
// ma anche
alert(testo.title); 

Io ho fatto questo:

function tooltip() {
    var tags = document.getElementsByTagName("a");
    for(var i = 0; i <= tags.length - 1; i++) {
        var testo = tags[i].getAttribute("title");
        if(!(testo == "" || testo == null)) {
            tags[i].removeAttribute("title");
            tags[i].style.position = "relative";
            var tooltip = document.createElement("div");
            tooltip.className = "tooltip";
            tooltip.appendChild(document.createTextNode(testo));
            tags[i].appendChild(tooltip);
            tags[i].onmouseover = function() {
                this.style.zIndex = "25";
                this.getElementsByTagName("div")[0].style.display = "block";
            }
            tags[i].onmouseout = function() {
                this.style.zIndex = "24";
                this.getElementsByTagName("div")[0].style.display = "none";
            }
        }
    }
}

window.onload = tooltip; 

Vedi se puo esserti utile... Crea un tooltip per ogni tag "a"

P.S. Devi definire .tooltip nei css...

Saluti!

Ho provato il tuo JS però ha qualche problemino...
- Viene mostrato subito appena si entra nella pagina senza passare dal rollover
- Non reagisce al css inserito nel javascript

    function tooltip() {
    var tags = document.getElementsByTagName("a");
    for(var i = 0; i <= tags.length - 1; i++) {
        var testo = tags[i].getAttribute("title");
        if(!(testo == "" || testo == null)) {
            tags[i].removeAttribute("title");
            tags[i].style.position = "relative";
            var tooltip = document.createElement("div");
            tooltip.className = "tooltip";
            tooltip.appendChild(document.createTextNode(testo));
            tags[i].appendChild(tooltip);
            document.getElementsByClassName("tooltip").display = "none";
            tags[i].onmouseover = function() {
                //this.style.zIndex = "30";
                this.getElementsByTagName("div")[0].style.display = "block";
                
                this.getElementsByTagName("div")[0].style.top = ((this.getElementsByTagName("div")[0].clientX+document.documentElement.scrollLeft)+30)+"px";
                this.getElementsByTagName("div")[0].style.left = ((this.getElementsByTagName("div")[0].clientY+document.documentElement.scrollTop)-90)+"px";    
            }
            tags[i].onmouseout = function() {
                //this.style.zIndex = "24";
                this.getElementsByTagName("div")[0].style.display = "none";
            }
        }
    }
}

window.onload = tooltip; 

Grazie mille! ^^"

[mycarlo]

    function tooltip() {
    var tags = document.getElementsByTagName("a");
    for(var i = 0; i <= tags.length - 1; i++) {
        var testo = tags[i].getAttribute("title");
        if(!(testo == "" || testo == null)) {
            tags[i].removeAttribute("title");
            tags[i].style.position = "relative";
            var tooltip = document.createElement("div");
            tooltip.className = "tooltip";
            tooltip.style.display = "none"; // e dovrebbe essere ok
            tooltip.appendChild(document.createTextNode(testo));
            tags[i].appendChild(tooltip);
            tags[i].onmouseover = function() {
                //this.style.zIndex = "30";
                this.getElementsByTagName("div")[0].style.display = "block";
                
                this.getElementsByTagName("div")[0].style.top = ((this.getElementsByTagName("div")[0].clientX+document.documentElement.scrollLeft)+30)+"px";
                this.getElementsByTagName("div")[0].style.left = ((this.getElementsByTagName("div")[0].clientY+document.documentElement.scrollTop)-90)+"px";    
            }
            tags[i].onmouseout = function() {
                //this.style.zIndex = "24";
                this.getElementsByTagName("div")[0].style.display = "none";
            }
        }
    }
} 

Per non visualizzarli al caricamento della pagina. Non reagisce perchè a quanto io sappia la proprieta clientX è attribuita soltanto all'evento (vedi event) e serve per ottenere le coordinate del mouse...

Saluti!

... non mostra niente! =( Poi è possibile aggiungere un <i> con un determinato testo?
Ho provato con

            tooltip.appendChild(document.createTextNode("<i>29/11/2009</i>")); 

Ma i tag li interpreta come testo!! =(

[mycarlo]

Ma ovvio che non vedi niente, stai cercando di utilizzare una proprietà inesistente (riferito a div.clientX e div.clientY)

tooltip.innerHTML = "<i>29/11/2009</i>"; 

Saluti!

Ok...ma non reagisce alla posizione del div (top, left, ecc)
Rimane sempre fermo a sinistra della pagina!
Io invece lo vorrei sopra il link, in alto a destra...

    function tooltip() {
    var tags = document.getElementsByTagName("a");
    
    for(var i = 0; i <= tags.length - 1; i++) {
        var testo = tags[i].getAttribute("title");
        if(!(testo == "" || testo == null)) {
            tags[i].removeAttribute("title");
            tags[i].style.position = "relative";
            var tooltip = document.createElement("div");
            tooltip.id = "testo";
            tooltip.style.display = "none"; // e dovrebbe essere ok
            tooltip.appendChild(document.createTextNode(testo));
                var data = "22/12/2009";
            tooltip.innerHTML = "<i>"+data+"</i>";  
            tags[i].appendChild(tooltip);
            tags[i].onmouseover = function() {
                this.style.zIndex = "50";
                this.getElementsByTagName("div")[0].style.display = "block";
                
                /* posizione div */
                    /*
                    var sx = this.clientX+document.documentElement.scrollLeft;
                    var sy = this.clientY+document.documentElement.scrollTop;           
                    this.style.top = (sx+1000)+"px";
                    this.style.left = (sy-20)+"px"; 
                    */                
            }
            tags[i].onmouseout = function() {
                //this.style.zIndex = "24";
                this.getElementsByTagName("div")[0].style.display = "none";
            }
        }
    }
}  
window.onload = tooltip; 

Grazie mille! **

[mycarlo]

Allora, per primo modifica il javascript (ho fatto una piccolissima modifica )

function tooltip() {
    var tags = document.getElementsByTagName("a");
    for(var i = 0; i <= tags.length - 1; i++) {
        var testo = tags[i].getAttribute("title");
        if(!(testo == "" || testo == null)) {
            tags[i].removeAttribute("title");
            tags[i].style.position = "absolute";
            var tooltip = document.createElement("div");
            tooltip.className = "tooltip";
            tooltip.style.display = "none";
            tooltip.innerHTML = testo;
            tags[i].appendChild(tooltip);
            tags[i].onmouseover = function() {
                this.style.zIndex = "50";
                this.getElementsByTagName("div")[0].style.display = "block";
            }
            tags[i].onmouseout = function() {
                // this.style.zIndex = "24";
                this.getElementsByTagName("div")[0].style.display = "none";
            }
        }
    }
}

window.onload = tooltip; 

Per secondo definisci una classe tooltip nei css:

.tooltip {
    position: relative;
    left: 40px; // provaci un pò
    top: 20px; // ""
}

Ovviamente poi aggiungi tutte le proprietà che vuoi.

Saluti!