begin process at 2012 02 05 23:20:55
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Fenêtre & Pop-up

 > INFO BULLE (DIV,A HREF,IMG...)

INFO BULLE (DIV,A HREF,IMG...)


 Information sur la source

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

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Fenêtre & Pop-up Classé sous :bulles, information, passage souris Niveau :Débutant Date de création :19/09/2008 Date de mise à jour :22/09/2008 11:25:04 Vu / téléchargé :14 705 / 1 669

Auteur : squall76

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

 Description

Affiche une bulle au passage de la souris contenant un texte ou une image sur n'importe quel objet html en ajoutant l'attribut bulle.
exemple <div bulle="votre texte dans la bulle">une div</div>

initialisation de la fonction
<body onload="init_bulle();">

Modification de
allElements[i].mouseover=fonction par allElements[i].attachEvent('onmouseover', show_bulle);
pareil pour mouseout et mousemove. addEventListener ne marche pas sous ie donc attachEvent

possibilité de gérér le temps d'apparition et de disparition de la bulle

Ajout effets d'affichage et de disparition (fadein,fadeout)

Bulle personnalisable par le fichier css.
testé sous ie7 et firefox 3

Premier script que je poste, soyez pas sévère :p

Merci à XTREMDUKE pour les conseils



 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 septembre 2008 10:49:50 :
modification fonction
19 septembre 2008 16:11:18 :
- gestion de l'attribut bulle sur les éléments HTML
19 septembre 2008 16:14:05 :
- gestion de l'attribut bulle
19 septembre 2008 16:15:05 :
- gestion attribut bulle
22 septembre 2008 08:49:33 :
- Cumul des events (compatibilité ie)
22 septembre 2008 11:25:05 :
- Ajout gestion temps - Ajout effets

 Sources de la même categorie

Source avec Zip Source avec une capture POSMOUSE - AFFICHAGE DES COORDONNÉES DE LA SOURIS, TAILLE DE... par phidelum
SFR WIDGET ET JQUERY par hhoareau
Source avec Zip JOLIE ALERTE AVEC "ALERT()" par heycraft
Source avec Zip Source avec une capture FENETRE D'ACTUALITE par kazma
Source avec Zip Source avec une capture CLASS POP-IN AVEC EFFET SOUS JQUERY DE "CONNEXION" STYLE CS ... par Nementon

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture FENETRE D'ACTUALITE par kazma
Source avec Zip CHANGEMENT DE COULEUR SUR CARTE DE FRANCE par librepierre
Source avec Zip INFO BULLE AMÉLIORÉE COMPATIBLE INTERNET EXPLORER ET GEOCKO ... par Zart

Commentaires et avis

Commentaire de XtremDuke le 19/09/2008 11:53:15

Salut,

Juste deux petites remarques :

- Il serait plus simple pour le développeur d'ajouter simplement un attribut aux éléments qui doivent afficher un tooltip. Ainsi, au chargement de la page, ton script se chargerait de parcourir le document et d'ajouter les évènements à tous les éléments qui contiennent cet attribut.

Exemple :

<div id="maDiv" tooltip="Hello">...

- Aussi, tu crées une div a chaque mouseover. Créés-en une au chargement de la page et modifies simplement son contenu lors du mouseover.

Commentaire de squall76 le 19/09/2008 16:18:37

voila encore plus simple à utilisée ^^
merci Xtremduke c'est vrai que c'est mieux comme ça. pourquoi n'y ai je pas pensé plus tôt.

Commentaire de the_wwt le 20/09/2008 14:02:40 5/10

Bonjour,
l'idée est bonne, seulement il se pose un problème pour IE si l'utilisateur a déjà définis une fonction onmouseover, onmouseout ou onmousemove, ton script l'écrase.
Tu devrais vérifier l'existence d'une fonction au préalable, la sauvegarder et l'appeler après ton code.
Cordialement,
Pierrick

Commentaire de AlphaOrionis le 20/09/2008 15:39:11 8/10

