Infos bulles persos

Soyez le premier à donner votre avis sur cette source.

Vue 22 935 fois - Téléchargée 1 186 fois

Description

Le titre en dit long....

J'utilise un filtre qui les rend transparente.
Je change le curseur de la souris.
Ma méthode est plutot simple, je charge une balise DIV en mémoire, l'info bulle en fait. Puis sur le survol d'une balise FONT, je la rend visible.

Le code n'est pas très contraignant à mettre en place, le seul truc, c que le name du FONT doit correspondre à l'ID du DIV...sinon monsieur dhtml il est pas content... :)

Source / Exemple :


<HTML>
<HEAD>
<SCRIPT>
	
	CreatElem('dereferencement', 0, "Définition C++ : pour accéder à la valeur d'un pointeur...");

	function CreatElem(Id, Longueur, Message) //Si Longueur==0 alors l'info bulle sera automatiquement dimension en fonction de la longeur du message ;)
	{
		var MonStyle = "STYLE='{filter:alpha(opacity=75); position: absolute; visibility: hidden; left: 0; top: 0; font-family: comic sans ms, arial; font-size: 11px; color: #162CAA;	border-width: 2; border-color: skyblue; border-style: dashed; padding: 3; background-color: #CCFAFF; width: "   
		MonStyle += (Longueur == 0)? "'}"  : Longueur + "'}";
		document.write("<DIV width='" + Longueur + "' ID='" + Id + "' " + MonStyle + ">" + Message + "</DIV>");
	}
</SCRIPT>
	<STYLE>
		.LiensAide {cursor: help; color:#2244AA; text-decoration: overline}
	</STYLE>

</HEAD>
<BODY> 

Je me demande ce que <FONT name="dereferencement" class="LiensAide" onMouseOver="RendElemVisible(this.name)" onMouseOut="RendElemInvisible(this.name)">déréférencement</FONT> peut bien vouloir dire ?

<SCRIPT LANGUAGE="JavaScript">
		

function RendElemVisible(Id)
{
	var Elem =  document.all[Id].style;
	Elem.left = event.clientX + 30;
	Elem.top = event.clientY + 5;
	Elem.visibility =  "visible";
}

function RendElemInvisible(Id) 
{
	document.all[Id].style.visibility =  "hidden";
}

</SCRIPT>
</BODY>
</HTML>

Conclusion :


J'ai pas regardé si yavait déjà des sources identiques :)

Bon coding à tous !

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
8
Date d'inscription
mercredi 18 avril 2007
Statut
Membre
Dernière intervention
8 février 2008

bien mais le problème d'incompatibilité avec Firefox me gène pas mal.
Messages postés
7
Date d'inscription
mercredi 21 février 2007
Statut
Membre
Dernière intervention
27 avril 2007

Bonjour à toi Greengold et aux autres visiteurs, je recherchais le moyens d'afficher dans un tableau des infos bulle et c'est ton script que j'ai choisi, l'effet final est sympat, assez facile à inserer dans une page et facilement personnalisable. Bref dès que je suis tombé dessus, je me suis aussitôt mis au taf.

Voici mon exemple d'utilisation, http://lpamgenieelectri.olympe-network.com/enseignements.html#calendrier_annuel


Merci, re-mercie et re-re-merci...
Messages postés
1
Date d'inscription
vendredi 4 février 2005
Statut
Membre
Dernière intervention
7 avril 2006

salut,
il est bien ton script, c'est dommage qu il ne soit pas compatible a firefox
Messages postés
3
Date d'inscription
mardi 22 janvier 2002
Statut
Membre
Dernière intervention
29 mars 2007

Bonjour,

Moi aussi je le trouve SU-PER ton script, jadore.

Le seul truc que je n'arrive pas à corriger c'est que quand je fais défiler ma page, l'infobulle n'apparait pas collée au curseur, car elle reste tout en haut donc cachée.

As-tu une suggestion ?
Merci
Messages postés
239
Date d'inscription
jeudi 21 juillet 2005
Statut
Membre
Dernière intervention
1 juillet 2007

ha oui ! c vraiment tres beau serieux ! franchement bravo jespere uqe jarriverai a incorporé ca dans mon php avec while pour ma galerie photo !
merci a toi ! c super ;) je me permet de le dire dans ce commentaire !!!

encore merci !! c trop cool !!! ta fais fort ! merci !!! encore !!! je suis trop content !
Afficher les 9 commentaires

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.