[javascript] mini pop up

01-06-2009, 15.29.06

salve

ho questo codice per creare dei piccoli popup sui link al passaggio del mouse.

Codice HTML:

<html>
<head>
<script type="text/javascript">
function apri(text,colore){
var obj=document.createElement("div");
obj.style.border="1px solid #FF0000";
obj.style.backgroundColor= colore;
obj.style.left="12px";
obj.style.top="13px";

var elemento=document.createElement("strong");
var scrivi=document.createTextNode(text);

elemento.appendChild(scrivi);
 }</script>
</head>
<body>
<a OnMouseOver="apri('bla bla','#000000')" href="pagina.htm">qui</a>
</body>
</html>

ma non visualizza niente

qualcuno sa la soluzione?
grazie mille

01-06-2009, 18.00.09

QUESTO non va bene?

01-06-2009, 18.53.44

grazie per la risposta
comunque ne ho trovati altri ma usano anche del css,
invece io (apparte che vorrei capire cosa non va in questo codice)
volevo fare tutto in javascript per fare una cosa più pulita

solo che non si apre mai

**dementialsite** · 02-06-2009, 09.46.49

Il tuo problema si riassume così: crei l'elemento per ospitare il "tooltip" (meglio chiamarlo così, il "popup" è un'altra cosa), ma non specifichi in quale punto del codice inserirlo. Non solo: la tua funzione crea tre nodi (un DIV, uno STRONG e un nodo di testo), ma solo gli ultimi due vengono collegati e, comunque, resteranno scollegati dagli altri elementi della pagina.

Dovresti risolvere (in parte) aggiungendo un parametro e un paio di righe al codice della funzione:

Codice:

function apri(link,text,colore){
var obj=document.createElement("div");
obj.style.border="1px solid #FF0000";
obj.style.backgroundColor= colore;
obj.style.left="12px";
obj.style.top="13px";

var elemento=document.createElement("strong");
var scrivi=document.createTextNode(text);

elemento.appendChild(scrivi);
obj.appendChild(elemento);
link.parentNode.insertBefore (obj, link);
 }

Naturalmente, dovrai modificare anche il link:

Codice HTML:

<a onmouseover="apri(this,'bla bla','#000000')" href="pagina.htm">qui</a>

Stammi bene...

02-06-2009, 13.17.57

grazie mille è perfetto :D
solo che ora la cosa buffa è che non riesco a chiuderlo

ho provato così

Codice HTML:

function chiudi(text2){
var newtext=document.getElementById(text2);
newtext.style.display="none";}

e nel link ho messo

Codice HTML:

<a onmouseover="apri(this,'bla bla','#000000')" onmouseout="chiudi('bla bla')" href="pagina.htm">qui</a>

ma non va :s
grazie in anticipo

**dementialsite** · 02-06-2009, 22.25.40

Devi fare altre due cosette:
- quando crei il nodo, devi settare anche un suo ID, così:

Codice:

obj.setAttribute ('id', 'mio_popup');

- puoi tenere la funzione chiudi() così com'è, ma devi passare come parametro l'ID che hai impostato e non il testo contenuto nel DIV...

Stammi bene...

02-06-2009, 23.48.57

ho provato a fare così

Codice HTML:

<script>
function position(elemento){
var posx = 0;    
var posy = 0;   
 if(elemento.offsetParent){
do{
 posx += elemento.offsetLeft;
  posy += elemento.offsetTop;
     if(!elemento.offsetParent){break;}}
            while(elemento = elemento.offsetParent)    }else if(elemento.x){
     posx += elemento.x;  
        posy += elemento.y;    }
  posy = posy+15;   
 posx = posx+35;  
  if(posx > 1000){posx = posx-110; }return{x:posx,y:posy};}


function apri(link,text,colore){
var pos=position(link);
var obj=document.createElement("div");
obj.style.border="1px solid #FF0000";
obj.style.backgroundColor= colore;
obj.style.color="#FFFF00";
obj.style.left= pos.x+"px";
obj.style.top= pos.y+"px";
obj.style.display="block";
obj.style.position="absolute";

var elemento=document.createElement("strong");
var scrivi=document.createTextNode(text);

elemento.appendChild(scrivi);
obj.appendChild(elemento);
obj.setAttribute("id",text);
link.parentNode.insertBefore (obj, link); 
 }
function chiudi(text2){
var st=document.getElementById("nickname");
st.style.display="none";}
</script>

<a id="nickname" onmouseover="apri(this,'nickname','#000000')" onmouseout="chiudi('nickname')" href="pagina.htm">nickname</a>

al primo passaggio del mouse funziona,
una volta che ci ripassi resta sempre aperto

grazie in anticipo

**dementialsite** · 03-06-2009, 09.20.09

Non so se risolverà il tuo problema, ma dovresti specificare come ID per il DIV un valore diverso da quello del link...

Altra cosa: nella funzione chiudi() tu nascondi il DIV, mentre in apri() lo crei. Dato che le due cose non sono l'una l'inverso dell'altra (con la funzione chiudi() il DIV continua ad esistere), sarebbe meglio se lo distruggessi, così:

Codice:

st.parentNode.removeChild (st);

Stammi bene...

03-06-2009, 12.33.51

grazie mille è perfetto :D

Discussione: [javascript] mini pop up

LinkBack

Strumenti discussione

Display

[javascript] mini pop up

Regole di scrittura