1
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
kilian, le mercredi 2 mars 2005 à 21:26:52 Salut,
Regarde en haut à gauche sur cette page. Lorsque la souris passe au dessus de l'image de la maison, ou celle de l'imprimante etc... l'image se met soudain à changer.
A l'évènement onMouseover la page affiche telle image, avec onMouseout c'en est une autre.
Tu as juste à faire un peu la même chose avec onClick.Mais il faut pour ça que ton image soit découpée en plusieurs images. Et il faut que ces images possèdent leur double en surbrillance dans d'autres fichiers image....
Exemple tu affiches une image de commune comme ceci:
<img src="./commune.jpg" name="Nom_de_commune">
Puis plus loin, tu crées un lien avec le nom de ta commune:
<a href="/" onClick="document.Nom_de_commune.src='./commune_surbrillance.jpg'";>La commune que tu veux</a>
Voilà, c'est assez inspiré de la source de la page où nous sommes, je pense que ça devrait marcher... C'est une solution comme une autre bien sûr....
2
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
franck, le mercredi 2 mars 2005 à 21:44:11 Merci kilian, j'ai compris ce que tu as dit (mouse over et mouse out) mais il faudrait remonter ton explication en amont car je ne sais pas où inscrire toutes ces informations ...! |
3
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
kilian, le mercredi 2 mars 2005 à 22:04:06 En fait pour commencer, imaginons que tu aies la carte de France (je prends ça comme exemple vu que je ne connais pas ta region).
A partir de cette carte globale tu crées plein de petites images, une pour chaque region... Il faudra découper ta carte avec un logiciel de tratement d'image. Et pour chacune de ces images-region, tu en crées une nouvelle avec des tons plus rouges ou..comme tu veux, ce sera tes images de surbrillance, il faut qu'elles soient de même taille que les originales).
Sur une page html tu reconstruis ta carte à partir de toutes ces images (celles qui ne sont pas en surbrillance), comme avec un puzzle. Ce sera peut être un peu fastidieux de faire ça directement en code html, essaie avec un logiciel comme dreamweaver (ou n'importe quel logiciel de ce genre).
Après tu retravaille le code html, par exemple pour <img src="./ile_de_france">, tu remplaces par <img src="./ile_de_france" name="ile_de_france">
Le name sera en quelque sorte le référent de ton image.
Une fois que tu as donné un name à toutes tes images-regions, tu peux t'occuper des liens, par exemple pour le lien qui va vers l'image d'ile de france ça donne:
<a href="/" onClick="document.ile_de_france.src='./ile_de_france_surbrillance.jpg'">Carte de l'île de france</a>
Je t'explique ce que ça donne: une fois que tu cliques sur ce lien, la page cherche un truc qui a pour nom (notre fameux name) ile_de_france, il trouvera cet endroit, et en changera l'argument "src" pour lui dire de pointer vers une autre image.
Toutes les images seront ensemble dans un coin, et les liens seront ensemble dans un autre coin.
Tu devrais te retrouver avec un paragraphe d'insertion d'image, et un autre paragraphe d'insertion de liens. L'emplacement des liens et des images, ça c'est à toi de choisir. Tu peux, comme je le précisais avant, faire ta mise en page avec un logiciel comme nvu ou deamweaver, puis retoucher le code html après...
Recherche s'il n'existe pas une solution un peu moins lourde, personnelement je ne suis pas spécialiste en la matière.... et je ne voudrais pas te faire découper ta carte pour rien :-)
4
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
franck, le mercredi 2 mars 2005 à 22:19:39 Merci peut etre qu'avec mouseover/mouseout ce sera plus simple ...? |
5
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
kilian, le mercredi 2 mars 2005 à 22:35:14 Ca reviendra au même, sauf que l'image changera lorsque le curseur passera sur le lien, ou l'image....au lieu de cliquer dessus.
Je viens de tester ce que je t'ai proposé, apparemment il faut changer:
<a href="/" onClick="document.ile_de_france.src='./ile_de_france_surbrillance.jpg'">Carte de l'île de france</a>
En:
<a href="javascript:;" onClick="document.ile_de_france.src='./ile_de_france_surbrillance.jpg'">Carte de l'île de france</a>
Dixit la source de cette page :-)
http://www.commentcamarche.net/javascript/jsevent.php3
Désolé, je ne connais pas d'autre methode :-(
6
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
franck, le jeudi 3 mars 2005 à 08:12:24 si je comprends bien mon département compte 139 communes, je dois
- les prendre 1 à1 et leur faire correspondre une meme image d'une couleur différente ;
- les prendre 1 à 1 et leur faire correspondre un lien correspondant à leur nom dont la liste est disposée à coté ;
ok
mais sur quel support dois inscrire tout celà ... ?
je vous rappelle que mon dessin est sur paint.
Merci ! |
7
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
Bobby, le jeudi 3 mars 2005 à 14:37:56 hello
en fait on dirais que tu ne sais pas de quoi il parle (si tu sais c con).
Pour être simple, il te propose de faire ton truc en HTML, ie en temps que page web ;-)))) ?oui?
Tu devrais donc te mettre au HTML ,langage avec lequel est réalisé des pages web (celle sur lequelle tu vois la page)
tapes cela dans le bloc-notes pour commencer, et enregistre cela en fichier.html :
<html>
<body>
<img src="ton_image"
onmouseover="javascript:src=tonimageSurbrillance"
onmouseout="javascript:src=tonimage" border=0>
</body>
</html>
-------
tonimage se trouve dans le meme répertoire que ton fichier.html ici.
[a moins que g rien compris]
good luck
8
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
franck, le jeudi 3 mars 2005 à 19:28:27 Merci Bobby, ça y est j'ai créé ma page html ( c'est la premiere fois) , dois insérer ma carte dedans ou procéder aux découpages comme on l'a dit ? |
9
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
kilian, le jeudi 3 mars 2005 à 21:26:07 139 communes ça va être long O_o
En fait il faudrait que tu selectionnes des cercles qui entourent les communes (dans le traitement de l'image, pas dans la page web) et tu coupes ces images(je parle bien du couper dans le menu edition) . Avec ces cercles découpés qui contiennent chacun une commune, tu crées de nouvelles images que tu enregistres en jpg avec le nom de la commune.
Et tu crées des images parallèles en reprenant tes cercles et en leur rajoutant des tons plus vifs (ce seront les images de surbrillance.)
A la fin tu devrais te retrouver avec un lambeau de carte de ta region, sans les zone crirculaires avec tes communes. A partir de ça il faudra tout reconstituer sur une page web .........Cercle par cercle :-s
Avec des cercles ce sera plus simple et plus rapide. Et avec ça, lorsque tu cliqueras sur un lien de commune, une zone circulaire qui entoure et contient ta commune sera mise en surbrillance.
Ensuite si tu n'as jamais touché au langage Html je te conseille vivement de t'y mettre :-)
Ne serait ce que comprendre les bases, ce sera essentiel, même si tu crées ta page avec un editeur de page au lieu de taper le code html à la main, il faudra y retoucher du code html...
Tu peux regarder sur ce site, il ya un bon tutoriel html sur la page d'accueil.
Et regarde par là aussi:
http://www.commentcamarche.net/faq/?cat=9
Ensuite fais un petit test de ce que je t'ai expliqué avec une petite zone de ta carte, 2 ou trois communes au plus....(découpage de l'image, edition de ta page web....) histoire que tu comprennes le fonctionnement avant de te lancer dans tout ça...
Et paint me parait un peu limité pour travailler ta carte...
Jète un coup d'oeil sur Gimp, c'est gratuit et très pratique:
http://www.commentcamarche.net/faq/sujet-1295-%5BGimp%5D-Autre-alternative-Free-%E0-Photoshop
Tu as d'autres logiciels comme photoshop bien sûr...
10
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
franck, le jeudi 3 mars 2005 à 23:07:06 bonsoir Killian, j'ai téléchargé et installé NVU
Par ailleurs je commence à découper chaque image "communes du Var" mais pas avec des cercles mais au détail prés.
Te tiendrais au courant si toutefois tu reste disponible
merci franck |
11
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
kilian, le jeudi 3 mars 2005 à 23:15:02 Au détail près avec 130 communes?
Ca va être long...
Et comme je te le disais, fais d'abord un test avec une petite zone de ta carte qui possède deux ou trois communes... Ne serait ce que pour voir ce que ça donne, si c'est réellement faisable etc... |
12
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
kilian, le jeudi 3 mars 2005 à 23:23:01 Ah mais j'y pense, oui tu es bien obligé de découper ta carte en plusieurs morceaux comme un puzzle, puisque tu ne pourras pas insérer tes images au milieux de la carte principale..
Chuis bête.
Oui le test c'est important pour voir ce que ça donne de reconstruire une image à partir de plusieurs autres, voir si ce n'est pas trop compliqué etc.... |
13
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
kilian, le jeudi 3 mars 2005 à 23:48:46 D'ailleurs en y repensant bien ce doit être très compliqué de réussir à réassembler une carte comme ça... C'est compliqué de placer une image à un endroit très précis sur une page html...
Argh essaie toujours mais j'espère que je ne t'ai pas emmené dans une impasse. Les cartes que je vois sur le net ne sont pas découpées comme ça image par image... |
14
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
kilian, le jeudi 3 mars 2005 à 23:59:38 Ah si, avec l'aide du Css :-)
http://www.netalya.com/fr/css-5.asp
Du coup ça rendra les choses encore plus compliquées mais bon....
15
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
franck, le vendredi 4 mars 2005 à 00:47:53 j'ai découpé quelques communes : j'ai commencé par éditer 2 memes cartes 1 blanche rien qu'avec les contours (qui devra me servir de base, 1 de couleur qui une fois découpée, dédoublerai avec une autre couleur (surbrillance).
mais où dois stocker ces images une à une ? est qu'elles doivent etre dans un fichier chacune différemment ... ou bien toutes sur la meme page ? |
16
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
Bobby (ou edoc), le vendredi 4 mars 2005 à 12:43:10 hello
changfement de technique,qui me semble plus simple:
alors voila j'ai un peu bossé pour toi:
je te conseilles d'aller voir ici:
->site iq.c.la puis
-> Carte (pour Franck !)
et la je t'ai mis un exemple sur la cote-d'or (dijon)
pour voir le code, fais bouton droit en dehors de l'image et fais "afficher la source".
j'espere que ca peut t'aider; cette technique t'évitera d'avoir à découper ton image.
20
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
franck, le samedi 5 mars 2005 à 10:33:51 merci bobby, est ce que je dois recopier ce programme html pour chaque commune ?
est ce que je dois écrire tout celà dans le bloc note ?
est ce que je dois les écrire les uns à la suite des autres ? |
|
17
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
Bobby, le vendredi 4 mars 2005 à 12:48:39 pour le code source je vais le mettre sur la page elle-même.
;-) |
18
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
kilian, le vendredi 4 mars 2005 à 18:01:26 Salut Bobby,
Relis bien son premier message, il ne veux pas une carte cliquable.
Ce qu'il voudrait, ce serait par exemple une carte avec une ville, et lorsqu'il clique sur un lien en dehors de l'image, par exemple un lien nommé "paris", la commune de paris s'affiche en surbrillance sur sa carte.
C'est vrai que ce serait beaucoup plus simple si Franck voulait faire ça...
Par contre c'est sympathique ce que tu as fait :-)
Pour Franck => il faut que tu sépares tes images dans des fichiers différents pour chacune. Une image pour chaque commune et une image pour chaque commune en surbrillance....
Pense à regader les cours d'html ici, surtout pour les images et les liens histoire que tu te représentes le fonctionnement...
19
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
franck, le samedi 5 mars 2005 à 09:27:14 Killian, quel est le nom du site que tu me conseille ;;; je ne le trouve pas ! |
21
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
kilian, le samedi 5 mars 2005 à 12:08:17 Répondre à kilian
22
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
franck, le samedi 5 mars 2005 à 22:21:22 Bien après avoir réfléchi je vais me contenter d'une carte simple où seul le déplacement de la sourie mettra en surbrillance la commune avec son nom... ce sera sans doute plus simple pour moi et un bon début.
24
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
kilian, le lundi 7 mars 2005 à 17:22:34 Salut,
Non ce sera aussi compliqué :-)
Si tu veux un truc plus simple, ce serait de faire une carte cliquable. Là tu n'aurais besoin que de délimiter des zones virtuelles dans ton image plutôt que de la découper et la réassembler... |
|
|
|
|
|
|
|
|
|
