Coordonnées d'une image réactive

Version imprimable

Bonjour,

J'aimerais mettre des couleurs lorsque la souris passe sur l'objet (carte geographique) et savoir comment on fait pour calculer les coordonnées d'une image.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Liens et image sensible</title>
</head>
<body>
<div>
<h1>Les sites des Communes</h1>
<map id="regions">
<area href="" alt="Région Centre" title="Région Centre"
. shape="rect" coords="142,118,188,180" />
 
<area nohref="nohref" onclick="alert(‘Visitez la plus belle ville du monde’)"
. alt="Région parisienne" title="Région parisienne" shape="circle"
. coords="180,98,16" />
 
<area href="http://www.nantes.fr" onfocus="alert(‘Nantes en plein
. développement’)" alt="Pays de Loire" title="Pays de Loire" shape="poly"
. coords="76,146,95,110,138,130,94,182,76,146" />
</map>
<img usemap="#regions" src="C:\Documents and Settings\lagavatx\Bureau\test_carte_dynamique\Carte-Grand-Toulouse.png" alt="Carte des régions"
. width="344" height="336"/>
</div>
</body>

Merci pour votre aide,

Bonne journée

Bonjour !

essaye ==>

Code:

1
2
 
<font onMouseOver="this.style.color=''code de couleur lorsque la souris passe sur l'objet" onMouseOut="this.style.color=''code de couleur lorsque la souris est hors de l'objet">

12/08/2011, 12h39
Gaetan_

Bonjour,

Avec du JQuery c'est possible : jQuery maphilight

Regarde http://davidlynch.org/js/maphilight/docs/ tu as ta solution.

A++
12/08/2011, 13h51
Marc31

Merci pour les réponses mais je le mets où ce code?

Code:

<font onMouseOver="this.style.color='red'" onMouseOut="this.style.color='blue'">

Et pour le JQuery je comprends pas trop non plus comment ça marche...je suis désolé
12/08/2011, 13h57
Bovino

Citation:

Envoyé par peter11

Merci pour les réponses mais je le mets où ce code?

Code:

<font onMouseOver="this.style.color='red'" onMouseOut="this.style.color='blue'">

Ne le mets nulle part, c'est n'importe quoi et ne répond pas à ta demande... :aie:

Regarde plutôt du coté des contributions : Image map et changement de couleur de l'area au survol :)