C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets

Partagez | 
 

Créer une infobulle sur une image réactive

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Voir le profil de l'utilisateur
avatar
{ Membre }
{ Membre }

Féminin Messages : 142



Créer une infobulle - sur une image réactive


Informations générales

Description :
Addendum de ce tutoriel suite à la question d'un membre. Comment créer une infobulle sur une image réactive ?

Démo :
Aucune démonstration disponible

Testé sur :
Non renseigné

Crédits :
Proposé par Kiwi le 06/11/2010 | Validé par sNipe_sCk

Mise(s) à jour :
Mise à jour le 08/08/2012 par 'Christa Lostmindy

Le tutoriel


Il n'est pas possible d'insérer une infobulle avec ce tutoriel, ni avec autant de liberté.
En effet, ce tuto se base sur une imbrication de balise, et la balise area se ferme toute seule à la fin (si elle est bien écrite), de cette façon (remarque le slash à la fin!) :

Code:
<area shape="rect" coords="...." href="URL" alt="" title="" />

Du coup, on ne peut pas mettre de contenu au milieu.

Solution 1 - Garder le Mapping et se contenter du CSS + HTML


Le mieux que tu puisses faire, c'est remplir les attributs alt et title qui sont parfois gérés comme des infobulles par les navigateurs si on laisse la souris dessus (je ne me rappelle plus, trop, mais il me semble qu'ils ont du mal à être d'accord sur ça ^^ ils affichent pas tous le même attribut, remplis les deux pour être tranquille). Par contre, tu ne peux mettre que du texte.

Solution 2 - Virer le Mapping, se contenter du CSS + HTML, mais à un niveau assez avancé


Après, si ton mapping est constitué d'images rectangulaires comme on le voit souvent dans les tutoriels, sache que tu peux découper tes images à part et les placer ensuite sur ton forum, placées au pixel près. Pour ça, il faut généralement une bonne maîtrise des positionnements en CSS (relative, absolute, etc), et de préférence un forum (ou un message d'accueil) de largeur fixe (sinon, bonjour les % et la galère ^^). L'avantage de pratiquer ainsi, c'est que tu es également libre de faire des effets de hover facilement, etc. Si tu es motivée, tu peux tenter de t'y mettre.

Solution 3 - Utiliser JavaScript pour faire les infobulles (marche pour tout, pas seulement pour le mapping)


Autrement, il y a la solution du JavaScript qui fera le :hover en lieu et place du CSS...
Il faudrait que tu mettes des écouteurs d'événements sur ton area. Les écouteurs écoutent (évidemment) ce qu'il se passe sur une balise HTML, pour voir si un évènement précis se produit, et agir en fonction de cet événement.
Ici, on utilisera onmouseover (quand le curseur de la souris est sur l'image), pour appeler la fonction JavaScript affiche qui sert à afficher l'infobulle, et onmouseout (quand le curseur est en dehors de l'image), pour appeler la fonction cache qui cache l'infobulle.
Après, il faut mettre la div qui contient ton infobulle à côté de la map (pas dedans), et lui donner un identifiant unique
.
Au niveau des fonctions dans les onmouse, il faut que tu leur donne en paramètre l'identifiant (id) de ton infobulle, pour que le Javascript retrouve correctement la bonne div à manipuler.
Voici ce que ça donne :

Code:
<map>
      <area shape="rect" coords="..." href="URL" alt="" title="" onmouseover="affiche('moninfobulle1')" onmouseout="cache('moninfobulle1')" />
</map>
<div id="moninfobulle1">Blabla</div>

Il est tout à fait possible de faire la même chose en remplaçant area par des p, des div, ou des liens :
Code:
<div onmouseover="affiche('moninfobulle1')" onmouseout="cache('moninfobulle1')" > Passez la souris ici !</div>
<div id="moninfobulle1">Blabla</div>

/!\ ATTENTION aux simples quotes et doubles quotes! Il ne faut pas faire de conflit, cela ne marcherait pas, par exemple :
Mauvais :
onmouseover="affiche("moninfobulle1")"
onmouseover='affiche('moninfobulle1')'
Et encore moins un mélange du genre :
onmouseover='affiche('moninfobulle1")"

Il n'y a que deux possibilités (en dehors de faire échapper le caractère)
onmouseover='affiche("moninfobulle1")'
onmouseover="affiche('moninfobulle1')"

Dans ton CSS, il faut attribuer à l'identifiant #moninfobulle1 la propriété display:none; pour ne pas que le bloc associé ne s'affiche au chargement de la page.

Pour finir, il te faut créer le script suivant (via les modules » gestion des pages javascripts de ton panneau d'administration)
Code:
function affiche(infobulle) {
  document.getElementById(infobulle).style.display='block';
}
function cache(infobulle){
  document.getElementById(infobulle).style.display='none';
}
Le javascript n'est pas très compliqué à comprendre. Entre les accolades d'une fonction, il va chercher dans le document (la page HTML) l'élément qui possède l'identifiant que tu as mis en paramètre lorsque tu as écrit les onmouse. Tout ceci pour modifier le style css, et plus précisément la propriété display, en lui donnant une nouvelle valeur, soit block, soit none selon la fonction.

Le JavaScript peut aussi servir d'alternative à ceux qui ont des soucis avec IE6 ou qui veulent absolument un lien pour créer leur infobulle.

Par contre, j'espère que ça va fonctionner, pas trop le temps de tester ^^

Voilà, bon courage ^^

Kiwi
MessageSujet: Créer une infobulle sur une image réactive   Ven 04 Mar 2011, 05:49
Revenir en haut Aller en bas
 

Créer une infobulle sur une image réactive

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Image réactive
» Image réactive dans un message ?
» Créer une infobulle sur une image réactive
» Créer une infobulle sur une image de titre
» Infobulle sur image réactive

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Tutoriels de CSSActif :: Bases CSS & xHTML :: Mise en oeuvre-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit