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

Version imprimable

31/07/2007, 09h28
minogttao

Image Map (cliquable) avec area shape à coordonnées variables ??

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
03/08/2007, 12h05
titfab

Tout dans ta page

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

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:

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ü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 :roll:

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:

<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 :arf:
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 <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

Correction

Je peux corriger ton code :

Code:

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

07/08/2007, 18h41
minogttao

Merci beaucoup le code corrigé fonctionne parfaitement :P

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

@+
08/08/2007, 10h04
titfab

1 pièce(s) jointe(s)

Pas gonflé de demander ça !! ...

M'enfin ! Ca m'a pris une demi-heure !

L'exemple d'utilisation est dans le fichier "index.php".
Ton fichier map est constitué ainsi :
coordonnées;url_destination;info_bulle

avec coordonnées les coordonnées de ta zone séparées par des virgules.

Tu peux changer le séparateur de champ ";" en autre chose. Il est défini dans le code de lectureMap.php.

J'espère que tu as toutes les cartes en main pour faire ce que tu souhaite ...
08/08/2007, 21h59
minogttao

:salut:

La traitement du fichier ressemble à ce que je sais faire en langage c mais je suis sûr que j'aurai mis plus de 30 min car je ne suis pas encore acoutumé à la syntaxe php :traine: .

J'ai maintenant tout ce dont j'ai besoin pour faire avancer mon projet, je pense que je vais faire un mix php javascipt en utilisant ton code :ccool:

Encore merci le problème est résolu