begin process at 2010 03 22 08:47:24
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Graphique

 > DÉMO TOOLTIPS AVEC LA WWT

DÉMO TOOLTIPS AVEC LA WWT


 Information sur la source

Note :
Aucune note
Catégorie :Graphique Classé sous :tooltip, ria, widget, wwt Niveau :Débutant Date de création :24/05/2007 Date de mise à jour :19/06/2007 14:48:39 Vu / téléchargé :5 876 / 283
Auteur : the_wwt

Ecrire un message privé
Ce membre participe au partage de revenus publicitaires
Commentaire sur cette source (3)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
Un exemple des futures possibilités de la WWT.
Enjoy!
<pierrick.hymbert@gmail.com>

Source

  • <!------ HTML File --------------------------------->
  • <html>
  • <head>
  • <title></title>
  • <!-- JavaScript -->
  • <!--
  • /**
  • * @comment: The prototype library 1.4
  • * @import: prototype
  • */
  • -->
  • <script
  • src="lib/js/prototype.js"
  • type="text/javascript">
  • </script>
  • <!--
  • /**
  • * @comment: The Text class
  • * @import: Text
  • */
  • -->
  • <script
  • src="lib/js/WWTLoader.js"
  • type="text/javascript">
  • </script>
  • <!--
  • /**
  • * @comment: The test main function presents all the WWT functionnalities
  • * @import: test
  • */
  • -->
  • <script
  • src="lib/test/testToolTip.js"
  • type="text/javascript">
  • </script>
  • <!-- CSS -->
  • </head>
  • <body onload="new WWTLoader('lib/js/', main);">
  • </body>
  • </htlm>
  • <!------ Javascript file --------------------------------->
  • function main(args){
  • /* Instancie le display et la fenêtre de la WWT */
  • var display = new Display();
  • var shell = new Shell(display);
  • /* Crée le champ texte */
  • var label = new Label(shell, WWT.CENTER | WWT.SHADOW_NONE);
  • label.setText("Move mouse hover...");
  • label.setLocation( ( shell.getSize().x - 200 ) / 2, ( shell.getSize().y - 20 ) / 2);
  • label.setSize(200, 20);
  • /* Crée le listener de souris */
  • var mouseMoveListener = new MouseMoveListener();
  • mouseMoveListener.mouseMove = function(e){
  • var tt = new ToolTip(shell, WWT.NONE);
  • tt.setText("My tool tip");
  • tt.setMessage("An other message here");
  • tt.setLocation( (Math.random() * 10000) % shell.getSize().x, (Math.random() * 10000) % shell.getSize().y );
  • tt.setVisible(true);
  • };
  • var tt1 = new ToolTip(shell, WWT.BALLOON);
  • tt1.setText("A balloon Tool tip");
  • tt1.setMessage("Your mouse down");
  • tt1.setLocation( label.getLocation().x, label.getLocation().y + label.getSize().y);
  • var mouseListener = new MouseListener();
  • mouseListener.mouseDown = function(e){
  • if( !tt1.getVisible())
  • tt1.setVisible(true);
  • };
  • var tt2 = new ToolTip(shell, WWT.BALLOON);
  • tt2.setText("An other balloon Tool tip");
  • tt2.setMessage("Your mouse up");
  • tt2.setLocation( label.getLocation().x + label.getSize().x, label.getLocation().y);
  • label.addMouseMoveListener(mouseMoveListener);
  • mouseListener.mouseUp = function(e){
  • if( !tt2.getVisible())
  • tt2.setVisible(true);
  • };
  • label.addMouseListener(mouseListener);
  • }
<!------ HTML File       --------------------------------->
<html>
<head>
<title></title>
<!-- JavaScript -->

<!--
/**
* @comment: The prototype library 1.4
* @import: prototype
*/
-->
<script 
    src="lib/js/prototype.js"
    type="text/javascript">
</script>

<!--
/**
* @comment: The Text class
* @import: Text
*/
-->
<script 
    src="lib/js/WWTLoader.js"
    type="text/javascript">
</script>


<!--
/**
* @comment: The test main function presents all the WWT functionnalities
* @import: test
*/
-->
<script 
    src="lib/test/testToolTip.js"
    type="text/javascript">
</script>
<!-- CSS -->

</head>
<body onload="new WWTLoader('lib/js/', main);">
</body>
</htlm>

<!------ Javascript file --------------------------------->
function main(args){
	/* Instancie le display et la fenêtre de la WWT */
	var display = new Display();
	var shell = new Shell(display);
	
	/* Crée le champ texte */
	var label = new Label(shell,  WWT.CENTER | WWT.SHADOW_NONE);
	label.setText("Move mouse hover...");
	label.setLocation( ( shell.getSize().x - 200 ) / 2, ( shell.getSize().y - 20 ) / 2);
	label.setSize(200, 20);	
	
	/* Crée le listener de souris */
	var mouseMoveListener = new MouseMoveListener();
	mouseMoveListener.mouseMove = function(e){
		var	tt = new ToolTip(shell, WWT.NONE);
		tt.setText("My tool tip");
		tt.setMessage("An other message here");
		tt.setLocation( (Math.random() * 10000) % shell.getSize().x,  (Math.random() * 10000) % shell.getSize().y );
		tt.setVisible(true);
	};
	
	var tt1 = new ToolTip(shell, WWT.BALLOON);
	tt1.setText("A balloon Tool tip");
	tt1.setMessage("Your mouse down");
	tt1.setLocation( label.getLocation().x,  label.getLocation().y + label.getSize().y);
	
	var mouseListener = new MouseListener();	
	mouseListener.mouseDown = function(e){
		if( !tt1.getVisible())
			tt1.setVisible(true);
	};
	
	var tt2 = new ToolTip(shell, WWT.BALLOON);
	tt2.setText("An other balloon Tool tip");
	tt2.setMessage("Your mouse up");
	tt2.setLocation( label.getLocation().x + label.getSize().x,  label.getLocation().y);
	
	label.addMouseMoveListener(mouseMoveListener);
	mouseListener.mouseUp = function(e){
		if( !tt2.getVisible())
			tt2.setVisible(true);
	};
	label.addMouseListener(mouseListener);
}


 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


 Historique

