Image Map (cliquable) avec fichier .map contenant les coordonnées

**minogttao** · 31/07/2007, 09h28

Bonjour,

Je suis à la recherche d'un moyen de changer le nombre de zones cliquables et leurs poisitons en fonction d'une variable Pictindex (numéro du dessin affiché)

Je souhaite rendre cliquable les numéros des pièces sur un dessin technique d'un mécanisme.

Pourriez vous m'indiquer la marche à suivre.

Merci

**titfab** · 03/08/2007, 12h05

Tu peux mettre ton découpage de dessin technique dans ta page en utilisant le système de map HTML.

**minogttao** · 04/08/2007, 16h11

Merci

J'avais vu cette solution elle est simple à mettre en oeuvre mais j'ai plus de 200 images dans lesquelles j'ai en moyenne 20 numéros de pièces à rendre cliquable.

C'est pour cela que je trouvais séduisant l'idée de créer un fichier .map par image pour faciliter la maintenance.

En tout cas il faut que je stocks prés de 4000 positions avec adresses associées.

J'avais pensé à utiliser la base sql dans laquelles je stocks les informations relatives aux pièces mais je préfére ne pas surcharger ma base avec une requête à chaque mouvement de souris.

L'idéal serait que j'arrive à modifier le code suivant pour faire varier le nombre de zones cliquables et les coordonnées et adresses associées en fonction du numéro d'image chargée à l'écran.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
26
27
28
29
30
31
32
33
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Texte du titre</title>
</head>
<body>
 
<h1>Vite à la ville ou région de votre choix!</h1>
 
<map name="carte">
<area shape="rect" coords="11,10,59,29" href="http://www.koblenz.de/" alt="Coblence">
<area shape="rect" coords="42,36,96,57" href="http://www.wiesbaden.de/" alt="Wiesbaden">
<area shape="rect" coords="42,59,78,80" href="http://www.mainz.de/" alt="Mayence">
<area shape="rect" coords="100,26,152,58" href="http://www.frankfurt.de/" alt="Francfort">
<area shape="rect" coords="27,113,93,134" href="http://www.mannheim.de/" alt="Mannheim">
<area shape="rect" coords="100,138,163,159" href="http://www.heidelberg.de/" alt="Heidelberg">
<area shape="rect" coords="207,77,266,101" href="http://www.wuerzburg.de/" alt="W&uuml;rzburg">
<area shape="rect" coords="282,62,344,85" href="http://www.bamberg.de/" alt="Bamberg">
<area shape="rect" coords="255,132,316,150" href="http://www.nuernberg.de/" alt="Nuremberg">
<area shape="rect" coords="78,182,132,200" href="http://www.karlsruhe.de/" alt="Karlsruhe">
<area shape="rect" coords="142,169,200,193" href="http://www.heilbronn.de/" alt="Heilbronn">
<area shape="rect" coords="140,209,198,230" href="http://www.stuttgart.de/" alt="Stuttgart">
<area shape="rect" coords="187,263,222,281" href="http://www.ulm.de/" alt="Ulm">
<area shape="rect" coords="249,278,304,297" href="http://www.augsburg.de/" alt="Augsbourg">
<area shape="poly" coords="48,311,105,248,96,210,75,205,38,234,8,310"
      href="http://www.baden-aktuell.de/" alt="Baden">
</map>
 
<p><img src="carte.gif" width="345" height="312" border="0" alt="carte" usemap="#carte"></p>
 
</body>
</html>

Je vous tiens informé, j'essai ce soir

**minogttao** · 04/08/2007, 21h29

Voila ce que j'ai essayé mais cela ne fonctionne pas, j'ai également essayé de mettre des variables dans la ligne sous cette forme mais sans succés.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<area shape="rect" coords="X,Y,L,M" href="Info.php" alt="1"

J'ai besoin de votre aide car j'ai l'impression d'avoir retourner le problème dans tout les sens, et pas de résultat

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<html>
<head>
</head>
<body>
 
<script type="text/javascript">
function change() {
        var X = 1;
        var Y = 1;
        var L = 100;
        var M = 100;
        document.carte.coords = X +','+ Y +','+ L +','+ M;
        }
</script>
 
<map name="carte">
<area shape="rect" coords="1,1,100,100" href="Info.php" alt="1"
</map>
 
<p><img src="test.jpg" width="875" height="718" border="0" alt="carte" usemap="#carte"></p>
 
 <input name="button" type="button" onClick="change()" value="Change">
 
</body>
</html>

Merci

**titfab** · 06/08/2007, 10h04

Je peux corriger ton code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
</head>
<body>
 <script type="text/javascript">
  function change() {
    var X = 1;
    var Y = 1;
    var L = 100;
    var M = 100;
    document.getElementById('maZone').coords = X +','+ Y +','+ L +','+ M; 
   }
 </script>
 <map name="carte">
   <area id="maZone" shape="rect" coords="1,1,100,100" href="Info.php" alt="1"/>
 </map> 
<p>
<img src="test.jpg" width="875" height="718" border="0" alt="carte" usemap="#carte">
</p> 
<input name="button" type="button" onClick="change()" value="Change">
</body>
</html>

Mais je vois que tu utilise un serveur PHP.
Tu peux utiliser ton idée de fichier "map" avec des instructions PHP ...

**minogttao** · 07/08/2007, 18h41

Merci beaucoup le code corrigé fonctionne parfaitement

Pour l'instant je me réfugie dans le javascript et je me limite au php pour la liaison à ma base sql.

Mais j'aimerais bien que tu développes un peu un moyen d'effectuer cela en php à partir de données issu d'un fichier .map au cas ou je changerais d'avis.

@+

Image Map (cliquable) avec fichier .map contenant les coordonnées

HTML

Vue hybride

Discussions similaires

Partager

Partager