Ciao a tutti.
In questo sito http://tinyurl.com/ydcp47u passando col mouse sulle icone "?" nella lista, si apre una nuvoletta che fa apparire delle informazioni.
Vorrei fare la stessa cosa in qualche immagine del mio sito ma non so come fare.
Ho visto la sorgente della pagina e copiato il codice ma non funziona
Mi aiutate?
Løque
Potresti provare a leggere questa guida:
http://jqueryfordesigners.com/coda-popup-bubbles/
Il tooltip che viene creato si avvicina a quello nel sito linkato da te, se è possibile puoi anche modificarlo
Preferivo una cosa molto più semplice. :master:
grazie comunque.. qualche altro consiglio?
Løque
Ciao Løque, mi sono appena registrato ed è la prima volta che intervengo in un forum, mi farebbe piacere aiutarti.
di seguito un esempio di script che ti potrebbe aiutare:
Non ho inserito la grafica del fumetto ma si può costruire con delle gif.
Per poter gestire molte info puoi creare un array con i testi e passare l'indice
nella function fumetto in modi da visualizzare il testo relativo.
Saluti.
<html>
<head>
<script>
window.onload=function(){ divj=document.getElementById('idfumetto'); esiste=0; }
document.onmousemove=posiz_mouse;
function posiz_mouse(e){ if(!e) e=window.event;
x=parseInt( (e.pageX)?e.pageX:e.clientX );
y=parseInt( (e.pageY)?e.pageY:e.clientY );
divj.style.left=(x+10)+"px";
divj.style.top=(y-20)+"px";
}
function fumetto(e,s){ if(!e) e=window.event;
if(!s) { esiste=0; divj.style.visibility='hidden'; return; }
divj.innerHTML="Grafica fumetto";
divj.style.visibility='visible';
esiste=1;
}
</script>
</head>
<body>
[img]info.gif[/img]
<div id="idfumetto" style='position:absolute;visibility:visible;'></div>
</body>
</html>
Grazie, funziona, ma non so come metterci il fumetto >.<
Løque
Ok!
Ho modificato lo script aggiungendo la funzione disegna ed un css per il testo.
le gif le ho prese ritagliando un printscreen dal link di esempio e sono:
fum_su.gif (276x7 pixel)
fum_centro.gif (276x1 pixel)
fum_giu.gif (276x26 pixel)
<html>
<head>
<style>
.testo { margin:0 6px 0 6px;
text-align:justify;
font: 11px Arial;
color:#444; }
</style>
<script>
var esiste=0;
var hhh,divj;
window.onload=function(){ divj=document.getElementById('idfumetto'); }
document.onmousemove=posiz_mouse;
function posiz_mouse(e){ if(!e) e=window.event;
x=parseInt( (e.pageX)?e.pageX:e.clientX );
y=parseInt( (e.pageY)?e.pageY:e.clientY );
divj.style.left=(x-15)+"px";
divj.style.top=(y-hhh)+"px";
}
function fumetto(e,s){ if(!e) e=window.event;
if(!s) { esiste=0; divj.style.visibility='hidden'; return; }
divj.innerHTML=disegna("Testo da inserire nel fumetto. se ci sono degli a capi il codice va modificato.");
hhh=4+parseInt(divj.scrollHeight);
divj.style.visibility='visible';
esiste=1;
}
function disegna(testo){
var fum="<div style='width:276px;'>[img]fum_su.gif[/img]<div style='background:url(fum_centro.gif) repeat-y;'><div class='testo'>"+
testo+"</div></div>[img]fum_giu.gif[/img]"
return fum;
} //
</script>
</head>
<body>
[img]info.gif[/img]
<div id="idfumetto" style='position:absolute;visibility:visible;'></div>
</body>
</html>
Puoi hostare le immagini su imageshack così le prendo anche io?
grazie mille per aver speso del tempo per aiutarmi
Løque
Magari sono bravino a creare uno script ma sono sicuramente scarso ad allegare dei file in un forum!
ho usato lo sfoglia nell'editor ma penso di poter inserire solo una gif???
c'è solo un'immagine si vede
cmq hai un messaggio privato http://forum.html.it/forum/private.php?s=
Løque
Permessi di invio
Rispondi quotando