19 juin 2007 14:48:39 :
Correction bug: dessin d'un shell. Mise à jour des démos dans test_xp.html Ajout d'autre pages de tests.

 Sources du même auteur

Source avec une capture PROGRESS BAR WIDGET
Source avec Zip Source avec une capture TRI DE TABLEAU, ALGORITHME LES PLUS CONNUS IMPLÉMENTÉS (FUSI...
Source avec Zip DESSINER EN JS: LIGNES, FIGURES, ELLIPSES, ELLIPSES PLEINES,
Source avec Zip Source avec une capture BOXMANAGEMENT: COMME LA PAGE D'ACCUEIL PERSONALISÉE DE GOOGL...
Source avec Zip Source avec une capture THE WWT: WEB WIDGETS TOOLKIT
Toutes les sources de the_wwt

 Sources de la même categorie

Source avec Zip Source avec une capture STOCK/FOREX CANDLE CHART USING CANVAS API par BlackWizzard
MODIFIER SES FEUILLES DE STYLES .CSS À LA VOLÉE AVEC JAVASCR... par Phildepantin
Source avec Zip Source avec une capture FARMVILLE - HEURE ET COMBO LIST IMAGES par ym_trainz
Source avec Zip [-CLASS-] -> CARROUSSEL D'IMAGES par TheWeasel47
Source avec Zip Source avec une capture OGG MEDIA PLAYER par kazma
Toutes les sources de la catégorie Graphique

 Sources en rapport avec celle ci

Source avec Zip MOOTOOLTIP par Miky76
Source avec une capture CHARGER UNE PAGE WEB DANS UN DIV par flk974
Source avec Zip Source avec une capture INFOS BULLE PARAMÉTRABLE (TOUS NAVIGATEURS) par mattho
Source avec une capture PROGRESS BAR WIDGET par the_wwt
Source avec Zip DESSINER EN JS: LIGNES, FIGURES, ELLIPSES, ELLIPSES PLEINES, par the_wwt

Commentaires et avis

Commentaire de meteors le 25/05/2007 10:53:13

J'élimine systématiquement tout ce qui fonctionne sous IE et pas sous FF. Comme je ne veux pas faire de jaloux...
zon qu'à s'entendre les 2.
et le W3C n'a qu'à s'imposer un peu.

Commentaire de bultez le 25/05/2007 11:27:24

ben moi je suis jaloux !
    j'utilise IE, et ça marche pas.
je ne peux donc ni juger, ni tester, ni noter.
entre nous,
_ pas grand chose à faire pour la compatibilité
_ FF est très loin de respecter tout ce que recommande le W3C
  ( certes un peu mieux que IE, mais uniquement ce qui l'arrange  )
  et ce ne sont que des recommandations, ni des ordres, ni des obligations...

Commentaire de the_wwt le 20/06/2007 10:15:13

Bonjour Bultez,
Avec cette mise à jour le code est compatible sous IE/FF/Opéra...
Bon c'est pas non plus mirrobolant, mais ça donne une idée des possibilités.
Merci pour vos critiques...
Cordialement,
Pierrick

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Tooltips [ par bosam ] Bonjour à tous le monde,Voilà, je poste ici car j'ai découvert sur ce site http://www.walterzorn.com/tooltip/tooltip_e.htm ; un script javascript DHTM tooltip et select [ par Djfresh ] salut comment creer un tooltip sur une balise select!plus precisément sur les balises option de la balise select?autrement dit en survolant les balise Probleme de return ou escape sur un tooltip [ par manu00 ] Hello,Je suis en train de developper un script ajax qui recupere des infos dans une database et l'affiche dans une info bulle (tooltip)Tout d'abord, j Tutoriel Widget dojo [ par guinus ] Bonjour,Quelqu'un aurait-il un lien vers un tutoriel expliquant la création de ses propres Widgets en Dojo ? Le tutoriel fourni par Alex Russel à http Textbox.tooltip ? ça semble pourtant logique [ par ranouf ] Bonjour,de la meme maniere qu'on peut récupérer le nom d'une textbox par textbox.name, il me semblerait logique qu'on puisse récupérer la valeur de la texte descriptif en mouseover [ par da vince ] Hello,J'ai trouvé un script très bein mais il a deux problèmes:ça marche dans IE7et les textes descriptifs (ds FF) ne disparaissent pas tjs quens on s tooltip cache par un frame [ par g_fuck ] salut!!! je suis entrain de monte un Site .... dans lequel on y trouve des bouttons avec tooltip.. le probleme est que quand le boutton est dans un pa widget netvibes [ par nien ] bonjour je suis a la recherche d'un bon tuto concernant la librairie UWA de netvibes pour developper des gadgets universels avec des exemple et tout e widget envoi sms [ par kenza1987 ] Code Postal: 3 Spry Widget Probleme de validation formulaire (java désactivé) [ par medicair ] Bonjour à tous,J'utilise les spry de dreamweaver pour vérifier qu'une case est bien coché, seulement si je désactive javascript et que je valide le fo


Nos sponsors


Sondage...

Comparez les prix


HTC Tattoo
Entre 9€ et 329€

Visiter le guide achat

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode
 
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,780 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)