Création map interactive

**kerozen77** · 29/04/2013, 16h21

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.

**SpaceFrog** · 29/04/2013, 16h27

une petit recherche ...
http://www.developpez.net/forums/d96...-larea-survol/

**kerozen77** · 29/04/2013, 16h31

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

**SpaceFrog** · 29/04/2013, 16h32

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)

**kerozen77** · 29/04/2013, 16h35

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

**SpaceFrog** · 29/04/2013, 16h43

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

**kerozen77** · 02/05/2013, 10h15

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

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

**Bovino** · 02/05/2013, 11h51

Code :

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

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 !

**pinguix** · 03/05/2013, 16h52

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

) 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

) !

Création map interactive

JavaScript

Discussions similaires

Partager

Partager