Super, merci beaucoup, ça fonctionne parfaitement ! Bon il a fallu que je renomme les classes car là j'avais du coup la ville et la région qui s'affichait mais grâce à vous je pense avoir compris le principe pour afficher le nom des régions au survol d'une région, merci !
Au final j'étais beaucoup plus emballé par l'idée de la box d'images qui varie au survol de chaque région mais j'ai eu beau me gratter la tête tout l'aprèm je n'ai pas réussi à le faire parfaitement, c'est bien plus compliqué que de "juste" afficher le nom de la région. Voilà où j'en suis j'ai rajouté ceci en reprenant vos conseils :
<style>
.regionimgbox{width:350px;border-radius:15px 15px 15px 15px;max-width:100%;border:none;}
</style>
<g class="nouvelle_classe">
<span style="position: absolute; top: 10px; left: 10px;">
<img src="/url/img.jpg" class="regionimg">
</span>
</g>
Avec le javascript suivant :
const st0 = document.querySelector('.st0');
const nouvelle_classe = document.querySelector('.nouvelle_classe');
st0.addEventListener('mouseover', () => {
nouvelle_classe.style.display = "block";
});
st0.addEventListener('mouseleave', () => {
nouvelle_classe.style.display = "none";
});
Le résultat est déjà vraiment pas mal : quand je survole ma région "st0" mon image s'affiche et quand je sors de la région "st0" mon image disparaît.
Maintenant le premier soucis que j'ai c'est qu'il y a plusieurs régions et plusieurs images, j'ai donc essayé avec 3 régions pour commencer petit, j'ai nommé reg1, reg2, reg3. Je me suis dit, pour commencer, je vais dupliquer toute la méthode par 3 et ça fonctionne parfaitement (bon je me suis bien gratté la tête tout l'aprèm car ça n'a pas fonctionné du premier coup) , je ne sais pas si c'est la "bonne" façon de faire mais en tout cas ça fonctionne.
Par contre ça aurait été mieux si l'affichage restait sur la dernière image de la région survolée, c'est à dire que si je survole une région l'image associée apparaît, si je vais sur une seconde région collée l'image disparaît et apparaît la nouvelle image associée mais si je sors de la carte tout disparaît, logique vu le code mais j'aurais aimé qu'il laisse affichée la dernière région visitée, est ce possible ? Encore mieux, peut-on mettre un léger effet de transition entre deux images ? Quelque chose de simple comme un fondu rapide ou quelque chose comme ça ?
Sinon la solution alternative que j'ai trouvé c'est de mettre une image "zero", c'est à dire que j'affiche une image sans condition qui est remplacée quand je survole une région et qui ré apparaît quand je ne survole plus carte mais je trouve ça moins bien que de laisser la dernière image de la dernière région survolée.
Egalement j'ai un autre soucis, il ne garde pas toute la mise en forme de mes images, notamment les arrondis que j'avais mis avec border-radius:15px 15px 15px 15px;
En tout cas merci beaucoup, voilà le code :
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 77.4 85.9" style="enable-background:new 0 0 77.4 85.9;" xml:space="preserve">
<style type="text/css">
.reg1{fill:#F4E6DC;stroke:#000000;stroke-width:0.2;stroke-miterlimit:10;}
.reg1:hover{fill:#E28686;}
.reg2{fill:#F4E6DC;stroke:#000000;stroke-width:0.2;stroke-linejoin:round;stroke-miterlimit:10;}
.reg3{fill:#F4E6DC;stroke:#000000;stroke-width:0.2;stroke-linejoin:round;stroke-miterlimit:10;}
.reg2:hover{fill:#E28686;}
.reg3:hover{fill:#E28686;}
.regionimg{width:550px;border-radius:15px 15px 15px 15px;max-width:100%;border:none;}
</style>
<a xlink:href="#" >
<path class="reg3" d="M60.9,59c0,0-0.8,0.1-2.1-1.1c-2.4,0.6-0.8,2.8-4.3-1.2c-1.5-1.8-1.6-3.4-5-1.7c-3.2,1.6-4,2-5.6,1.2
c-0.5,0.1-1.2-0.1-1.9-0.5c-1.4-0.4,0.2,2.3-2.9,2.5c-0.5,0,0.5,1.4-2.5,1.2c-2-0.2-3.7,3.3-0.5,3.2c1,0,0,2.3,0,3.7
c0.6,5.1,3.2,2.3,4.6,5.7c4.2,3.1-3.8,2.2-1.2,4.5c0.5,0.2-0.9,1.6,0.7,2.3c0.6,0.3,0.8,0.5,0.8,0.8l0.1-0.2
c0.6-1.6,5.1-3.6,5.5-1.2c0.1,0.8,2.5,1.4,1.4-0.7c-0.8-2.2,1.1-1.6,1.2-3.6c0.1-2,5.2-0.8,2.8,1.3s-3.1,1.1-3,2.2
c0.6,0.6,1.4,0.4,0.6,1.5c-0.5,1.3,0.6,2.7-0.8,2.6c-1.4-0.1,1.5,2.8,2.5,0c2.4-3.4,4.2,1.1,5.1-3.9c0.4-7.2,8.9-1,3.1-7.4
C57.7,67.7,57.8,63.5,60.9,59z"/>
</a>
<a xlink:href="#" >
<path class="reg2" d="M43.9,56.2c0.5-0.3,0.7-1,0.3-1.6c-1.4-2-0.4-1.8-0.7-3c-0.4-1.4,0.9-1.2,3.5-1.9c1.4-0.4,0-1.2,1-1.7
s-0.2-0.5,1-1.1c2.3-1.2-0.8-1.1,0-2.9c0.1-0.5,1-0.7,0.6-1.2s0.1-1.5,1-1.5c1.7-0.1,1.3-1.9,0.5-2c-1.4,0.3-0.8-2.8-2.1-2.8
c-0.8,2.1-1.9,1.6-1.7,2.7c0.9,5.1-4.8,4.4-6.9,6.5c-1.3,0.9,0.2,1.6-1.2,2.4c-1.1,0.6-0.7,1.4-1.9,2c-2.9,1.5-3,3-5,3
c-2.3,0-2.1,1.5-3.9,1.4c-1.7-0.1-0.6,0.9-2.5,0.6c-3.2-0.6-1.6,3.3-6,1.9c-2.3-0.6-0.7-1.5,0.1-2.7s-1.4-0.9-1.8-1.2
c-0.4-0.2,0.1-0.6,0.1-1.2c0.1-0.6-0.1-0.9,0.8-0.4c0.9,0.5,1-0.1,1.3-0.4c0.3-0.3,0.3-0.6,1.5-0.6s1.1-0.6,0.6-0.8
s-1.1-0.3,0.5-0.9c2.2-1.3-1.7-1.8-2.6-0.7c-1,0.7-1.1,0.8-2.7,0.7c-1.5,0.2-0.9,1.5-1.6,2.5c0.4,3.4-0.2,6.1-3,8
c-0.7,0.6-0.3,1.3-1.2,1.4c-4.8,1.9-5.5,5.2-5.6,5.8c-0.2,1,1.2,1.6,1,2.5c-0.4,1.8-0.8,0.7-0.8,0.2c0-0.9-0.8-1.3-1.1,0.5
C5.3,70.1,5.1,70,4.3,70s0.2,0.9-1.7,1.5s-2-0.2-2.2-0.8c-1.3,1.8,2.3,3,3.4,2.9C4.5,71.7,5,71.2,7.2,71c0.5-0.1,1.4-0.6,2.1-0.4
c2.2,0.6,0.6,3.9,1.9,4.9c0.7,0.3,2.5,1.9,2.2,2.4l0.7,0.7c0.6-1.2,2-0.7,0.5,0.5c-0.2,1-0.4,3.7,1,4c0.9-0.4,0.3-1.1,0.1-1.4
c-0.4-0.8,0.9-2.1,1-0.1c0.2,0.8,2.3,0.3,2.3,0.3c2.6,0.1,1.6,1.3-1.7,1.9c-2.8,0.5,1.3,0.7,1.3,0.7c1.9-1.4,5.5-0.7,7-0.1
c1.5,0.6,2.3-0.6,4.1,0.8c1.7,1.4,0.4-0.3,0.6-0.5c-0.6-2.3,3.2-3.3,4.5-4.9c1.2-1.4,3.1-0.3,3.5,0c0.5,0.4,0.5,0.6-0.5,0.7
c-1.1,0.1-0.6,0.3-0.9,2.1c-0.9,3.7,1.7,4.2,2.5,1.6c0.2-0.6,1-0.2,0.9-0.7c-0.1-0.9,1.4-1.7,1.4-1.7c-1.6-1.5,0.3-2.2-1.5-3
c-1.6-0.7-0.2-2.1-0.7-2.3c-2.6-2.3,5.4-1.4,1.2-4.5c-1.4-3.4-4-0.6-4.6-5.7c0-1.4,1-3.7,0-3.7c-3.2,0.1-1.5-3.4,0.5-3.2
c3,0.2,2-1.2,2.5-1.2c3.1-0.2,1.5-2.9,2.9-2.5C42.6,56,43.3,56.2,43.9,56.2L43.9,56.2z"/>
</a>
<a xlink:href="#" >
<path class="reg1" d="M76.5,24.9c-0.9-0.8-0.1-1.5,0-2.1c0.2-1.7-1.1-1.3-0.2-2.4c0.3-0.2-1.9-1.5-1.4-2s0.7-0.8-0.5-0.9
c0.9-4-5.3-4.7-3.9-9.9c0-2.6,0-4.2,0.7-4.7s0.5-2.2-1-0.7s-1-0.5-2.6-1.3c-3-1.6-1.5-0.6-3.1,0.8c0.1,1.1-0.5,1.7-0.6,2
c-0.1,0.2-0.4,2.4,1.2,1.2c1.4-1.1,1.9,0.7,3.4-1.3c1.2,0.2,0.7,1.8,0.1,3.2c-0.1,1.8-1.9,1.6-2.3,0.4C65.9,6.4,64,6.4,64.7,8
c-0.3,1.3-2.9,1.3-2.6-1.5c0.4-2.8,0.5-3-1.1-2.3c-0.7,0.3-0.6-0.5-0.9-0.8c-1.6-0.8,0,1.8-1.6,1.5c-0.5,1.2,1.7,0.1,0,2.8
c0.5,2.1-2.3,2-3.2,1.6c0.2,0.8-2.1,2.1-1.1,3.1c0.6,0.6-0.4,1.2,0.6,1.7c1.2,1.3-0.3,5-3.2,4.8c-0.4,1.6,0.5,1.9,0.9,1.9
s1.7-1.5,2.1,0c0.4,1.4,1.1,6.2-1.4,7.4c-1,0.4-0.6,2.2-0.7,3.3c-0.1,0.7-1,0.9-1,1.7c-0.3,1.9-2.6,2.5-2.5,3.3l0,0
c1.3,0,0.7,3.1,2.1,2.8c0.8,0.1,1.2,1.9-0.5,2c-0.9,0-1.4,1-1,1.5S49.1,43.5,49,44c-0.8,1.8,2.3,1.7,0,2.9c-1.2,0.6,0,0.6-1,1.1
s0.4,1.3-1,1.7c-2.6,0.7-3.9,0.5-3.5,1.9c0.3,1.2-0.7,1,0.7,3c0.4,0.6,0.2,1.3-0.3,1.6c1.6,0.8,2.4,0.4,5.6-1.2
c3.4-1.7,3.5-0.1,5,1.7c3.5,4,1.9,1.8,4.3,1.2c1.3,1.2,2.1,1.1,2.1,1.1c0-1.7,1.7,0.3,2.3-2.6c0.5-2.7,1.7-9.3,0-10.8
c-0.6-3.4,1.9-3.1,1.9-4.2c0-1-0.4-2.2,0.9-0.7c0.4,0.5,0.4-0.7,1-0.8s2-0.2,3,1.4c2.5,0.5-1.2-2.3,0.3-2.6
c0.4-0.1,0.6-0.6-0.6-0.8c-1.2-0.2,0.5-0.4,0.8-0.6c0.3-0.3,0-0.5-0.6-0.6s1.3-1.2,0.8-1.4s-0.2-0.9,0.4-1c0.6,0,1.2-0.1,0.6-1
c-0.6-0.9,0.3-0.9,0.7-0.3c0.4,0.6,0.3-0.6,1-0.7c0.7-0.1,2.1-0.8,0.8-1c-1.5-0.4,2.4-0.7,0.8-2.1c-0.5-0.4,0.1-0.2,0.2-0.4
c-0.7-1.7,2.1-1,1-2.1c-0.7-0.5,0.1-0.5,0.3-0.5C77.2,25.9,78,25.4,76.5,24.9z"/>
</a>
</svg>
<g class="reg1a">
<span style="position: absolute; top: 10px; left: 10px;">
<img src="url/reg1.jpg" class="regionimg">
</span>
</g>
<g class="reg2a">
<span style="position: absolute; top: 10px; left: 10px;">
<img src="url/reg2.jpg" class="regionimg">
</span>
</g>
<g class="reg3a">
<span style="position: absolute; top: 10px; left: 10px;">
<img src="url/reg3.jpg" class="regionimg">
</span>
</g>
.reg1a {
display: none;
}
.reg2a {
display: none;
}
.reg3a {
display: none;
}
const reg1 = document.querySelector('.reg1');
const reg1a = document.querySelector('.reg1a');
reg1.addEventListener('mouseover', () => {
reg1a.style.display = "block";
});
reg1.addEventListener('mouseleave', () => {
reg1a.style.display = "none";
});
const reg2 = document.querySelector('.reg2');
const reg2a = document.querySelector('.reg2a');
reg2.addEventListener('mouseover', () => {
reg2a.style.display = "block";
});
reg2.addEventListener('mouseleave', () => {
reg2a.style.display = "none";
});
const reg3 = document.querySelector('.reg3');
const reg3a = document.querySelector('.reg3a');
reg3.addEventListener('mouseover', () => {
reg3a.style.display = "block";
});
reg3.addEventListener('mouseleave', () => {
reg3a.style.display = "none";
});
Modifié par Zeda (07 May 2020 - 18:23)