J'aime beaucoup ce script.

Simple d'utilisation avec la possibilité de mettre des balises (en utilisant des simples quotes au lieu des doubles) et de personnaliser la bulle. Que demande le peuple ? :)

Commentaire de aladeuil le 22/09/2008 07:14:50

@Xtremduke : Ah ça alors, c'est une super idée même que tu as là dis donc !! ^^
J'y vais de mon conseil pour répondre à the_wwt au passage : personnellement, je mettrai plutot des listener, comme ça tu n'as pas le problème de cumul des event.
@squall76 : ton code est bon, MAIS attention ! Tu définis ta page avec un doctype strict xhtml. Sur le concept je dis pas, mais attention à ton code html, il n'est pas compatible. C'est pas bien grave pour le cas présent, mais attention aux effets bizarres en javascript avec ça. Le DOM n'est pas le même...
Je vais faire le vieux con : continue, tu es bien parti !

Commentaire de lakichemole le 22/09/2008 09:20:29 8/10

Moi y me plait bien ce script :)

Commentaire de R3bo0t le 14/11/2008 09:27:26

Tu permet, je vais utiliser ton script pour mon site web :p

Commentaire de meudon le 16/01/2009 11:51:21

Bonjour

Il y aussi une excellente réalisation qui produit une bulle avec image et/ou texte sur un mouseover

Je l'utilise depuis des années pour mes arbres généalogiques pour faire apparaitre les trombines et des infos supplémentaires. Mon arbre est une gif map avec images réactives.

Elle est sur ce lien:

http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm

Elle doit bien avoir déjà 6 ans d'age et s'est bonifiée avec le temps.

Elle est universellement compatible.

Si vous voulez voir le résultat sur mes pages,mettez moi un mot.



Commentaire de the_wwt le 16/01/2009 14:06:49

Bonjour,

cette page n'est pas un espace publicitaire!

Si t'as une source et bien les gens iront la voir d'eux même.

A bon entendeur!

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Problème sur infos bulles [ par McPeter ] Salut ..j'utilises des infos bulles d'aide pour un script d'administration.Dans ce scrit, j'ai plusieurs balises "select"lorsque l'infos s'affiche, si Recevoir des information dans une iframe [ par thebmxeur ] Bonjour a tous.pour mon site j'ai créé un petit player.Il fonctionne sous mozilla firefox mais pas sous ie.Dans ma page principal j'ai un formulaire p information sur une image dans un cadre spécifié [ par vencent15081980 ] Bonjour ,Je souhaite lorsque l'on passe la souris sur une image (avec un lien ou non) afficher des infos sur cette image (plusieurs lignes) &#224; un Récupérer de l'information sur un meta tag [ par belzebuth13 ] Bonjour, j'ai les balises meta suivantes dans ma page:&lt;meta HTTP-EQUIV="Expires" Content="-1"&gt; <META http-equiv=P comment faire des infos bulles ? [ par fredericmaill ] Salut,je voudrais faire une infobulle au passage d'un texte dans mon application PHP.j'ai regard&#233; deja plusieur methode mais bon je l'est trouve comment récuperer les information d'un select fait en html et ensuite afficher une image ? [ par pierrre33 ] Bonjour je suis d&#233;butant en javascript car je ne m'en sert pas beaucoup mais l&#224; , j'en ai vraiment besoin . formulaire de recolte d'information [ par treppe ] comment configurer mon formulaire pour recevoir les information recolt&#233;es sans passer par outloock?Mais en passant par tiscali.fr demande d'information [ par wisal ] fatifatine bulles d'aide speciales [ par clems34 ] J'aimerai avoir quelques indications afin de faire un script qui je pense est assez simple mais je debute. Je voudrai qu'au passage de la souris sur u fenetre d'information [ par SDK_akira ] bonjour, Je cherche un script pour pouvoir afficher du texte lorsque l'on passe sur telle ou telle zone, genre une image, on passe la souris dessus e


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

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,686 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales