Aires clickables d'une image ?

Version imprimable

01/06/2009, 17h19
longbeach

Aires clickables d'une image ?

Bonjour,
j'ai une carte de France à gauche et j'ai un panel à droite.
Je veux rendre des villes de carte clickables et pouvoir afficher des infos sur la ville clickée dans le panel de droite.

1) Comment on rend clickable des endroits précis d'une image ?
2) comment gérer l'interaction avec le panel de droite ?

Merci d'avance.
01/06/2009, 17h30
Lorenzo77

des boutons invisibles sur les zones a cliquer !
et de l'AS pour gerer les evenements ..

ok, merci pour l'idée.
En fait j'ai commencé à faire ça :

Fichier MXML principal:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:cartes="carte.*" >
 
	<mx:Panel title="HDividedBox Container Example" width="90%" height="90%" 
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
 
		<mx:HDividedBox width="100%" height="100%">
				<cartes:carte id="cartedefrance" width="50%" height="100%"  />
	            <mx:Canvas label="Canvas 2" width="100%" height="100%" backgroundColor="#99CCFF">
	                <mx:Label text="Add components here" fontWeight="bold"/>
	            </mx:Canvas>
		</mx:HDividedBox>
    </mx:Panel>
 
</mx:Application>

Carte.xml

Code:

1
2
3
4
5
6
7
8
 
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" backgroundColor="#FFFFCC">
	  <mx:Label text="La carte de France" fontWeight="bold"/>
               <mx:Image source="images/carte_france_fr.gif" scaleContent="true" autoLoad="true" width="100%" height="100%" id="carte_fr" x="0"/>
               <mx:Button x="122" y="62" label="Button" enabled="true" visible="true"/>
 
</mx:Canvas>

Là j'ai positionné un bouton invisible sur Paris, mais :
1) déjà l'image occupe pas tout l'espace du Canvas, comment faire ?
2) au rendu, le bouton est plutôt sur la Bretagne
3) si je m'amuse à deplacer le divider vers la gauche ou la droite, la carte retrecit ou s'elargit mais les boutons restent aux mêmes coordonnées (x,y) par rapport au Canvas !

Merci pour votre aide.

01/06/2009, 19h14
Lorenzo77

tu n'as pas du utiliser la bonne technique ... vu ce que tu veux faire, il est preferable d'utiliser Flash plutot que Flex, ca sera + simple !
mais c'est faisable avec Flex, avec un peu plus de rigueur et de precision
02/06/2009, 14h01
jylaxx

Le composant flexlib.controls.ImageMap devrait faire l'affaire...
02/06/2009, 15h01
longbeach

Citation:

Envoyé par jylaxx

Le composant flexlib.controls.ImageMap devrait faire l'affaire...

Dommage que tu ne m'en ai pas parlé plus tôt.
J'ai en fait créé un Canvas et je lui ai mis l'image en background. J'ai évidemment redimensionné le Canvas à la même taille que l'image (width et height).

Puis je mets des Canvas invisibles sur les villes et je les rends clickables.

Tu as un exemple d'utilisation du composant flexlib.controls.ImageMap ?

Merci
02/06/2009, 15h10
jylaxx

Citation:

Dommage que tu ne m'en ai pas parlé plus tôt.

LOL... Vraiment désolé !!!!!

Citation:

Tu as un exemple d'utilisation du composant flexlib.controls.ImageMap ?

http://flexlib.googlecode.com/svn/tr...Map_Sample.swf

Il existe un chouette outils qui s'appelle Google, j'ai tapé "flexlib imagemap" et je suis tombé sur ce lien... Incroyable non !