Sujets similaires

Bonjour,

Je voulais savoir s'il était possible de mettre des infobulles sur une image réactive et si oui quel était le code. Smile

Merci d'avance!

Bonjour,

Où en est la demande ?
Le problème est-il toujours d'actualité ?

Oui, toujours... :/

Bonjour,

Votre problème est-il résolu ?

Ehhh.. non..

Coucou,

Si c'est une image, il faut lui faire une tranche Wink

. Ensuite tu l'entoures par

Code:: <a href="url" class="infobulle"><img src="image"></a>

et tu fais ton CSS.

.. Une tranche?

Tu saurais me donner un exemple? :/ Je sais comment on fait une image réactive, mais là je visualise pas vraiment ce que tu veux dire.. xD

Bonjour.
D'après ce que j'ai put voir en consultant ton forum tu sais déjà faire des infobulles sur des images.
Là le principe est exactement le même, sauf que en plus il y à un lien.

Si je prend une de tes infobulle :

Code:: <a class="infobulle" href="#"><img border="0" alt="" src="http://img708.imageshack.us/img708/184/robynh.jpg"><span>Admin sans pitié et accro à la bonne orthographe, à tendance dictatoriale, elle vous fera passer un sale moment pendant votre présentation. Mais soyons pragmatiques et nuancés, les membres l'aiment terriblement! (sisi! =D)</span></a>

devient

Code:: <a class="infobulle" href="URL du lien"><img border="0" alt="" src="http://img708.imageshack.us/img708/184/robynh.jpg"><span>Admin sans pitié et accro à la bonne orthographe, à tendance dictatoriale, elle vous fera passer un sale moment pendant votre présentation. Mais soyons pragmatiques et nuancés, les membres l'aiment terriblement! (sisi! =D)</span></a>

Coucou,

Quand tu fais le découpage d'une PA, tu utilises l'outil tranche. Avec cet outil tu "encadres" la partie de la PA où tu veux que l'infobulle s'affiche quand on passe la souris ^^. A moins que tu ne fais que du Mapping =/.

Je fais du mapping, oui ^^ Je savais pas qu'on pouvait faire ça avec la tranche.. xD

VPey, je ne vois pas ce qui change.. Le # est aussi pour un lien.. :/

Non simplement l'adresse du lien.
Quand vous cliquerez sur l'image cela renvéra à la page en href.

Oui, mais ma question n'est pas "Comment faire une image réactive" Smile

Je cherche à savoir comment faire une infobulle sur une image réactive..

Dans l'exemple que j'ai pris, ton infobulle sur image réactive existe déjà.
Sauf que l'image réactive renvois sur "#" qui fait référence à la page courante.

Qu'est ce que tu ne comprend pas ?

Mais l'image et infobulle que tu as pris en exemple ne font pas partie d'une image réactive.. :/ Quand je parle d'image réactive, c'est du mapping..

Dans ce cas parle de mapping.
Le thermes image réactive désigne généralement simplement un lien sur une image.

Personnellement je n'utilise jamais de mapping, je ne peut donc te donner une solution près conçu. Par contre une chose est sure, c'est que leur conception ne permet pas de faire des infobulle en CSS. Il faut utiliser JavaScript.

Pourrais tu me passer un de tes mapping afin que je puisse tester 2/3 trucs ?

Sur le forum d'aide de forumactif ils appellent ça image réactive >.<

Voilà:

Code:: <img usemap="#page_d_accueil" src="http://img97.imageshack.us/img97/7240/panneaut.png" width="600" height="519" border="0">
<map name="page_d_accueil">
<area shape="rect" title="Règlement" coords="238,121,335,128" href="http://khyssian-university.forumactif.org/reglement-et-contexte-f1/le-reglement-t2.htm#3">
<area shape="rect" title="Contexte" coords="412,155,494,196" href="http://khyssian-university.forumactif.org/reglement-et-contexte-f1/le-contexte-t1.htm">
<area shape="rect" title="Partenaires" coords="26,393,163,339" href="http://khyssian-university.forumactif.org/partenariat-f15/nos-partenaires-t15.htm#20">
<area shape="rect" title="Devenir partenaires" coords="227,393,290,442" href="http://khyssian-university.forumactif.org/partenariat-f15/devenir-partenaire-postez-a-la-suite-t14.htm">
<area shape="rect" title="Postes vacants" coords="339,338,508,400" href="http://khyssian-university.forumactif.org/postes-vacants-f4/">
<area shape="rect" title="News" coords="130,187,261,287" href="http://khyssian-university.forumactif.org/news-cie-f5/">
</map>

Ok, j'ai fait des tests, il est tout à fait possible de faire apparaître des infobulle avec un mouseover JS sur les area.
Le plus coton c'est le positionnement. Parce que comme on à une image unique, il faut repositionner chaque infobulle en absolu par rapport aux coordonnés relatives des area. Mais c'est faisable avec un petit script.

Erm... Ok, c'est déjà une bonne nouvelle Very Happy

T'aurais un exemple à me donner? Parce que je vois déjà même pas ce qu'il faut ajouter comme codes >.<

Pour le script je te le ferait, c'est pas que ça soit compliqué, mais presque. Very Happy

Ce que tu peux commencé à faire par contre c'est les bulle. Sous cette forme :

Code:: <div class="mapbulle">
<map name.....
   
</map>
<div class="mapbulle_bulle">
   <div>
      
   </div>
   <div>
      
   </div>

   ................
</div>
</div>