[Javascript] modification infobulle

Pages (2) : 1 2 Suivant »

Note de cette discussion :

Moyenne : 0 (0 vote(s))
1
2
3
4
5

Affichage hiérarchique | Affichage linéaire

[Javascript] modification infobulle

Auteur Message

phenix Hors ligne

Membre

Messages : 279
Inscription : May 2007
Réputation : 2

Message : #1

[Javascript] modification infobulle

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

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

Phenix, administrateur de streamanga
Visitez aussi mon MMORPG la vallée des larmes

(Ce message a été modifié le : 09-04-2008 12:22 PM par Sephi-Chan.)

09-03-2008 06:17 PM

Anthor Hors ligne

Membre

Messages : 520
Inscription : Dec 2007
Réputation : 15

Message : #2

RE: [javascript] modification infobulle

Il est ou le tooltip ?

Tu aurais un exemple complet pu tester ?

Anthor |

09-03-2008 07:02 PM

phenix Hors ligne

Membre

Messages : 279
Inscription : May 2007
Réputation : 2

Message : #3

RE: [javascript] modification infobulle

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

).

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

Phenix, administrateur de streamanga
Visitez aussi mon MMORPG la vallée des larmes

09-03-2008 07:07 PM

Shakkah Hors ligne

Membre

Messages : 83
Inscription : Mar 2008
Réputation : 1

Message : #4

RE: [javascript] modification infobulle

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 ?

09-03-2008 07:14 PM

Ruz

Membre

Messages : 182
Inscription : Apr 2008
Réputation : 1

Message : #5

RE: [javascript] modification infobulle

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

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

attendez, je cherche...

09-03-2008 07:17 PM

Shakkah Hors ligne

Membre

Messages : 83
Inscription : Mar 2008
Réputation : 1

Message : #6

RE: [javascript] modification infobulle

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.

09-03-2008 07:20 PM

Anthor Hors ligne

Membre

Messages : 520
Inscription : Dec 2007
Réputation : 15

Message : #7

RE: [javascript] modification infobulle

Je vois.

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

Fichier(s) joint(s)
.htm

tooltip.htm (Taille : 4.18 Ko / Téléchargements : 4)

Anthor |

09-03-2008 07:21 PM

Anthor Hors ligne

Membre

Messages : 520
Inscription : Dec 2007
Réputation : 15

Message : #8

RE: [javascript] modification infobulle

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

Fichier(s) joint(s)
.htm

tooltip_click.htm (Taille : 4.15 Ko / Téléchargements : 11)

Anthor |

09-03-2008 07:30 PM

phenix Hors ligne

Membre

Messages : 279
Inscription : May 2007
Réputation : 2

Message : #9

RE: [javascript] modification infobulle

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

Fichier(s) joint(s)
.htm

tooltip_click.htm (Taille : 3.43 Ko / Téléchargements : 4)

Phenix, administrateur de streamanga
Visitez aussi mon MMORPG la vallée des larmes

(Ce message a été modifié le : 09-03-2008 08:07 PM par phenix.)

09-03-2008 07:46 PM

Anthor Hors ligne

Membre

Messages : 520
Inscription : Dec 2007
Réputation : 15

Message : #10

RE: [javascript] modification infobulle

Avec "defreeze"

Fichier(s) joint(s)
.htm

tooltip_click2.htm (Taille : 4.32 Ko / Téléchargements : 5)

Anthor |

09-03-2008 08:39 PM

« Discussion précédente | Discussion suivante »

Pages (2) : 1 2 Suivant »