[Résolu][HTML] Zone clickable sur image

[BaK]

Hello!

 

J'ai une image sur une page web, sur laquelle je veux définir une zone. Cette zone va réagir au passage de la souris et permettre à l'utilisateur, en cliquant dessus, d'être redirigé à un autre endroit de ma page web.

 

le code est de ce type:

				  <DIV ALIGN=LEFT>
			  <MAP NAME="Ensemble">
				  <AREA
					 HREF="#no1.1" ALT="Rechercher" TITLE="Rechercher"
					 SHAPE=RECT COORDS="350,1,450,130">
			  </MAP>

				  <IMG SRC="Z:\Plan_de_ville\Images\Ensemble.JPG"
					 ALT="Interface utilisateur" BORDER=0 WIDTH=450 HEIGHT=330
					 USEMAP="#Ensemble"><BR>
			   </div>

 

C'est la partie où il faut définir les coordonnées de la zone qui me pose problème:

SHAPE=RECT COORDS="350,1,450,130"

 

Il s'agit donc d'une zone rectangulaire, définie par le coin supérieur gauche (350,1) et par le coin inférieur droit (450,130).

 

Pour connaître ces 2 paires de coordonnées, j'ai pensé utiliser Paint qui indique la position de la souris sur l'image. Malheureusement, si je prends les coord. que m'indique Paint (ou Microsoft Photo Editor), la zone ainsi définie n'est pas la bonne sur ma page web!

 

Auriez-vous un moyen de déterminer correctement ces coordonnées?

 

 

Merci, a+

Modifié le 2 novembre 2006 par BaK

[Berfizan]

Bonjour

 

< Ce lien semble répondre à ton problème >

[BaK]

Salut Berfizan!

 

L'idée est bonne merci pour ta réponse!

 

Je viens de tester le script, il fonctionne bien, mais il indique la coord. de la souris par rapport à sa position sur tout l'écran!

 

Or dans mon cas, le système de coord. doit se restreindre à l'image uniquement!

 

Je pourrais m'en servir en cherchant le décalage systématique, mais finalement j'ai remarqué que je peux faire de même depuis Paint. Mon image doit être légèrement déformée par rapport à l'original, de par le fait que je l'insère dans un cadre (table). D'où des coordonnées erronnées!

 

A ma calculatrice!

 

++

 

 

EDIT: Ben non, le décalage n'est pas constant, autant en X qu'en Y!

Modifié le 1 novembre 2006 par BaK

[alex.hitman]

Salut, je pense que ce lien

http://www.siteduzero.com/tuto-3-928-1-ima...graphiques.html

répond à toutes tes attentes.

[BaK]

Salut alex.hitman, merci pour ton lien!

 

Dernière chose, pour connaître les coordonnées nécessaires à votre map, je vous conseille paint, simple et efficace (les coordonnées sont en bas à droite).

 

Mon image doit bel est bien être réduite, c'est pour cela que ça ne marche pas!

 

Je vais tester ce MapThis, mais ils précisent bien que: 'Sélectionnez ensuite l'image sur laquelle vous voulez faire un mapping (elle doit être déjà de la bonne taille)'

 

Faut donc que je retravaille mon image pour lui donner les mêmes dimensions que celles affichées sur ma page web!

 

Encore merci, a+