Discussion :

[Posoroko]

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

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

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

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

[mathieu]

en attendant que quelqu'un puisse vous aider avec l'utilisation de CSS, voilà la piste que j'aurais étudiée :
faire la carte interactive avec leaflet :
https://leafletjs.com/examples/crs-s...rs-simple.html
j'aurais mis en fond une couche avec toute la carte complètement assombrie et ensuite en fonction de la position de la souris, je change l'image de la zone qui s'affiche par dessus.

P.S. : j'étais en train de me demander si ce que j'ai proposé pouvait fonctionner donc j'ai fait un exemple avec 3 zones :
https://codesandbox.io/s/exciting-sid-hhghn

[Posoroko]

super! merci pour le tuyau! Ça a l'air assez efficace.
Je vais y jeter un coup d’œil, même si j'essaie de tout faire en pure CSS et jS.
Je suis en train d'apprendre et je me 'oblige à ne pas utiliser de bibliothèque pour l'instant.

Mais merci quand même d'avoir pris le temps de me répondre. Comme je ne trouve rien d'autre, je vais utiliser Leaflet pour mettre en place ma carte.

Bonne journée!!