Création
d'entreprise
Posez votre question Signaler

Html, php, bulle avec la souris [Résolu]

Wolfylink 205Messages postés 11 juin 2009Date d'inscription 14 novembre 2010Dernière intervention - Dernière réponse le 31 mai 2011 à 17:15
Bonjour,
Je voudrais savoir, en html, php et peut-être MySQL et CSS, comment afficher un bulle avec du texte au passage de la souris sur l'élément concerné...
Par exemple, avec une image (je sais pas si c'est important alors je le dis quand même : cette image est un lien).
Merci d'avance...
@ +
Lire la suite 

Html, php, bulle avec la souris »

13 réponses
Réponse
+3
moins plus
Salut,
Est-ce que je peux me permettre d'ajouter ma petite solution personnelle ?

C'est du javascript aussi (+ design css), mais avec quelques bonus :
- quand elle au bord de la fenêtre, la bulle se positionne "intelligemment", de façon à ne pas déborder.
- par défaut, la bulle se positionne au dessus plutôt qu'en dessous de l'élément déclencheur. Ça fait plus propre.
- elle apparaît avec un effet de fondu (pas obligatoire toutefois)
- c'est conçu pour fonctionner en javascript non intrusif, ce qui permet de garder un code HTML aussi clair que possible

infobulles : http://sitesweb.abondance.free.fr/copyleft/billet.php?idBillet=30

Sur ce même site, je présente une variante un peu plus complète et complexe, qui permet aussi de charger le contenu de la bulle par ajax, de lui donner un titre, ou encore de créer des infobulles persistantes (permet notamment d'aller cliquer sur des liens dans la bulle) :

infobulles complexes et boîtes de dialogue : http://sitesweb.abondance.free.fr/copyleft/billet.php?idBillet=1

J'ai passé un peu de temps là-dessus, alors si ça peut servir à d'autres ça me fera plaisir.


(cela dit, j'aime bien aussi la solution css pure que tu proposes, IgnisFatuus)
Ajouter un commentaire
Réponse
+1
moins plus
Bonjour,

En html si tu veux dire "cette image est un lien", le code va ressembler à ça :
<img src="le nom du document où se trouve l'image/le nom de l'image.format" alt="cette image est un lien"/>

Voilà, j'espère avoir pu t'éclairer ^^
Ajouter un commentaire
Réponse
+0
moins plus
Merci, InginsFatuus...
Cependant, je ne parlais pas de l'option alt (que je connaissais déjà par ailleurs) mais d'un info-bulle...
Un peu comme celle-ci :

http://damienalexandre.fr/share/info-bulle-javascript.html

Si quelqu'un veut bien me répondre, merci !
Ajouter un commentaire
Réponse
+0
moins plus
J'ai trouvé ceci :

}
.infobulle{
position: absolute;
visibility : hidden;
border: 1px solid Black;
padding: 10px;
font-family: Verdana, Arial;
font-size: 10px;
background-color: #FFFFCC;
}

mateo 54 - 31 mai 2011 à 17:15
commetn utiliser ce code stp ?
Ajouter un commentaire
Réponse
+0
moins plus
Hello,
Il ne s'agit pas d'un infobulle meme si ça y ressemble.
C'est une sort de boite flottante qui est désactivée (cachée par défaut) et sur l'évènement "passe ta souris sur une image nommé x" elle s'affiche. Cette même boite flottante peut etre utilisée comme zone de texte pour positionner des infos à des endroits innaccessible sur une page.

Donc je suis l'idée du code CSS... A tester pour voir ce que ça fait
Bien vu IgnisFatuus

A+
Ajouter un commentaire
Réponse
+0
moins plus
Merci moderno31 ^^
Ajouter un commentaire
Réponse
+0
moins plus
Avec plaisir très chère ou Très cher lol
Ajouter un commentaire
Réponse
+0
moins plus
Très chère :)
En espérant que ça puisse aider Wolfylink.
Pour ma part, j'ai testé et ça marche donc il ne devrait pas y avoir de soucis.
Ajouter un commentaire
Réponse
+0
moins plus
Ok, :)
Bonne chance dans tes travaux alors. Moi j'en ai encore "montagne" à faire avec les miens
Ajouter un commentaire
Réponse
+0
moins plus
Merci... Mais mettre cette portion de code sur mon fichier css suffit ?
Ou faut-il mettre un code en HTML disant "quand la souris passe sur x, mettre y chose avec les propriétés css entrées précédement ?
Désolé pour toutes ces questions... En revanche, si quelqu'un a besoin d'aide, je suis à vous ! Je m'y connais très bien en HTML, PHP, MySQL et assez bien en css...
Donc, voilà !
@ + !
Ajouter un commentaire
Réponse
+0
moins plus
Voici un lien qui devrait t'aider http://peutetreunereponse.over-blog.com/article-6614978.html
Ajouter un commentaire
Réponse
+0
moins plus
Bon...
Merci pour tous vos conseils, mais c'est bon, j'ai compris comment ça marche... J'ai fait une sorte d'info-bulle personnalisée...

J'ai utilisé du javascript... Alors, pour ceux qui lisent ce sujet et qui ne savent pas comment faire :

http://damienalexandre.fr/Info-Bulle-en-Javascript.html

Voilà !
Merci à tous !!!
Ajouter un commentaire
Ce document intitulé « Html, php, bulle avec la souris » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?