Discussion :

[longbeach]

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.

[Lorenzo77]

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

[longbeach]

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

Fichier MXML principal:

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

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

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.

[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

[jylaxx]

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

[longbeach]

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