[js] apertura finestra dialogo al passaggio del mouse

Printable View

27-08-2006, 12.01.31
NoWhere

[js] apertura finestra dialogo al passaggio del mouse

qualcuno sa dirmi che scirpt o file.js utilizzare per far si che al passaggio del mouse sopra un link si apra una finestra di dialogo a mò di box??

e anche che script o file.js utilizzare per far si che si apra una finestra in rilievo nella pagina al click del mouse??

per entrambi gli esempi tentati di descrivere sopra, vi riporto a questo sito:
http://www.planetfrag.it/ogame/

esempio 1) passate il mouse sopra >>?<<
esempio 2) cliccate nell'img [^] - ve ne sono solo 2

io ho provato a vedere il file.js, ma non scrivo in js quindi a poco mi é servito..
ho provato anche a tentare di capire il codice della pagina, ma dopo qualche tentativo spartano a me non funziona -_-'
Se qualcuno può aiutarmi...
27-08-2006, 12.22.43

Per il primo ho trovato questo su google:
http://www.walterzorn.com/tooltip/to...e.htm#download (è lo stesso utilizzato in quel sito)

Per il secondo, utilizza un semplicissimo file.js contenente:

Codice HTML:

function WindowOpen(id2) { document.getElementById(id2).style.visibility = "visible"; } function closeMessage(id2) { document.getElementById(id2).style.visibility = "hidden"; }

E nella pagina ha (preso dal sito linkato)

Codice HTML:

<div id="forum" style="padding: 5px; visibility: hidden; position: absolute; width: 273px; height: 103px; top: 190px; left: 230px; overflow: auto; background-color: rgb(17, 17, 17);"> <table width="100%" border="0" cellpadding="4" cellspacing="1" align="center" class="forumline"> <tr> <td colspan="2" class="row3"><b><span class="gensmall">Specifica la TAG supportata dal forum.<br /> - <span class="yell">Ogame Forum</span> » [CENTER] <br /> - <span class="yell"> PhpBB Plus / PhpBB + Mod</span> » [align=center]</span></b></td> </tr> <tr> <td class="row2"> <select name="center_type"> <option value="a">Ogame Forum</option> <option value="b">PhpBB Plus / PhpBB + Mod</option> </select> </td> </tr> <tr> <td align="center" colspan="2"><input type="button" value="Chiudi" onclick="closeMessage('forum');" class="mainoption"/></td> </tr> </table> </div> <a href="#" onclick="WindowOpen('forum');"> <img src="urlimg.ext" alt="" border="0"/></a>

Quindi spiegando, il js copialo ed incollalo mentre per l'html fai così:
crei un div assegnandogli visibilità hidden e dandogli un id, all'interno metti ciò che vuoi esca quando si clicca sulla parola/immagine che metterai come link (proprio come nel sito avviene clikkando sulle immagini), poi nel link metti che al click WindowOpen('idassegnatoaldiv');...
in pratica

Codice HTML:

//crei il div assegnandogli visibilità hidden e dandogli un id (in questo caso ho dato nomechevuoi <div id="nomechevuoi" style="visibility: hidden;"> //ciò che apparirà clikkando dovrà stare in questo div Funziona!! </div> //crei il link per rendere visibile la parte che per ora è nascosta (il div) <a href="#" onclick="WindowOpen('nomechevuoi');">Clikka</a>

Spero di essere stato chiaro
27-08-2006, 12.22.55

La proprietà di <a href> necessaria per fare qualcosa al passaggio del mouse è onMouseOver, e va usata così

Codice HTML:

<a href="#" onMouseOver="alert('Hai messo il mouse sul testo.');">Testo</a>

Intento puoi provare a lavorare su questo, se non sbaglio su HTML.it c'era una guida per creare finestrelle come quelle, che si chiamanl tooltip box.
27-08-2006, 12.55.08
NoWhere

grazie!!
ora testo e vedo se funonzia anche ammmè!! ^__^

edit: testato, funziona alla grande!!
unica nota: bisogna ricordarsi si non omettere fra i tag <head></head> il richiamo al file.js

Codice:

<script language="JavaScript" type="text/javascript" src="file.js"></script>