JeuWeb - Crée ton jeu par navigateur
[Javascript] modification infobulle - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [Javascript] modification infobulle (/showthread.php?tid=3003)

Pages : 1 2


[Javascript] modification infobulle - phenix - 03-09-2008

Bonjour à tous,

Voila un script que j'ai repêché sur un autre site, je voudrais le modifier mais étant un bulle en JS j'ai un peu de mal.
Je voudrais que:

- Lorsque l'on passe la souris sur un élément (OnMousOver) l'info-bulle apparaisse puis disparaisse quand on quitte élément. (Sa sa marche :goodSmile
- Lorsque l'on clique (OnClick) l'infobulle ce fixe pour que l'on puisse cliquer sur des liens dans l'infobulle.

J'ai essayer dans l'état actuel des choses, mais j'arrive à rien. Si on utiliser onclick:

1) l'info bulle ne ce "fige" pas.
2) il faut cliquer puis bouger la souris sinon elle apparaît pas.

Voila le script, si quelqu'un sais comment le modifier sa peut servir à pas mal de monde:

Code :
var ini = 0
var offsetx = 8
var offsety = 12
var ie  = document.all
var ns6 = document.getElementById && !document.all
var enabletip = false
var contentObj, contentTxt

function ce(x) {
    return document.createElement(x);
}

function InitTip()
{
    var d = ce("div"), t=ce("table"), tb=ce("tbody"), tr1=ce("tr"), tr2=ce("tr"), td=ce("td"), th1=ce("th"), th2=ce("th"), th3=ce("th");

    d.className="wttip";
    d.style.visibility = "hidden"
    d.style.position = "absolute"
    d.style.zIndex = 9999;

    t.cellSpacing=0;
    t.cellPadding=0;
    th1.style.backgroundPosition="top right";
    th2.style.backgroundPosition="bottom left";
    th3.style.backgroundPosition="bottom right";

    tr1.appendChild(td);
    tr1.appendChild(th1);
    tb.appendChild(tr1);
    tr2.appendChild(th2);
    tr2.appendChild(th3);
    tb.appendChild(tr2);
    t.appendChild(tb);
    d.appendChild(t);
    document.body.appendChild(d);

    contentObj = d
    contentTxt = td
    ini = 1
}

function ietruebody()
{
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function positiontip(e)
{
    if (enabletip) {
        var curX = (ns6) ? e.pageX : event.x + ietruebody().scrollLeft;
        var curY = (ns6) ? e.pageY : event.y + ietruebody().scrollTop;

        var distX = ie && !window.opera ? ietruebody().clientWidth  - event.clientX-offsetx : window.innerWidth  - e.clientX-offsetx-20
        var distY = ie && !window.opera ? ietruebody().clientHeight - event.clientY-offsety : window.innerHeight - e.clientY-offsety-20

        if (distX < contentObj.offsetWidth) {
            if (curX+offsetx-contentObj.offsetWidth < 0)
              contentObj.style.left = "0px"
            else
              contentObj.style.left = curX-10-contentObj.offsetWidth+"px"
        } else {
            contentObj.style.left = curX+offsetx+"px"
        }

        if (distY < contentObj.offsetHeight) {
            if (curY > contentObj.offsetHeight)
              contentObj.style.top = curY-10-contentObj.offsetHeight+"px"
            else
              contentObj.style.top = curY+offsety+distY-contentObj.offsetHeight+"px"
        } else {
            contentObj.style.top = curY+offsety+"px"
        }

    }
}

function ShowTip(msg, larg)
{
    if (!ini) InitTip()
    if (!larg) larg=250

    contentTxt.innerHTML=msg
    contentTxt.style.width=larg+"px"
    enabletip=true
    contentObj.style.visibility="visible"
    return false
}

function nd()
{
    enabletip = false
    contentObj.style.visibility = "hidden"
    contentObj.style.left = "-1000px"
}

if (!ini) {
    document.onmousemove=positiontip
}

Voici le site de provenance: http://www.lootup.com/index.php?title=Accueil

Merci d'avance à tous,

Phenix


RE: [javascript] modification infobulle - Anthor - 03-09-2008

Il est ou le tooltip ?

Tu aurais un exemple complet pu tester ?


RE: [javascript] modification infobulle - phenix - 03-09-2008

Citation :Il est ou le tooltip ?

Bha c'est la fonction showtip, si c'est sa que tu me demande.

Citation :Tu aurais un exemple complet pu tester ?

Bha si tu vas sur http://www.lootup.com/index.php?title=Accueil tu pourras la voir en action (passe la souris sur les icône de WoW Wink ).

Maintenant je trouve pas comment modifier pour faire ce que je veux :heuuu:


RE: [javascript] modification infobulle - Shakkah - 03-09-2008

Tu appel quel méthode lors du clic ?

Sur le site que tu as donné , à quel endroit tu a vu une popup se fixait au clic ?


RE: [javascript] modification infobulle - Ruz - 03-09-2008

Perso, j'utilise la librairie "OverLib", qui fonctionne à merveille pour ce que tu cherches...

http://www.bosrup.com/web/overlib/


RE: [javascript] modification infobulle - Shakkah - 03-09-2008

Ruz a écrit :Perso, j'utilise la librairie "OverLib", qui fonctionne à merveille pour ce que tu cherches...

http://www.bosrup.com/web/overlib/
J'utilise aussi overlib mais je pense pas qu'ele gére le freeze lors du clic.


RE: [javascript] modification infobulle - Anthor - 03-09-2008

Je vois.

Je parlais plus d'une page comme la pièce jointe. Que chacun puisse tester facilement.


RE: [javascript] modification infobulle - Anthor - 03-09-2008

En prime t'as même le droit à un essai de modification !


RE: [javascript] modification infobulle - phenix - 03-09-2008

Citation :Perso, j'utilise la librairie "OverLib", qui fonctionne à merveille pour ce que tu cherches...

C'est ce que j'utilise actuellement, mais elle a de gros défaut:

- La dernière version ne modifie plus la position pour quelle soit toujours sur l'écran.
- C'est lourd lourd lourd...

Citation :J'utilise aussi overlib mais je pense pas qu'ele gére le freeze lors du clic.

Si, avec le parametre stiky je crois, ou un truc du genre.

Citation :Je parlais plus d'une page comme la pièce jointe. Que chacun puisse tester facilement.

Ha pardon, j'avais pas comprit.

Ta modification me plaît bien, mais il reste 1 soucis (Dont 1 que j'avais pas mentionner, sorry)

- Si tu clique ailleurs sur la page elle ce "défreeze" pas... m'enfin c'est accessoire...

[EDIT]: Une idée peut être serait de crée une fonction qui efface la bulle j'ai essaye d'inverser ta fonction BlockTip() mais je suis pas doué sa a rien donnée...

[EDIT2] Finalement j'ai réussit, j'up un nouveau fichier


RE: [javascript] modification infobulle - Anthor - 03-09-2008

Avec "defreeze"