Info-bulle personnalisable compatible firefox et ie

Soyez le premier à donner votre avis sur cette source.

Vue 51 328 fois - Téléchargée 6 798 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
bdebou Messages postés 1 Date d'inscription lundi 26 avril 2010 Statut Membre Dernière intervention 9 novembre 2011
9 nov. 2011 à 15:07
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.
stella2809 Messages postés 21 Date d'inscription vendredi 24 décembre 2004 Statut Membre Dernière intervention 25 janvier 2010
9 oct. 2009 à 14:37
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" /> ?
inwebo Messages postés 381 Date d'inscription lundi 12 novembre 2007 Statut Membre Dernière intervention 23 octobre 2014
11 juin 2009 à 13:29
Merci, j'en avais besoin, la flemme de coder.
profdestynova Messages postés 1 Date d'inscription mercredi 16 août 2006 Statut Membre Dernière intervention 18 février 2009
18 févr. 2009 à 02:06
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.
infobarquee Messages postés 11 Date d'inscription mardi 11 novembre 2008 Statut Membre Dernière intervention 30 janvier 2009
30 janv. 2009 à 19:09
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.