info bulle un peu spéciale - Version imprimable

info bulle un peu spéciale - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : info bulle un peu spéciale (/showthread.php?tid=3260)

info bulle un peu spéciale - php_addict - 25-01-2013

bonjour

sur certains liens href j'aimerais qu'au survol de la souris il y est une info bulle qui s'ouvre et qui affiche d'autres liens, des raccourcis en somme, ca peut être bien sympa mais voici le problème:

je pensais partir sur un "onmouseover" qui fait apparaitre une info bulle, jusqu'à là pas de problème, mais dès que la souris quitte le survol du lien alors l'infobulle va disparaitre...je ne sais pas du tout comment m'y prendre...

[Image: jjjjjjjjjjjjjjjjjjjjjjjr.jpg]

ca pourrais fonctionner comme ca:

- la souris ne survol pas le lien rouge => nada, nothing, que dalle...

- la souris survol le lien rouge alors l'infobulle apparait et il y a là 2 cas de figure:
a) la souris quitte le survol du lien rouge et l'info bulle disparait
b) la souris va pointer vers les liens verts mais comme l'on quitte le survol du lien rouge alors l'info bulle disparait ce qui n'est pas du tout comme ça que cela devrait réagir...

une idée? un conseil?
avez vous des exemples sur le web d'un tel fonctionnement ? (jeu ou autre peu importe...)

encore merci de m'avoir lu une fois de plus

RE: info bulle un peu spéciale - Xenos - 25-01-2013

CSS le permet.

Code :
#objet

{

/*Skin normal de l'objet qui fera apparaitre l'info-bulle*/

}

#infobulle

{

/* Skin de l'info bulle telle que tu voudras qu'elle s'affiche */

display: none;

/*Ou visibility: hidden, les deux sont à tester */

}

#objet:hover #infobulle

{

visibility: visible; /* ou display: block */

}

Normalement, si infobulle est enfant de l'objet "objet", alors au survol de objet (objet:hover) la 2e règle sera appliquée à "infobulle".

Au fait: avec ce système, on aura un soucis sur les plateformes mobiles tactiles: le mouseover n'existe pas je crois... Donc, soit il faut se rabbatre sur un autre sélecteur (:active?), soit il faudra utiliser en plus un javascript de type:

onclick='javascript: document.getElementById("infobulle").className += "classeOver"; return false;'

et, dans le css, coupler la ligne du sélecteur "hover" avec le nom de classe demandé:

#objet:hover #infobulle, .classeOver

RE: info bulle un peu spéciale - php_addict - 25-01-2013

ah oui ok, merci pas pensé de la sorte...c'était pourtant évident, merci...

il s'agit à vrai dire d'un confort de jeu pour les ordis de bureau, ce seront des raccourcis de navigation, pour les tablettes tant pis...

RE: info bulle un peu spéciale - niahoo - 25-01-2013

Et si l'infobulle ne peut pas être mise en élément enfant de ton trigger, tu peux utiliser javascript :

Lors du mouseover sur le lien tu affiches l'infobulle, et lors du mouseover sur l'infobulle également. L'astuce javascript consiste à maintenir visible l'infobulle quelques secondes après le départ de la souris sur le lien pour avoir le temps de passer la souris sur l'infobulle.

Mais bon, c'est moins pratique car il y aura beaucoup plus de cas chiants à gérer.

RE: info bulle un peu spéciale - Wells - 29-01-2013

Perso, hormis l’aspect didactique de faire la chose toi même, je te conseille de passer par jquery et ces nombreuses possibilités d'infobulles. Gain de temps assuré Wink

RE: info bulle un peu spéciale - Xenos - 29-01-2013

Le problèmpe de javascript, c'est qu'il n'est pas forcément autorisé partout. De plus, s'il s'agit d'une présentation, c'est du ressort du CSS, pas du javascript, qui s'occupe d'actions, pas d'affichage/masquage d'info-bulles.
Si on autorise les utilisateurs à faire un "skin" du site, vaut mieux pas de javascript. D'où l'utilisation du sélection ":hover".

Note:
La sélection peut se faire via: #id [...] .classe1:hover .classe2 [...]
Un tel sélecteur, avec "hover" coincé au milieu, signifiera "appliquer les paramètres à #id [...] .classe1 .classe2 [...] si et seulement si la souris est au-dessus de l'élément #id [...].classe1". C'est très pratique pour appliquer un typage sur un élément enfant lorsque la souris passe sur l'un de ses parents.

RE: info bulle un peu spéciale - Wells - 29-01-2013

Hum, disons que pour une infobulle de base je suis d'accord. Le JS permet quand même de faire des choses plus sympa que les infobulles de l'an 1990.

Mais bon, c'était juste un tips pour l'auteur du post Wink

RE: info bulle un peu spéciale - Ter Rowan - 29-01-2013

ça m'a fait penser à des menus déroulants

avec google et "html menu déroulant sans javascript"

y a un truc qui peut marcher ici :
http://www.tutofr.com/tutoriaux/tutorial-menu-deroulant-css.php