1. Accueil
  2. Javascript
  3. Sources Javascript
  4. Sources Effets
  5. Un tool tip (bulle d'aide) compatible ie et mozilla, modifiant son opacité pour apparaître ou disparaître.

Un tool tip (bulle d'aide) compatible ie et mozilla, modifiant son opacité pour apparaître ou disparaître.

5/5 (37 avis)

Vue 12 529 fois - Téléchargée 1 662 fois

Télécharger le projet
Commenter

Description

Il s'agit, en fait de fonctions permettant de positionner un élément, de changer son texte et de modifier son opacité

C'est à dire que n'importe quel élément peut devenir un ToolTip, il suffit juste qu'il porte l'id "DIV_ToolTip". ( à créer en dernier pour qu'il soit au premier plan !! )

Ensuite, pour ajouter un élément sur lequel le ToolTip doit agir, il suffit de faire appel à la méthode "Add" de l'objet "toolTipGest" :
toolTipGest.Add( "id de l'élément", "Message à afficher dans le toolTip de l'élément" );

Voilà, et vous pouvais, bien sûr, en mettre autant que vous le voulais !!
Amusez-vous bien !!
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire Commentaires
LUDINSKI
Messages postés
441
Date d'inscription
mardi 2 décembre 2003
Statut
Membre
Dernière intervention
22 mai 2012
 7
23 nov. 2008 à 12:02
Salut,

Bon, ben j'suis ravi que tu ais résolu ton problème... De mon côté je n'est pas réussi à reproduire le phénomène... m'enfin, l'important est que tu ais réussi à l'intégrer.

Bonne continuation !!
BOSSANT
Messages postés
5
Date d'inscription
mercredi 9 avril 2003
Statut
Membre
Dernière intervention
21 novembre 2008
21 nov. 2008 à 23:42
J'ai trouvé l'erreur.
La structure de ma page était du style :













J'ai du la modifier donc comme ça.
BOSSANT
Messages postés
5
Date d'inscription
mercredi 9 avril 2003
Statut
Membre
Dernière intervention
21 novembre 2008
20 nov. 2008 à 23:09
re salut,

J'ai identifié le dysfonctionnement. L'outil fonctionne bien dans une page aspx standard. Erreur de copier/Coller de ma part désolé. Mon précédent commentaire est donc faux.

Donc je reprends. J'ai réussi à le faire fonctionner dans une page ASPX standard. ça marche même TRES bien.

PAR CONTRE, le meme code remis dans une page fille de ma page Master et ça ne fonctionne plus.
Je pense que ton outils ne fonctionne pas .

J'ai placé le la déclaration du fichier jsp et la classe de style dans la page master.
Tout le reste est dans le le block asp:Content de la page fille.

A mon avis, il ne trouve pas l'id de l'image.

N'as tu pas déjà eu le pb?

Merci pour ton aide.
BOSSANT
Messages postés
5
Date d'inscription
mercredi 9 avril 2003
Statut
Membre
Dernière intervention
21 novembre 2008
20 nov. 2008 à 22:39
L'image s'affiche sans aucun message d'erreur. Mais en fait, je commence à me demander si le pb vient de ton outil. Pour identifier le pb j'ai voulu faire un cas simple sans image dans le tooltip. rien à faire... J'ai utilisé une page simple (sans la raccrocher à la page master)... non plus
Le code que j'avais mis est le suivant :
<%@ Page Language= "VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Page sans titre</title>
<script type="text/javascript" src="jsp/ToolTip.js"></script>
</head>

<form id="form1" runat="server">


<script type="text/javascript">
toolTipGest.Add( "Pht", "<CENTER>Mettez le curseur sur un des élément
pour afficher son ToolTip !!</CENTER>" );
</script>

</form>

</html>

Après exécution, j'obtiens :

<html xmlns ="http://www.w3.org/1999/xhtml">
<head><title>
Page sans titre
</title>
<script type="text/javascript" src="jsp/ToolTip.js"></script>
</head>

<form name="form1" method="post" action="Default2.aspx" id="form1">








<script type="text/javascript">
toolTipGest.Add( "Pht", "<CENTER>Mettez le curseur sur un des élément
pour afficher son ToolTip !!</CENTER>" );
</script>

</form>

</html>
LUDINSKI
Messages postés
441
Date d'inscription
mardi 2 décembre 2003
Statut
Membre
Dernière intervention
22 mai 2012
 7
20 nov. 2008 à 20:24
Salut

hawks_ttf :

Pour enlever le fondu, il te suffit de modifier les fonctions ShowToolTip() et HideToolTip() :

function ShowToolTip()
{
if( GetElement( "BORD_ToolTip" ).style.display = = "none" )
GetElement( "BORD_ToolTip" ).style.display = "inline";
}

function HideToolTip()
{
GetElement( "BORD_ToolTip" ).style.display = "none";
}

BOSSANT :

J'ai essayé de mettre une image issue d'un fichier dans le toolTip est ça fonctionne très bien :

toolTipGest.Add( "img2", " " );

Donc, première question : Est-ce que ton image d'id ="Pht" s'affiche correctement ?

Deuxième question : obtiens-tu une erreur javascript sur ta page ?
Afficher les 37 commentaires
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (LUDINSKI)