Info-bulle personnalisable compatible firefox et ie

Soyez le premier à donner votre avis sur cette source.

Vue 50 767 fois - Téléchargée 6 776 fois

Description

Cette source affichera une bulle d'info (Un div caché) a proximité du curseur lorsque celui ci passera sur l'élément de votre choix.

La différence de ce script par rapport à d'autres présent ici même est sa complète compatibilité avec tous les navigateurs actuels (Firefox, Internet Explorer et Opera (Pas encore tester sous les autres, si quelqu'un pouvais le faire merci)).

De plus, vous pouvez insérer de l'HTML dans la bulle (image, texte en gras, ect...)

Pour contrer le bug de IE au scrolling de la page présent dans toute les sources que j'ai essayer, j'ai insérer un petit code de microsoft: document.body.scrollTop;

Voila que dire de plus, enjoy !

EDIT : Je laisse un exemple online, pour que vous ne soyer pas obliger de télécharger le zip pour voir le code en action:
http://damienalexandre.fr/share/info-bulle-javascript.html

Mobman02 ;)

Conclusion :


Je ne vous montre pas la source parce qu'elle est commenté,
Vous pouvez maintenant mettre un Doctype sur les pages contenant cette source, le bug est corrigé.
Merci à TeDeum grâce à qui la source tient compte du mode quirck d'IE.

J'espère que cette source vous empêchera de passer la journée sur un bout de javascript ! (comme moi quoi...)

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
1
Date d'inscription
lundi 26 avril 2010
Statut
Membre
Dernière intervention
9 novembre 2011

Bonjour,

J'ai trouvé votre code et l'utilise. Il est vraiment parfait. Rien à dire Sauf...
Et oui mais ca n'a peut-etre rien a voir, mais il est impossible de faire afficher l'info bulle sur un button quand il est "disabled".
Exemple :
Press

Quelqu'un aurait une idée?
J'ai fait le test, si on supprime 'disabled="disabled"', tout fonctionne.

Merci d'avance pour votre aide.
Messages postés
21
Date d'inscription
vendredi 24 décembre 2004
Statut
Membre
Dernière intervention
25 janvier 2010

salut la source est vieille mais trés bien tout de même, pour la compatibilité I.E8 c'est possible de "rafistoler" plutot que de balancer une <meta http-equiv="X-UA-Compatible" content="IE=7" /> ?
Messages postés
381
Date d'inscription
lundi 12 novembre 2007
Statut
Membre
Dernière intervention
23 octobre 2014

Merci, j'en avais besoin, la flemme de coder.
Messages postés
1
Date d'inscription
mercredi 16 août 2006
Statut
Membre
Dernière intervention
18 février 2009

Hello

Merci mobman02 pour ce petit script de rien du tout qui m'a fait gagner pas mal de temps, en effet : ]
Ca m'a permis de me dépêtrer de lourdeurs superflues dans le code d'une appli web que je refonds.
Voici un exemple de ce qu'on peut faire avec ton script (liens au bas du formulaire en page d'accueil).
Notez que la position de différents éléments merde sous IE mais j'ai la chance de pouvoir me passer de la compatibilité IE sur ce projet:
http://www.zalemlabs.com/exemples/exemple.html

Infobarquee, j'ai testé ton code en virant les appels BDD et avec une autre image et ça fonctionne bien hormis que la propriété z-index: 300 que tu colles sur le div en absolute contenant l'image où le passage de la souris doit afficher ton tooltip, masque le tooltip. Il te suffit de coller une propriété z-index supérieure, à la définition CSS .infobulle ex
z-index: 301;

Maintenant je ne sais pas quelle place prend taille.jpg chez toi mais vu la taille de son conteneur, elle doit pas être énorme, ce qui m'interroge sur l'effet de masquage que je décris :-k
D'ailleurs au passage, tu peux virer le div conteneur de ton image en appliquant les styles à la balise IMG ou mieux, en définissant une classe forçant le passage de ces images en blocs positionnés en absolu. Ex :

$date
$title : $cp
$description ','white',event)" onmouseout="cache()" />

