Affichage des articles dont le libellé est map. Afficher tous les articles
Affichage des articles dont le libellé est map. Afficher tous les articles

11 août 2010

Afficher une carte de votre ville

Première solution :

Allez chez SEEKCODE

En face d'adresse, saisissez le nom de la ville.
<embed src="http://www.seekcodes.com/maplocator/show.swf?&baseURL=http://www.seekcodes.com/maplocator/
&clickURL=http://www.seekcodes.com&clickLABEL=Map Located at SeekCodes.com&rect=off&w=444&h=384&address=Saint%20Petersbourg&index=J%27adore%20cette%20
ville%0D&title=&description=%0D&zoom=10&marker=10027161&stroke=16776960" quality="high" bgcolor="#ffffff" width="444" height="384" name="show" align="middle"
allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /><br><a href=http://www.seekcodes.com>Map Located at
SeekCodes.com</a>
Copiez le code et collez le en HTML



Seconde solution :

Si vous voulez ajouter la vue aérienne de n'importe quel endroit du globe, rendez vous sur wikimapia.org. Ce site allie les vues satellite de Google map avec le concept de wikipedia, c'est à dire que la carte est annotée par les visiteurs qui désirent partager leurs connaissances.

La procédure est simplissime. Une fois que vous avez sélectionné votre vue, cliquez sur wikimapia en haut à gauche puis sur "Map on your page". Copiez le code qui vous est fourni à l'endroit où vous voulez placer votre vue.

Ex :
<iframe src="http://wikimapia.org/s/#y=45433620&amp;x=12339771&amp;z=17&amp;l=0&amp;m=a&amp;v=2" frameborder="0" width="450"
height="250"></iframe>


Vous pouvez bien sûr ajuster la taille de l'image sur le site site par le biais des zooms ou tout simplement en jouant sur "width"(largeur) et "height" (hauteur).

Et voila une vue de la Place Saint-Marc de Venise



Notez que votre image garde les mêmes propriétés que sur le site wikimapia et que donc tous les visiteurs peuvent zoomer ou déplacer la vue en maintenant le clic sur la carte et en bougeant la souris.

9 août 2010

Créer un mapping

Un map est une image comprenant plusieurs zones. Sur chacune de ces zones, on crée un lien qui renvoie à une page. C'est essentiellement utilisé pour faire des menus, des cartes géographiques...

Dans ce cas précis, on va créer un menu.

L'exercice n'est pas très difficile, il faut seulement être minutieux et attentif.

Première étape : concevoir votre menu.

Je travaille sous Paint Shop Pro, mais vous pouvez utiliser tout logiciel de dessin un peu évolué (photophiltre, photoshop, etc...)

Je réalise mon menu : Il s'agit d'une image avec fond transparent.



Deuxième étape : trouver les coordonnées de chacune des zones

Sur PSP : Fichier - Exporté - Image cliquable

Une fenêtre s'ouvre



Avec la flèche, le carré ou le rond (selon la forme du dessin à entourer) du menu outils, je délimite le 1er encart de mon menu (on le voit en vert) qui mène vers Les premiers pas en confiance.

Vous pouvez observer sur cette fenêtre les coordonnées de cet encart


Gauche

12

Haut

11

Droite

193

Bas

114

On va les noter sous cette forme :
12,11,193,114

Pour réitérer l'opération sur le sommaire suivant, je clique sur le + dans la 1ère ligne à droite pour faire glisser le dessin vers le bas.

Dans mon exemple, les coordonnées précises de chaque encart sont


Les premiers pas en confiance

11,9,193,112

Ajouter, enlever, déplacer ou masquer

13,150,194,250

Ascenseurs

11,290,193,393

3ème étape : sur le blog

Vous avez hébergé votre image et obtenu une adresse.

La mienne est http://www.casimages.com/img/gif/0707200724166265884263.gif

En HTML, vous copiez ce pavé
<img border="0" alt="texte au survol de la souris" src="adresse de l'image" usemap="#nom
du Map
" /> <map id="nom Map" name="nom Map ">
<area alt="Nom lien 1" href="URL 1" coords="11,9,193,112" shape="RECT" />
<area alt="Nom lien 2" href="URL 2" coords="13,150,194,250" shape="RECT"/>
<area alt="Nom lien 3" href="URL3" coords="11,290,193,393" shape="RECT" />
</map>

Vous pouvez rajouter autant de lignes
<area alt="Nom lien 3" href="URL3" coords="11,290,193,393" shape="RECT" />
que besoin est, avant le </map> final

Vous personnalisez ensuite les mots en couleur.

Dans mon cas, j'obtiens
<img border="0" alt="Menu des ficelles" src="http://www.casimages.com/img/gif/0707200724166265884263.gif" usemap="#Menu" />
<map id="Menu" name="Menu ">
<area alt="Les premiers pas en confiance" href="http://annak.over-blog.com/article-3254809.html" coords="11,9,193,112" shape="RECT" />
<area alt="Ajouter, enlever, déplacer ou masquer" href="http://annak.over-blog.com/article-3250730.html" coords="13,150,194,250" shape="RECT" />
<area alt="Ascenseur" href="http://annak.over-blog.com/article-3250425.html" coords="11,290,193,393" shape="RECT" />
</map>
Et voici le résultat : en cliquant sur chaque case, on arrive sur le sommaire correspondant

Menu des ficelles

Les premiers pas en confiance
Ajouter, enlever, déplacer ou masquer
Ascenseur