Info bulles : Texte ou JPG

Info bulles : Texte ou JPG - HTML/CSS - Programmation

Marsh Posté le 06-09-2006 à 13:44:50    

Bonjour à tous,
 
Je vous remercie pour les réponses rapide à ma dernière question.
 
J'ai un autre problème que je souhaiterais vous soumetre.
 
Sur une page HTML j'insère un link qui point vers un e-mail  
  Ex: <a href="mailto:toto@hotmail.com">Toto</a>
 
je peux facilement mettre un info-bulle avec un texte.
 
Ma question, comment faudrait-il faire pour faire apparaitre une photo plustôt qu'un texte.
 
Quelqu'un aurait-il une idée ?
 
Merci d'avance                    

Reply

Marsh Posté le 06-09-2006 à 13:44:50   

Reply

Marsh Posté le 06-09-2006 à 13:55:02    

Faire apparaitre un div qui contient l'image, au niveau de ton curseur.

Message cité 1 fois

---------------
Posté depuis des chiottes, sales. Me gusta.
Reply

Marsh Posté le 06-09-2006 à 14:13:31    

boulax a écrit :

Faire apparaitre un div qui contient l'image, au niveau de ton curseur.


 
 
Aurais-tu un exemple de code, car je ne comprend pas bien.
 
Merci d'avance

Reply

Marsh Posté le 06-09-2006 à 14:20:54    

pas très débrouillard :o
 
Bon ce qui est vraiment dommage c'est que c'est presque faisable en pur css:

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  4. <head>
  5.   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  6.   <title>Exemple</title>
  7.   <style type="text/css">
  8.   a span.bubble{
  9.     display:none;
  10.     position: relative;
  11.     top: -40px;
  12.   }
  13.   a:hover span.bubble{
  14.     display: block;
  15.   }
  16.   </style>
  17. </head>
  18. <body>
  19. <br/><br/>Balblalblalgvl a lvlal<br/>
  20. <a href="tapage.html">le texte qui va bien<span class="bubble"><img src="uneimage.jpg" alt="pouet"du texte<img src="uneimage.jpg" alt="pouet"/></span></a>
  21. </body>


Malheureusement ça marche pas sous IE :/
 
Avec un peu de js c'est sans être très compliqué:

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  4. <head>
  5.   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  6.   <title>Exemple</title>
  7.   <script type="text/javascript">
  8. var infobulle = {};
  9. infobulle.init = function(){
  10.   var aNodes = document.getElementsByTagName('a');
  11.   for(var i=0; i<aNodes.length; i++){
  12.     if ( aNodes[i].nextSibling.className == 'bulle'){
  13.       aNodes[i].onmouseover = function(e){ infobulle.affBulle(this);}
  14.       aNodes[i].onmouseout = function(e){ infobulle.cacheBulle(this);}
  15.       aNodes[i].nextSibling.style.display = 'none';
  16.     }
  17.   }
  18. }
  19. infobulle.affBulle = function (node) {
  20.   node.nextSibling.style.display = 'block';
  21. }
  22. infobulle.cacheBulle = function (node) {
  23.   node.nextSibling.style.display = 'none';
  24. }
  26. window.onload = infobulle.init;
  27.   </script>
  28. </head>
  29. <body>
  30. <br/><br/>Balblalblalgvl a lvlal<br/>
  31. <a href="tapage.html">le texte qui va bien</a><div class="bulle"><img src="arbre/plus.png"/>du texte<img src="arbre/plus.png"/></div>
  32. </body>
  33. </html>


Par contre j'ai fait à la va-vite je garantis pas 100% bug-proof.


Message édité par anapajari le 06-09-2006 à 14:21:32
Reply

Marsh Posté le 06-09-2006 à 14:27:38    

Ou alors il cherche rollover dans google :o

Message cité 1 fois

---------------
Posté depuis des chiottes, sales. Me gusta.
Reply

Marsh Posté le 06-09-2006 à 14:28:55    

boulax a écrit :

Ou alors il cherche rollover dans google :o


t'as pas fondamentalement tort en fait  [:grinking]

Message cité 1 fois
Reply

Marsh Posté le 06-09-2006 à 16:44:22    

anapajari a écrit :

t'as pas fondamentalement tort en fait  [:grinking]


 
Merci à tous pour votre aide, mais j'ai encore un détail qui me taraude.
 
Je n'arive pas à implémenté sur un lien  <a href="mailto:toto@hotmail.com>toto</a>
 
Le but c'est que lorsque je vien sur le link en question, j'ai la photo de mon correspondant qui apparait.
Lorsque je déplace le curseur de ma souris hors du lien la photo disparait
 
La solution que vous m'avez donner est géniale avec tout les autre type de link.
 
Merci encore pour votre aide même cette partie de code fonctionne bien.

Reply

Marsh Posté le 06-09-2006 à 17:43:31    

nan nan c'est censé marcher aussi avec les mailto en href :o
 
Tu peux nous montrer un exemple "qui marche pas".

Message cité 1 fois
Reply

Marsh Posté le 18-09-2006 à 09:43:58    

anapajari a écrit :

nan nan c'est censé marcher aussi avec les mailto en href :o
 
Tu peux nous montrer un exemple "qui marche pas".


 
Bonjour à tous,
 
Je tiens à vous remercier pour votre aide, j'ai appris énormément avec vos exemple de code.
Par ailleurs, je n'arrive pas à obtenir le résultat que je souhais.
 
Voici mon problème.
1. Je créé un organigramme avec Vio 2003 Pro. Je sauvegade en HTML (Visio fait cela très bien)
2. Lorsque je parcours les différents blocs représentant les personnes, j'ai une info-bulle qui apparait avec les renseignements de la personne en question.
 
Ma question.
Je souhaiterais avoir la photo de la personne qui apparait au lieu de l'info-bulle.
 
J'ai trouvé un site qui présente un peut l'idée du résultat que je souhaiterais (Exemple : http://www.teuco.fr/pr_main_lin.asp?linea=23)
A l'endroit ou vous avez les 3 colonnes Hydrosonic - Top - Easy, dès que vous positionnez le curseur sur un link une photo apparait en info-bulle.
J'ai essayé de regarder le souce derrière, j'avoue que je n'ai pas compris grand chose.
 
Si vous avez des idées de code ou l'utilisation d'un outil particulier .....
 
Je vous remercie d'avance.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed