Rendre une carte interactive et responsive
Bonjour!
j'apprends à coder et je travaille sur un projet que je rend volontairement plus complexe pour apprendre plus de choses.
Grosso modo, c'est une application pour la création de personnage de jeux de rôle.
Je fais tout enHTML, css et javaScript. Bien que ce soit destiné à être utilisé dans un navigateur internet, je ne prévois pas la mettre en ligne. Tous les fichiers sont stockés en local.
Donc... J'ai fais une page avec la carte du monde du jeu. Assez classique, il y a des bouton "zoom-in" et "zoom-out" et on peut ensuite se déplacer sur la carte en mode "grab and drag".
Là où je bloque, c'est que je veux qu'en passant la souris sur les différentes régions, cette dernière reste normale et que tout le reste de la carte s'assombrisse. J'ai exploré plusieurs pistes, mais je n'arrive pas à trouver
quelle méthode je devrais utiliser pour créer les zones.
Code:
1
2
3
4
5
6
7
8
9
10
| <div class="cadreCarte" id="cadreCarte"> (cadre qui est statique sur la page)
<div class="containerCarte" id="containerCarte" > (ce cadre subit des changements de dimensions lors des zooms)
<img src="images/cartes/cartecomplète.png" alt=""class="carteComplète" id="carteComplète" draggable="false" ondragstart="return false;"> (la carte s'adapte à son container lors des zooms)
</div>
</div> |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| .cadreCarte{
width: 1325px;
height: 900px;
border: 5px solid black;
border-radius: 5px;
box-sizing: content-box;
overflow: scroll;
position: relative;
user-select: none;
scrollbar-width: none;
}
.containerCarte{
width: 1325px;
height: 900px;
background-color: black;
overflow: hidden;
cursor: grab;
user-select: none;
}
.containerCarte:active{
cursor: grabbing;
}
.carteComplète{
width: 100%;
height: 100%;
} |
J'ai essayé d'ajouter un div dans le '.containerCarte' qui délimiterait une zone de la carte avec des dimensions en % et un positionnement (absolute) aussi en %. Mais, contrairement à la carte, ni ses dimensions, ni son positionnement ne s'adaptaient à son parent '.containerCarte'.
J'ai ensuite essayé de tracer un SVG pour délimiter une zone, mais pour le positionner en 'absolute' j'ai cru comprendre qu'il faille l'englober dans un div. Alors je me retrouve avec le même problème.
Alors, j'aimerais avoir des conseils quand à la piste à suivre pour arriver à mes fins:
délimiter des zones de la cartes qui s'adapterait en taille et en positionnement lors des zoom-in, zoom-out et scroll de son parent.
j'espère que c'est assez clair...
Merci d'avance,
Eric
