Bonjour,
Voila je rencontre un petit problème avec mon code.
Bonjour j'ai créer une carte en SVG, avec des liens, mon problème c'est que lorsque je survole les régions sur ma carte, je souhaiterai que cela active les liens correspondant et vis versa. Mais cela ne fonctionne pas. j'ai beau chercher, je ne trouve pas l'erreur sur mes lignes de codes Java. Merci pour votre aide
Décrivez ici votre code ou ce que vous cherchez à faire
HTML
<div class="Map" id="Map"></div>
<div class="map__image">
<svg version="1.1" id="Calque_1" xmlns:amcharts="http://amcharts.com/ammap"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 832 907"
style="enable-background:new -17 -36.1 832 907;" xml:space="preserve">
<style type="text/css">
.st0{fill:#B28979;stroke:#FFFFFF;stroke-width:0.5;}
.st1{fill:#C19474;stroke:#FFFFFF;stroke-width:0.5;}
.st2{fill:#DC8B27;stroke:#FFFFFF;stroke-width:0.5;}
.st3{fill:#BC6225;stroke:#FFFFFF;stroke-width:0.5;}
.st4{fill:#E3E419;stroke:#FFFFFF;stroke-width:0.5;}
.st5{fill:#F68A21;stroke:#FFFFFF;stroke-width:0.5;}
.st6{fill:#FFBF86;stroke:#FFFFFF;stroke-width:0.5;}
.st7{fill:#FF3300;stroke:#FFFFFF;stroke-width:0.5;}
</style>
<g>
<a id="région-7" xlink:title="Ogooué-Lolo" xlink:href="https://fr.wikipedia.org/wiki/Provinces_du_Gabon/?q=7">
<path class="st0" d="M566.3,285.3l-27-6l-20.8,93l-123.2,48.3l-1.8,49.5l28.3-6.7l37.4,45.9l0.3,32.5l58.1,36.7l18.3-10
l21.7,8.8l23.2-57.9l35.5-29.1l-1.2-19.7l14.7,5.5l40.3-53.3l-42.2-78.2l4.1-33.3l-32-25L566.3,285.3z"/>
</a>
<a id="région-2" xlink:title="Haut-Ogooué" xlink:href="https://fr.wikipedia.org/wiki/Provinces_du_Gabon/?q=2">
<path class="st1" d="M657.7,312.3l-25.8-1l-4.1,33.3l42.2,78.2l-40.3,53.3l-14.7-5.5l1.2,19.7l-35.5,29.1l-23.2,57.9
l36.8,53.2l-5.4,13.2l67.5,9.5l39.1-47.4l22.4,36.2l-6.1,16.7l31.4,2.4l19.9-19.8l-11.9-17.9l41.4-74.2l-11.6-10.2l16.9-27.9
l-13.2-55.2l14.7-52.1l-19.3-23.3l-27.4-0.9l-8.9-24.6l-30-2.2l1.5-23.2L657.7,312.3z"/>
</a>
<a id="région-8" xlink:title="Ogooué-Maritime" xlink:href="https://fr.wikipedia.org/wiki/Provinces_du_Gabon/?q=8">
<path class="st1" d="M45.3,420.9L43,398.5l-7.6,9.5L45.3,420.9z M120.9,396.4l-36.4-42.2l-40.6,83l-11.3-25.8L21,427
L0.5,397.6l19.8,46.3l2.4-0.9l2.8,8l8-1.4l-3.8,6.2l-5.6-4.3l13.7,17.5l3.8,16l0.4-9l4.9,5.3l0.7,3.2l-2.7,1.9l0.4,7.1l11.8,8.8
l5.4-1.9l1.6,8.7l3.8,2.1l20.6-17.5l-6.7,38.9l23.4-13.2l14.2,18.9L81,547.5l-2.2-19.2L64.3,519l-10.6-17.2l-3.9-2.6l-2.1,0.2
l-2.7-3l-4.9-10.2l4.5,11.7l17.2,24.1l10.8,12.2l4.9,35.2l36.1,12.6l3.5,19.9l-10.5-20.5l-27-6.3l44.8,65.5l77.8,28.7l-25.5,9.4
l-18.9-23.7l-18.8-1.9l35.6,41.7l50.1-13.9l14.4-32.3l24.4-13.8l-20.4-47.6l-66.4-19.3l-14.2-19.5l26.5-58.9l-21.5-12.9l1.8-30.6
l-34-13.4L120.9,396.4z"/>
</a>
<a id="région-5" xlink:title="Nyanga" xlink:href="https://fr.wikipedia.org/wiki/Provinces_du_Gabon/?q=5">
<path class="st2" d="M333.5,859.3l13.6-33.1l37.2-25.9l25.2,25.1l31.9-3.5l-9.6-16.3l16.1-33.8l-35.4-18.2l12.5-22.8
l-33.4-27.7l-64.7-74.6l-63.1,6.4l-24.4,13.8l-14.4,32.3L174.8,695l92.8,78.3l1.5,19.1L333.5,859.3z"/>
</a>
<a id="région-4" xlink:title="Ngounié" xlink:href="https://fr.wikipedia.org/wiki/Provinces_du_Gabon/?q=4">
<path class="st3" d="M395.2,420.6l-55.5-24.5L271,403l-41.7,73.7l-22.3-2.5l-17.8,15.6l-26.5,58.9l14.2,19.5l66.4,19.3
l20.4,47.6l63.1-6.4l64.7,74.6l12.2-23.7l-8-41.8l26.1,11.8l96.8-11.7l-1.3-59.3l-58.1-36.7l-0.3-32.5l-37.4-45.9l-28.3,6.7
L395.2,420.6z"/>
</a>
<a id="région-3" xlink:title="Moyen-Ogooué" xlink:href="https://fr.wikipedia.org/wiki/Provinces_du_Gabon/?q=3">
<path class="st4" d="M291.2,284.9l-19.1,3l-16.6,35.7l-60.3,45l-14.9,5.4l-13.6-15.6l-46.2,15.8l0.4,22.2l14.6,36.3
l34,13.4l-1.8,30.6l21.5,12.9l17.8-15.6l22.3,2.5L271,403l68.7-6.9l55.5,24.5l-38.9-93.9l41.7-41.5L291.2,284.9z"/>
</a>
<a id="région-9" xlink:title="Woleu-Ntem" xlink:href="https://fr.wikipedia.org/wiki/Provinces_du_Gabon/?q=9">
<path class="st5" d="M366.2,0l-2.1,179.3l-126.9-0.4l-1.5,49.9l76.7-24.6l-21.2,80.8l106.8,0.2l-14.5-16.8l100.2-68.3
l20.7-53.2l114.3,1.7l7.5-28.3L611,97.6l19.3-91.4L423.5,2.8L366.2,0z"/>
</a>
<a id="région-6" xlink:title="Ogooué-Ivindo" xlink:href="https://fr.wikipedia.org/wiki/Provinces_du_Gabon/?q=6">
<path class="st6" d="M740.6,127.5l-38-8.2l-84,29.2l-114.3-1.7l-20.7,53.2l-100.2,68.3l14.5,16.8l-41.7,41.5l38.9,93.9
l123.2-48.3l20.8-93l27,6l33.6,1l32,25l25.8,1l57.7,17.2l7.9-60.9l18-26l34.8-11.3l19.2-40.2l-29.7-57.5L740.6,127.5z"/>
</a>
<a id="région-1" xlink:title="Estuaire" xlink:href="https://fr.wikipedia.org/wiki/Provinces_du_Gabon/?q=1">
<path class="st7" d="M95.3,205.4l-1,0l0.4,0.4L95.3,205.4z M150.2,180.5l-13.3-9.8l-16.6,10.8l5.7,70.8l-4.8-17.9h-15
l10.3-11.4l-30.7,7.6l-1.4,11.3l26.5,34.9l72.6,14.2l-36.8,8.6l7.4,14L111.8,291l-2.2,12.3L92,291.9l-2-24.1l-5.4,86.4l36.4,42.2
l-0.4-22.2l46.2-15.8l13.6,15.6l14.9-5.4l60.3-45l16.6-35.7l19.1-3l21.2-80.8l-76.7,24.6l1.5-49.9l-59.8,0.7l-5.1,10L150.2,180.5z"
/>
</a>
</g>
</svg>
</div>
<div class="map__list">
<ul>
<li><a href="http://fr.wikipedia.org/wiki/Provinces_du_Gabon/?q=GA-1" target="_blank" id="list-1">Estuaire</a></li><br>
<li><a href="http://fr.wikipedia.org/wiki/Provinces_du_Gabon/?q=GA-2" target="_blank" id="list-2">Haut-Ogooué</a></li><br>
<li><a href="http://fr.wikipedia.org/wiki/Provinces_du_Gabon/?q=GA-3" target="_blank" id="list-3">Moyen-Ogooué</a></li><br>
<li><a href="http://fr.wikipedia.org/wiki/Provinces_du_Gabon/?q=GA-4" target="_blank" id="list-4">Ngounié</a></li><br>
<li><a href="http://fr.wikipedia.org/wiki/Provinces_du_Gabon/?q=GA-5" target="_blank" id="list-5">Nyanga</a></li><br>
<li><a href="http://fr.wikipedia.org/wiki/Provinces_du_Gabon/?q=GA-6" target="_blank" id="list-6">Ogooué-Ivindo</a></li><br>
<li><a href="http://fr.wikipedia.org/wiki/Provinces_du_Gabon/?q=GA-7" target="_blank" id="list-7">Ogooué-Lolo</a></li><br>
<li><a href="http://fr.wikipedia.org/wiki/Provinces_du_Gabon/?q=GA-8" target="_blank" id="list-8">Ogooué-Maritime</a></li><br>
<li><a href="http://fr.wikipedia.org/wiki/Provinces_du_Gabon/?q=GA-9" target="_blank" id="list-9">Woleu-Ntem</a></li><br>
</ul>
</div>
CSS
.mapimage
{
width: 50%;
float: left;
transition: fill 0.3s;
stroke: #FFFFFF;
stroke-width: 1px;
}
.mapimage .is-active path
{
fill: #0127af;
}
ul
{
list-style-type: none;
}
}
.maplist li
{
margin-left: 800px;
width: 100%
font-family: verdana;
list-style-type: none;
color: #0127af;
}
.maplist a
{
color: inherit;
transition-color: 0.3s;
text-decoration: none;
}
.map__list a .is-active
{
color: #0127af;
font-weight: bold;
text-decoration: underline;
}
JAVASCRIPT
<script type="text/javascript">
var map = document.querySelector('#map')
var paths = document.querySelectorAll('.mapimage a')
var links = document.querySelectorAll('.maplist a')
//Polyfill du forEach
if (NodeList.prototype.forEach === undefined) {
NodeList.prototype.forEach = function (callback) {
[].forEach.call(this, callback)
}
}
paths.forEach(function (path) {
path.addEventListener ('mouseenter', function (e) {
var id = this.id.replace('région-','')
map.querySelectorAll('.is-active').forEach(function (item) {
item.classList.remove('is-active')
})
document.querySelector('#list-' + id).classList.add('is-active')
document.querySelector('#région-' + id).classList.add('is-active')
})
})
</script>
Entourez votre code pour bien le mettre en forme