[JS] Fumetto su link con titolo personalizzato

Ciao a tutti, date le mie basse capacità di JavaScript vorrei creare questa cosa:
http://i48.tinypic.com/29c9ois.jpg
...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>

Codice PHP:

---

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! ^^"

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!

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??

Codice PHP:

---

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


---

Grazie mille....

Perchè non ti leggi una guida per il DOM?

Codice PHP:

---

var testo = document.getElementById(

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


---

Io ho fatto questo:

Codice PHP:

---

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

Codice PHP:

---

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! ^^"

Codice PHP:

---

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

Codice PHP:

---

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


---

Ma i tag li interpreta come testo!! =(

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

Codice PHP:

---

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

Codice PHP:

---

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! **

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

Codice PHP:

---

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:

Codice:

---

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

---

Ovviamente poi aggiungi tutte le proprietà che vuoi.

Saluti!