Salut,

tu peux le faire en html avec une simple image (<img>) et tracer des zones réactives avec <map>.
[ Mathieu ]

Il y a surement des pandas pour ne dépendre de rien

Mais comment tu défini ces zones réactives...
il faut pouvoir selectionner le pays (roll over ou quelque chose du genre pr que l'utilisateur sache bien sur quel pays il va cliquer) et donc il s'agit d'image independantes et en html je ne vois pas comment on fait ca...

merci :-)

J'ai été regarder le système mais il ne peut s'agir que de rectangle,cercle, poly..... comment fait on pour cliquer sur l'ensemble de la zone....est il possible de le faire sous html ou alors sous flash mais ou met on le code??

tte réponse est la bienvenue

Re,

désolé je cherchais depuis plus d'une demie heure une discussion à laquelle j'ai participé et où l'on a parlé de roll over sur une image mappée.

regarde cet exemple et dis nous si tu veux quelque chose comme çà.
[ Mathieu ]

Il y a surement des pandas pour ne dépendre de rien

En fait, il y une carte nue qui est mappée.
chacune des <area> qu'elle contient réagit au survol de la souris par un JavaScript qui affiche la même carte mais avec le canton mis en évidence plus le texte d'affiché.

donc une carte de fond + une carte par zone active, du JavaScript pour précharger toutes ces images et les afficher/masquer au survol.

pour faire les <area> si il y a beaucoup de zones ou si les zones ont des contours compliqués mieux vaut utiliser un logiciel, sinon tu vas galérer.
[ Mathieu ]

Il y a surement des pandas pour ne dépendre de rien

Ok je vois le pricipe mais concrêtement.......heu......pas du tt!!!
mais j'ai des tonnes de questions à te poser....
voila il me faut ma carte de base mais ensuite comment fais-tu pr mapper la carte?? ce que je ne comprend pas c'est que ce systeme de map ne peut fonctionner qu'avec des formes geometriques??
comment faire pr le roll over car il s'agit bien d'une zone défini ....manuellement??? enfin je veux que c'est moi qui vais récupérer cette zone (photoshop?)???

c'est peut être pas trés clair car j'ai du mal à voir comment réaliser ce systéme de map....

peux tu m'expliquer quelles st les étapes à suivre, les programmes à utiliser (simple et detaillé ;-))....que je sache par ou commencer

merci bcp.... :-)

Tu récupères ta carte, ensuite tu utilises un logiciel qui te permets de dessiner les <area> à la main.

essaies Amaya, crée un document, insère une image puis XHTML/Plan/Ellipse.
tu vois comment ça tourne et on en reparle ?
[ Mathieu ]

Il y a surement des pandas pour ne dépendre de rien

Ca marche.... a + tard

Re,

alors je suis sur amaya, j'ai importé ma carte mais ensuite je ne vois pas comment on sélectionne une zone... qd je fais XHTML/Plan/cercle il me met ' pas de position d'insertion definie. selectionner d'abord'

so, je peux avoir un indice..... :-) mais ou on selectionne???

merci

Salut,

pour importer ta carte tu as fait quoi ?

