Création map interactive

Version imprimable

29/04/2013, 16h21
kerozen77

Création map interactive

Bonjours,

Je suis actuellement en stage, et mon responsable de stage souhaiterais que je créée un plan d'un centre commercial interactif. Je m'explique, via cette image: http://www.hostingpics.net/viewer.php?id=273681plan.jpg
je dois faire, que lorsque ma sourie survole une cellule celle-ci dois changer de couleur et afficher des informations concernant cette cellule.
Après plus de 3h de recherche impossible de trouver un tuto digne de ce nom.
Si vous pouviez juste me montre comment le faire pour une cellule cela m'aiderai grandement.

Merci d'avance de votre aide.
29/04/2013, 16h27
SpaceFrog

une petit recherche ...
http://www.developpez.net/forums/d96...-larea-survol/
29/04/2013, 16h31
kerozen77

Merci de ta réponse mais j'ai déjà lu cette article, et de plus je souhaiterais évité de créer 35 images.

Quelqu'un d'autre
29/04/2013, 16h32
SpaceFrog

c'est la seule possibilité si tu ne tiens pas à te lancer dans des calculs geométriques poussés avec un canvas ...

sinon il reste flash (paix à son ame)
29/04/2013, 16h35
kerozen77

Je n'arrive pas a comprendre comment un chose aussi simple peut être aussi compliqué... je veux dire que si la zone de survol est défini pourquoi celle ci ne peux pas changer de couleur... j'ai vraiment pas envie de créer 35images T-T
29/04/2013, 16h43
SpaceFrog

html ne connait pas de zone ... sauf avec canvas

les areas des maps html ne sont pas colorisables ...
=> hormis le canvas qui lui a son propre repère orthonormé qui lui permet de gerer des zones, seules des images permettent de contourner ce manque en html

Premièrement merci de ton aide j'ai suivie tes instructions cependant le changement d'image au passage de la sourie ne marche pas... pourrais tu m'aider voici mon code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nouvelle page 2</title>
<script type="text/javascript">
function swapPic(zone,nr){
var pic=document.getElementById('hovered')
pic.src='plan/'+nr+'.jpg'
zone.onmouseout=function(){pic.src='plan/0.png'}
}
</script>
<style type="text/css">
img {border:0;}
</style>
</head>
<body>
<div id="pic" style="height: auto; width: auto; background-image: url('plan/0plan.jpg'); background-repeat: no-repeat">
<img id="hovered" src="plan/0.png" usemap="#Map" />
<map name="Map">
<area href="#" onmouseover="swapPic(this,rose_1)" shape="rect" coords="100, 270, 190, 304">
</div>
</body>
</html>

02/05/2013, 11h51
Bovino

Code:

onmouseover="swapPic(this,rose_1)"

Sur le mouseover, tu appelles ta fonction avec deux paramètres et tel que tu les écris, le second correspond à la variable rose_1. Or cette variable ne semble pas exister, donc erreur et la suite du script ne s'exécute pas.
Ceci dit, comme tu ne te serse pas de ce paramètre dans la fonction, on se demande à quoi il sert ! :aie:
03/05/2013, 16h52
pinguix

1 pièce(s) jointe(s)

Salut,
Je crois avoir trouvé une solution a ton problème, elle consisterait a utiliser un dessins svg (une reconstitution de ton plan sous inkscape suffit:ccool:) et de leur appliquer des évenements dynamique. Exemple : fichier index.html joint.
En espérant t'avoir aidé, bon courage (je sais ce qu'est être stagiaire ;)) !