Image qui change en fonction position souris (Map Area + JS et/ou CSS)

Image qui change en fonction position souris (Map Area + JS et/ou CSS) - HTML/CSS - Programmation

Marsh Posté le 12-08-2008 à 11:23:31    

Bonjour à tous ! [:black_lord]  
 
J'ai un peu cherché, mais n'ai pas trouvé de solution.
Je vous explique la situation : j'ai une carte (cf. ci-dessous) avec des points (rouges) indiquant des communes.
J'aimerais que lorsque la souris survole un de ces points, le nom de la commune apparaissent tout en bas.
J'ai déjà "découpé" ma carte avec des MAP AREA (pour rendre actifs les points rouge), mais je ne vois pas comment faire apparaitre le nom de la commune en bas. Sûrement avec du JavaScript ou du CSS ?
Si quelqu'un parvient à m'éclairer... :)
 
http://img84.imageshack.us/img84/2363/mapcd3.gif
 

Code :
  1. <map name="carte">
  2.   <area shape="circle" coords="159,162,5" href="#" onmouseover="changeImages('carte_gerenale_01', 'images/logos_chaines/logo_commune1.gif'); return true;">
  3.   <area shape="circle" coords="183,167,5" href="#">
  4.   <area shape="circle" coords="193,154,5" href="#">
  5.   <area shape="circle" coords="221,153,4" href="#">
  6.   <area shape="circle" coords="198,232,4" href="#">
  7.   <area shape="circle" coords="209,230,4" href="#">
  8.   <area shape="circle" coords="123,225,4" href="#">
  9.   <area shape="circle" coords="83,193,5" href="#">
  10.   <area shape="circle" coords="220,87,5" href="#">
  11.   <area shape="circle" coords="245,75,5" href="#">
  12.   <area shape="circle" coords="225,59,4" href="#">
  13.   <area shape="circle" coords="232,62,4" href="#">
  14.   <area shape="circle" coords="242,64,4" href="#">
  15.   <area shape="circle" coords="155,17,6" href="#">
  16.   <area shape="circle" coords="133,13,5" href="#">
  17.   <area shape="circle" coords="145,6,5" href="#">
  18.   <area shape="circle" coords="135,69,5" href="#">
  19.   <area shape="circle" coords="135,96,4" href="#">
  20.   <area shape="circle" coords="62,90,4" href="#">
  21.   <area shape="circle" coords="101,95,5" href="#">
  22.   <area shape="circle" coords="109,117,5" href="#">
  23.   <area shape="circle" coords="84,110,4" href="#">
  24.   <area shape="circle" coords="77,119,4" href="#">
  25.   <area shape="circle" coords="71,112,5" href="#">
  26.   <area shape="circle" coords="66,116,4" href="#">
  27.   <area shape="circle" coords="69,133,4" href="#">
  28.   <area shape="circle" coords="76,132,4" href="#">
  29.   <area shape="circle" coords="73,142,4" href="#">
  30. </map>
  31.                     <img src="images/carte.gif" border="0" title="" alt="" usemap="#carte" /><br />


Message édité par zoukoufxxx le 12-08-2008 à 11:24:40

---------------
Le site des BD d'HFR | Aurélien Amacker : Arnaque ? - Mongolien du Web
Reply

Marsh Posté le 12-08-2008 à 11:23:31   

Reply

Marsh Posté le 12-08-2008 à 11:37:27    

Code :
  1. <script type="text/javascript">
  2. function affichage_text(text)
  3. {
  4.     document.getElementById('text_map').innerHTML  = text;
  5. }
  6. </script>
  7. <map name="carte"> 
  8.   <area shape="circle" coords="183,167,5" href="#" onmouseover="affichage_text('Nom de ma ville');>
  9. </map>
  10. <img src="images/carte.gif" border="0" title="" alt="" usemap="#carte" /><br />
  11. <div id="text_map" name="text_map"></div>



Message édité par babasss le 12-08-2008 à 11:38:04

---------------
Feedback : http://forum.hardware.fr/hfr/Achat [...] 2666_1.htm
Reply

Marsh Posté le 12-08-2008 à 11:49:48    

Je savais qu'il y avait un Dieu sur cette planète. Je crois l'avoir trouvé ! [:hysafe]  
 
Merci beaucoup ! [:d4buff]


---------------
Le site des BD d'HFR | Aurélien Amacker : Arnaque ? - Mongolien du Web
Reply

Marsh Posté le 20-10-2012 à 16:16:32    

Hello,
 
Je suis tombé ici, ça m'interesse bien :)
Mais j'arrive pas à m'en sortir.
 
Je voudrais qu'en passant la souris sur certains endroit de ce BUS/CARRIOLE il y ai une image où il est écrit par exemple le nom des revues (affiché dessus)
Malgré le code présent juste au dessus, je n'y arrive pas. Est-ce que quelqu'un pourrait m'aider ?
 
A quoi correspond : carte_générale_01 ? et "logo_commune1.gif" ?
 

Code :
  1. <body>
  3. <map name="carriole">
  5.   <area shape="rect" coords="31,48,177,193" href="#" onmouseover="changeImages('carte_gerenale_01', 'images/logos_chaines/logo_commune1.gif'); return true;">
  6.   <area shape="circle" coords="150,259,49" href="#">
  7.  
  8.    <img src="carrioleimg.jpg" width="300" height="553" border="0" usemap="#carriole" />
  11. </body>
  13. <script type="text/javascript">
  14. function affichage_text(text)
  15. {
  16.     document.getElementById('text_map').innerHTML  = text;
  17. }
  18. </script>
  19. <map name="carriole">
  20.   <area shape="rect" coords="31,48,177,193" href="#" onmouseover="affichage_text('NOM DE REVUE');>
  21. </map>
  22. <img src="carrioleimg.jpg" border="0" title="" alt="" usemap="#carriole" /><br />
  23. <div id="text_map" name="text_map"></div>
  25. </html>


 
http://imageshack.us/a/img208/2156/carrioleimg.jpg
(c'est un peu une image au hasard, ça changera...)

Reply

Marsh Posté le 20-10-2012 à 16:16:45    

DOUBLON


Message édité par Evidence_Fly le 20-10-2012 à 16:21:03
Reply

Marsh Posté le 24-10-2012 à 12:02:56    

Reply

Marsh Posté le 24-10-2012 à 12:21:14    

Mh.
J'ai essayé de me débrouillé avec ce vieux truc, je pense que ça va le faire.
http://logalisims.free.fr/Library/ [...] page01.htm
 
Si tu as une idée pour ici, je suis preneur...
http://forum.hardware.fr/hfr/Progr [...] 8023_1.htm

Reply

Sujets relatifs:

Leave a Replay

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