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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Image qui change en fonction position souris (Map Area + JS et/ou CSS)

zoukoufxxx

La bogossitude made in HFR

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...

Code :

<map name="carte">
<area shape="circle" coords="159,162,5" href="#" onmouseover="changeImages('carte_gerenale_01', 'images/logos_chaines/logo_commune1.gif'); return true;">
<area shape="circle" coords="183,167,5" href="#">
<area shape="circle" coords="193,154,5" href="#">
<area shape="circle" coords="221,153,4" href="#">
<area shape="circle" coords="198,232,4" href="#">
<area shape="circle" coords="209,230,4" href="#">
<area shape="circle" coords="123,225,4" href="#">
<area shape="circle" coords="83,193,5" href="#">
<area shape="circle" coords="220,87,5" href="#">
<area shape="circle" coords="245,75,5" href="#">
<area shape="circle" coords="225,59,4" href="#">
<area shape="circle" coords="232,62,4" href="#">
<area shape="circle" coords="242,64,4" href="#">
<area shape="circle" coords="155,17,6" href="#">
<area shape="circle" coords="133,13,5" href="#">
<area shape="circle" coords="145,6,5" href="#">
<area shape="circle" coords="135,69,5" href="#">
<area shape="circle" coords="135,96,4" href="#">
<area shape="circle" coords="62,90,4" href="#">
<area shape="circle" coords="101,95,5" href="#">
<area shape="circle" coords="109,117,5" href="#">
<area shape="circle" coords="84,110,4" href="#">
<area shape="circle" coords="77,119,4" href="#">
<area shape="circle" coords="71,112,5" href="#">
<area shape="circle" coords="66,116,4" href="#">
<area shape="circle" coords="69,133,4" href="#">
<area shape="circle" coords="76,132,4" href="#">
<area shape="circle" coords="73,142,4" href="#">
</map>
<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

Publicité

babasss

Code :

<script type="text/javascript">
function affichage_text(text)
{
    document.getElementById('text_map').innerHTML  = text;
}
</script>
<map name="carte"> 
  <area shape="circle" coords="183,167,5" href="#" onmouseover="affichage_text('Nom de ma ville');>
</map>
<img src="images/carte.gif" border="0" title="" alt="" usemap="#carte" /><br />
<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

zoukoufxxx

La bogossitude made in HFR

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

Evidence_Fly

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 :

<body>
<map name="carriole">
<area shape="rect" coords="31,48,177,193" href="#" onmouseover="changeImages('carte_gerenale_01', 'images/logos_chaines/logo_commune1.gif'); return true;">
<area shape="circle" coords="150,259,49" href="#">
<img src="carrioleimg.jpg" width="300" height="553" border="0" usemap="#carriole" />
</body>
<script type="text/javascript">
function affichage_text(text)
{
document.getElementById('text_map').innerHTML = text;
}
</script>
<map name="carriole">
<area shape="rect" coords="31,48,177,193" href="#" onmouseover="affichage_text('NOM DE REVUE');>
</map>
<img src="carrioleimg.jpg" border="0" title="" alt="" usemap="#carriole" /><br />
<div id="text_map" name="text_map"></div>
</html>

(c'est un peu une image au hasard, ça changera...)

Evidence_Fly

DOUBLON

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

zoukoufxxx

La bogossitude made in HFR

Tu y es arrivé ?

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

Evidence_Fly

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

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
Soucis au niveau de l'image du titre d'un menu.	tableau en argument de fonction et pointeur de pointeur
Choix automatique de CSS en fonction de la résolution du visiteur	Chargement d'une animation flash en fonction de l'heure
Tag de parties d'image	[RESOLU]fonction mail qui ouvre messagerie
Soucis CSS IE/Mozilla	[JavaScript] Faire retourner une fonction qui utilise XmlHttpRequest
Menu CSS
Plus de sujets relatifs à : Image qui change en fonction position souris (Map Area + JS et/ou CSS)

Page générée en 0.126 secondes