begin process at 2012 05 28 10:41:57
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Trucs & Astuces

 > INFOS BULLES PERSOS

INFOS BULLES PERSOS


 Information sur la source

Note :
7 / 10 - par 5 personnes
7,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Trucs & Astuces Niveau :Débutant Date de création :17/08/2003 Date de mise à jour :17/08/2003 03:31:31 Vu / téléchargé :21 439 / 1 139
Auteur : Greengold

Ecrire un message privé
Commentaire sur cette source (9)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
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

  • <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> 
<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 !

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources de la même categorie

PARSER LES CARACTÈRES HTML D'UNE STRING par jdmcreator
CONSTRUCTION D'UNE TABLE TRIABLE À PARTIR D'UN TABLEAU 2D par phm
Source avec Zip Source avec une capture SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp
Source avec Zip TIMER : SETTIMEOUT & SETINTERVAL AMÉLIORÉS par jdmcreator
Source avec Zip Source avec une capture ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUE par william voirol
Toutes les sources de la catégorie Trucs & Astuces

Commentaires et avis

Commentaire de apxa le 18/08/2003 11:14:56

Qu'en est-il pour la compatibilité NN, IE, etc ?

Commentaire de Greengold le 18/08/2003 18:25:51

En ce qui concerne les css, tous les navigateurs récents (ie, netscape, opera...) sont  compatibles, par contre j'utilise des commandes ie (document.all et event.clientX...) ce qui veut dire que c compatible avec ie au moins. Si tu veux que se soit compatible avec netscape par exemple, il faut détecter le navigateur (ya pleins de sources qui le font) puis trouver les équivalents du document.all, etc...

Ca fait partie des sordides pb liés à la programmation web.

Merci d'avoir laissé un commentaire :)

Commentaire de kawash le 12/11/2003 17:42:00

salut c pas mal du tout! mais sa serait mieux si les couleurs de fonds de l'info bulle soient parametrables individuellement

A bientot

Commentaire de Tembe le 24/12/2003 08:07:51

Trop genial ton info bulle, merci Greengold !!!

Commentaire de milkasoprano le 02/10/2005 16:22:18

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 !

Commentaire de elisacarli le 21/03/2006 13:48:12

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

Commentaire de timox le 07/04/2006 23:17:13

salut,
il est bien ton script, c'est dommage qu il ne soit pas compatible a firefox

Commentaire de jnff le 25/06/2007 22:05:33

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

Commentaire de slumbering le 27/06/2007 13:30:31

bien mais le problème d'incompatibilité avec Firefox me gène pas mal.

 Ajouter un commentaire

Nos sponsors


Sondage...

Comparez les prix


Archos 7 home tablet - 2 Go
Entre 149€ et 159€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

Photothèque

Photo Underwater View of the Ocean With LIght Shining Through the WavePhoto Water in the Beginning of the Grand Canyon
Photo Ronce-les-Bains La-Tremblade , Charente-Maritime (17) 

Visiter la photothèque

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,530 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)