• Fichier/Nouveau/Nouveau document XHTML… (tu indiques où le créer et tu donnes un titre)
• XHTML/Image (tu indiques quelle image et tu donnes un texte 'alt')
• XHTML/Plan/Cercle (le curseur est en croix, tu fais un cliqué/glissé sur l'image pour dessiner le cercle)

ne t'inquiète pas si ton <area> n'est pas au bon endroit ou pas de la bonne taille, tu pourra tout redéfinir ensuite, au pixel près.
pour cela affiche les attributs de l'objet → Vues/Montrer les outils

tu peux aussi regarder dans Aide/Zone Active.
[ Mathieu ]

Il y a surement des pandas pour ne dépendre de rien

Ok j'avais pas fait comme ca en fait....normal que ca ne marche pas :-) j'aurai du commencer par l'aide!!

sinon faut-il tjrs mettre 'alt' dans texte de remplacement qd on ouvre l'image et qd on fait une selection???

ensuite lorsque j'ai fais ma selection il me demande d'inserer l'URI, que faire???
ce que je ne comprends tjrs pas c'est qu'il s'agit d'une selection en cercle alors que le pays n'est pas une forme geometrique....
je croyais qu'on avait une baguette magique ou un outil de selction comme il y en a dans photoshop....

merci, a +

"faut-il tjrs mettre 'alt' dans texte de remplacement qd on ouvre l'image et qd on fait une selection"
oui, pour que ton code soit valide.
tu dois mettre un texte qui sera affiché à la place de l'image si le fichier n'est pas trouvé ou si le navigateur de l'utilisateur n'affiche pas les images.

"il me demande d'insérer l'URI, que faire?"
tu vas utiliser Amaya uniquement pour faire la <map> donc tu peux te permettre de mettre une valeur farfelue, tu la remplacera après mais en le faisant proprement dès le départ ce sera toujours ça de fais…

quelle valeur mettre ? cela dépend de la façon dont tu organises ton site. en fait il faut mettre l'adresse de la page qui sera affichée quand l'utilisateur cliquera sur le lien.

tu devrais mettre dans l'URI quelque chose qui ressemble à :
http://www.monsite.fr/pays/guatemala.html" (l'adresse absolue de la page)
ou :
"pays/guatemala.html" (c'est l'adresse relative, plus pratique que l'adresse absolue).

"il s'agit d'une selection en cercle alors que le pays n'est pas une forme geometrique"
tu manques de curiosité !!!
essai avec XHTML/Plan/Polygone
tu cliques à chaque sommet de la figure que tu veux dessiner et tu double cliques pour fermer la figure.
par ailleurs, ce n'est pas grave si quelques pixels par ci par là ne sont pas exactement dans la zone, l'utilisateur avec sa souris n'atteint pas cette précision !

une fois que tu as fait toutes tes zones il faudra modifier le code source à la main pour ajouter le comportement en JavaScript.
[ Mathieu ]

Il y a surement des pandas pour ne dépendre de rien

Dacodac....merci

en fait je ne savais qu'on pouvais s'y prendre de cette manière....j'ai cru au départ qu'il fallait tracer direct un cercle ou un poly et qu'ensuite on prenait chauque point pr le déplacer... passons.....

maintenant que j'ai fais ma sélection j'ai une partie attributs dans laquelle s'affiche
alt alt
coords 140,21,140,39,148...bref c'est assez long car j'ai mis pas mal de point (burkina :-))
href www/pages/pro.bur.php/

j'ai fais une autre selection mais maintenant comment ca se passe pr la suite.....jsuis prête pr la suite des instructions :-)

Re,

un exemple qui te permettra de faire le reste, il n'y a qu'à afficher le code source et à s'en inspirer !
[ Mathieu ]

Il y a surement des pandas pour ne dépendre de rien

Configuration: Windows XP
Firefox 2.0.0.6

C tt à fait ce qu'il me fallait....

merci ca va bcp m'aider mais j'ai tt d'abord une question....le roll-over tu le fais sous amaya??? et comment? tu crées une autre image?? tu remplis ta selection d'une couleur....bref concretement comment tu t'y prends??? ca peut paraitre un peu bête mais finalement la je suis concée!!!

gracias

Configuration: Windows XP
Firefox 2.0.0.1

Pr le roll over je ne connais pas du tt amaya....est ce que tu fais un remplacement d'image avec une autre image pas forcement crée sous amaya et que tu mets dans le même dossier à la racine du site...bref je ne sais pas...

Configuration: Windows XP
Firefox 2.0.0.1

Salut,

le rectangle principal (jaune) est une balise '<img>' associée à une carte de zones réactives ('<map>'), le comportement au survol est codé en Javascript.

<img
	id="plan"
	alt="Carré jaune bordé de orange avec trois motifs tracés en trait orange : un cercle, un triangle et un rectangle."
	src="ressources/map_default.png"
	width="640"
	height="480"
	usemap="#map" />

<map name="map" id="map">
  <area 
	shape="circle"
	coords="500,360,100"
	alt="Cercle orange sur fond jaune"
	href="img_map_circle.html" 
	onmouseover="changeImage(1); return false;"
	onmouseout="changeImage(0); return false;" />
[&hellip;]
</map>

if (document.images)
{
	preload = false;

	url = new Array();
	url[0] = "ressources/map_default.png";
	url[1] = "ressources/map_circle.png";
	url[2] = "ressources/map_poly.png";
	url[3] = "ressources/map_rect.png";

	var i = 0;
	for(i=0; i<4; i++)
	{
		tmp = new Image(640, 480)
		tmp.src = url[i];
	}
	preload = true;
}
}

function changeImage(img_index) {
	if (document.images && (preload == true)) {
		document.plan.src = url[img_index];
	}
}

Il y a surement des pandas pour ne dépendre de rien

Aie!!!! c bien compliqué tt ca....mais bon j'ai mis le code sur ma page avec la carte du monde et effectivement lorsque je survol la zone définie mon curseur change...c donc ma zone active jusqu'ici tt va bien....

par contre le code "if..." tu le mets dans des balises <script></script> n'est ce pas??? je ne connais pas le javascript...et tu mets le code ou tu veux dans ta page??

ensuite lorsque je clique sur ma zone je ne me rends pas à la page souhaitée mais j'ai :

Fatal error:call to undefined function:
traduction() in c:\program files\easyphp1-7
\www\www\pages\pro.bur.center.php on line 9

en effet a cette page j'ai une fonction traduction pr le titre car c un site multilingue mais qu'est ce que ca vient faire la dedans???

merci en tt cas pr tte ces explications...ca m'aide bcp et ca simplifie nettement la chose!!!

a bientôt

Configuration: Windows XP
Firefox 2.0.0.1