avec
img.bidon {
display: block;
position: absolute;
z-index: 300;
}

hmm ah oui aussi
Je ne comprends pas bien pourquoi tu ajoutes deux paramètres à l'appel de la fonction montre() dans le onmouseover de ton image, ça semble ne correspondre à rien dans ton code.
Messages postés
11
Date d'inscription
mardi 11 novembre 2008
Statut
Membre
Dernière intervention
30 janvier 2009

il ne peut y avoir d'erreur de chemin car il est integre dans ma page php.
voici le code php de ma page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<title>Observation en temps reel</title>
<head>

<style type= "text/css">
.infobulle{
position: absolute;
visibility : hidden;
border: 1px solid Black;
padding: 10px;
font-family: Verdana, Arial;
font-size: 10px;
background-color: #FFFFCC;
}
</style>
<script language="JavaScript" type="text/javascript">
<!--
function GetId(id)
{
return document.getElementById(id);
}
var i=false; // La variable i nous dit si la bulle est visible ou non

function move(e) {
if(i) { // Si la bulle est visible, on calcul en temps reel sa position ideale
if (navigator.appName!="Microsoft Internet Explorer") { // Si on est pas sous IE
GetId("curseur").style.left=e.pageX + 5+"px";
GetId("curseur").style.top=e.pageY + 10+"px";
}
else { // Modif proposé par TeDeum, merci à lui
if(document.documentElement.clientWidth>0) {
GetId("curseur").style.left=20+event.x+document.documentElement.scrollLeft+"px";
GetId("curseur").style.top=10+event.y+document.documentElement.scrollTop+"px";
}
else {
GetId("curseur").style.left=20+event.x+document.body.scrollLeft+"px";
GetId("curseur").style.top=10+event.y+document.body.scrollTop+"px";
}
}
}
}

function montre(text) {
if(i==false) {
GetId("curseur").style.visibility="visible"; // Si il est cacher (la verif n'est qu'une securité) on le rend visible.
GetId("curseur").innerHTML = text; // Cette fonction est a améliorer, il parait qu'elle n'est pas valide (mais elle marche)
i=true;
}
}
function cache() {
if(i==true) {
GetId("curseur").style.visibility="hidden"; // Si la bulle etais visible on la cache
i=false;
}
}
document.onmousemove=move; // des que la souris bouge, on appelle la fonction move pour mettre a jour la position de la bulle.
//-->
</script>
</head>





[../ Retour aux observations]

[../writesingle.php Ajouter une observation]

[../inscription.php Pas encore inscrit?]




<?php
$datej =date("d-m-y");
$heure=date("h");
$min=date("i");
echo"
Date : ".$datej."
Heure : ".$heure."h".$min."
";
//header('Content-type: image/png');

$point=imagecreatefrompng("point.png");
$carte=imagecreatefrompng("france.png");
$minlong = -5.1;
$maxlong = 8.2;
$minlat = 42.4;
$maxlat = 51.1;

$largeur = 640;
$hauteur = 640;

//Taille des marges, nécessaire pour que les noms de ville ne soient pas coupés par les bords.
$margex = 20; //px
$margey = 20; //px

$link = mysql_connect("localhost","root","") or die('Connexion impossible.');
mysql_select_db("rsseditor") or die (mysql_error());
$result mysql_query('SELECT * FROM rsseditor_news WHERE valide 1 order by date asc') or die ('Erreur : '.mysql_error() );

while ($arr = mysql_fetch_array($result))
{

//Converti lat/long en position sur l'image
$x = $margex + ($arr['longitude'] - $minlong) / ($maxlong - $minlong) * ($largeur - $margex * 2);
$y = $margey + (1-($arr['latitude'] - $minlat) / ($maxlat - $minlat)) * ($hauteur - $margey * 2);
$description = addslashes($arr['description']);
$title = addslashes($arr['title']);
$cp = addslashes($arr['cp']);
$date= addslashes($arr['date']);

echo "
$date
$title : $cp
$description ','white',event)" onmouseout="cache()">
" ;
}
mysql_close();

?>

</html>
Afficher les 97 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.