J'ai une carte en SVG et en bas j'ai les noms des régions correspondant à sa région, lorsque je passe la souris sur mon image " ex:la Corse" le texte du bas se met en jaune et le nom de l'image apparait en haut à gauche ou lorsque je passe la souris sur mon texte du bas l'image correspondant devient bleue, jusque là tous vas bien.
Se que je cherche à faire est que lorsque je passe la souris sur le texte du bas, l'image correspondant devient bleue la pas de problème mais j'aimerai que texte du haut s'affiche comme quand je passe la souris sur mon image?
je joint code au complet:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimal-ui"/>
<!-- <link rel="stylesheet" href="css/app.css">-->
<script src="js/jquery-3.3.1.min.js"></script>
<style>
body {
background-color: #0d0d0d;
color: #415F77;
}
h3{
text-align: center color: #fff;
/*background-color: #ffffff;*/
/*text-shadow: #969696 1px 3px 0, #aba8a8 1px 13px 5px;*/
font-size: 40px;
font-style:italic;
padding-left: 590px;
margin-top: 0px;
padding-top: -30px;
}
/*Carte*/
.map__image {
/* Carte*/
position: absolute;
top: 90px;
left: 100px;
right: 0px;
bottom: 0;
border: 1px solid red;
width: 940px;
height: 820px;
margin-left: 100px;padding-left: 10px;
}
.map__image path {
fill: #0e0e14;
stroke: #4a4747;
stroke-width: 0.5px;
transition: fill 0.1s;
}
.map__image path:hover {
fill: #0000FF;
stroke: #0000FF;
}
.map__image svg {
height: 900px;
width: auto;
}
.map {
overflow: hidden;
}
/*texte couleur blanc au passage de la souris*/
path~text {
fill: #e8e809;
font-size: 14px;
}
path:hover~text {
fill: #fdfefe;
font-weight: bold;
font-size: 18px;
}
/*Fin texte couleur blanc au passage de la souris*/
/*Pas de nom sur la carte*/
.texte {
visibility: hidden;
}
.map__image .is-active path {
fill: #0000FF;
}
.map__image path:hover {
fill: #0000FF;
stroke: #0000FF;
}
/* Liste */
.map__list {
position: absolute;top: 820px;left: 250px; /* border-style: double;*/
height: 100px; width: 1000px;list-style: none;
}
.map__list ul, .map__list li{
margin: 0;
padding: 0;
list-style: none;color: #f5eded;
}
.map__list a{ font-size: 18px; text-decoration: none;
transition: 0.1s;}
.map__list a.is-active {
color: #c5f20b;
background-color: #0a0909;font-weight: bold;
}
.map__list a {
color: #09d7f2;
text-decoration: none;
}
/* Fin Liste */
/* Bouton afficher/masquer le texte sur la carte*/
.bt_afficher {
margin-top: 70px;
margin-left: 10px;
padding-left: -100px;
}
.bt_texte:hover {
font-size: 22px;
color: #1af508;
}
.bt_texte {
margin-left: 10px;
color: #eb1a1a;
cursor: pointer;
}
/* Fin Bouton afficher/masquer le texte sur la carte*/
</style>
</head>
<body>
<h3>XXXXXXXXX</h3>
<div class="map" id="map">
<div class="map__image">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="800 600 1000 300">
<g><a id="region-CRS" xlink:href="europe/france/Corse.html" target="myFrame" onmouseover="afficher_image('img13');" onmouseout="cacher_image('img13');">
<path id="13"title="Corse" d="M986,754.5v1.2c0,1.4,0.7,2.1,0.7,3.4c0,1.4,0.2,2.3-0.4,3.6c-0.4,0.9-1.2,1.2-1.2,2.2c0,0.7,1,0.9,1,1.6c0,1.1-0.7,1.5-0.7,2.6c0,0.5,0.4,0.7,0.4,1.3c0,1.3-0.9,2-1.9,2.7v1.5c0,0.5-0.5,0.6-1,0.8c-0.5,0.2-0.7,0.7-1.2,0.7c-0.7,0-1.1-0.6-1.2-1.3h-0.8c0,1,0.1,1.6-0.3,2.5c-0.1,0.2-0.4,0.3-0.4,0.6v1.5c0.3,0,0.5,0.1,0.8,0.1c1.3,0,1.7-1.5,3-1.5c0.3,0,0.5,0,0.9,0v0.6c-0.3,0.8,0.1,1.4-0.4,2.1c-0.4,0.6-0.8,0.7-1.3,1.1c-0.6,0.5-0.8,1-1.6,1.2c-0.4,0.1-0.7,0-0.9,0.4c-0.5,1.1-0.4,1.9-0.4,3c0,0.5,0.3,0.7,0.3,1.2c0,0.3-0.3,0.4-0.4,0.6c-0.5,0.9-1,1.3-1.9,1.9c-0.4,0.3-0.2,0.8-0.2,1.3c0,0.4,0.1,0.6,0.2,0.9c0.9-0.3,1.2-1.3,2.1-1.3c0.1,0,0.2,0.1,0.3,0.1c-0.5,1.3-1.1,1.9-1.6,3.3c-0.2,0.6,0,1.5-0.7,1.5c-0.7,0-0.9-0.5-1.6-0.5H974c-0.6,0-0.7-0.7-1.2-1.1c-0.4-0.3-0.8-0.1-1.2-0.3c-0.5-0.3-0.6-0.9-0.6-1.5v-2.1c0-1.1-1.4-1.1-2.5-1.2c-1.3-0.2-1.8-1.3-3.1-1.3c-0.6,0-0.9,0.4-1.4,0.4h-0.4v-0.8c-0.5,0-0.7,0.1-1.2,0c-0.5-0.1-0.7-0.7-1.2-0.7c-0.7,0-0.7,0.8-1.3,1.1c-0.3-0.8,0.2-1.7-0.5-2.2c-0.7-0.6-1.7-0.1-2.2-0.9c-0.6,0.2-0.8,0.7-0.8,1.3h-0.5c-1.3-0.5-0.4-2.4-1.5-3.3c-1.2-0.9-3.4-0.3-3.4-1.8c0-1.6,0.4-2.4,1-3.9c0.4-1,0.1-2.3,1.2-2.6c0.2,0.7,0.4,1,0.7,1.6c0.8-0.5,0.7-1.4,1.4-1.9c0.6-0.4,1.1-0.4,1.8-0.8c0.2-0.1,0.5-0.2,0.5-0.4c0-0.8-0.1-1.9-0.9-1.9c-0.5,0-0.7,0.4-1.1,0.4c-0.8,0-1-1-1.8-1c-1.2,0-1.7,1.2-3,1.2c-0.4,0-0.6-0.1-0.9,0V771c0.4-0.7,0.7-1.1,1.2-1.8c0.2-0.3,0.6-0.4,0.6-0.7c0-0.2-0.1-0.3-0.1-0.5c-1.4,0.4-1.9,1.6-3.4,1.6c-1,0-1.3-1.1-2.2-1.1c-0.4,0-0.6,0.1-1,0.1c-0.3,0-0.6-0.3-0.6-0.6c0-0.6,0.7-0.7,1-1.2c0.7-0.8,1.1-1.1,1.9-1.7c-0.4-0.6-0.8-0.9-1.1-1.6l0.1-0.6c0.9-0.1,1.5,0,2.4-0.1c0.7-0.1,1-0.8,1-1.5c0-0.3,0-0.5-0.1-0.8c-0.3,0-0.5-0.1-0.8-0.1c0.1-0.6,0.1-1.1,0.4-1.6c0.2-0.3,0.7-0.4,0.8-0.7c0.3-0.7-0.1-1.3,0.3-1.9c0.5-0.8,1.6-0.9,1.6-1.8c0-0.8-0.7-1.3-1.5-1.3c-1.6,0-2.1,2-3.7,2h-1.5c-1.7,0-1.9,2.5-3.7,2.5c-0.2,0-0.3-0.1-0.4-0.1c-0.1-1.1,0.1-1.8-0.4-2.7c-0.4-0.9-1.6-1-1.6-2c0-0.8,0.3-1.7,1.1-1.7c0.9,0,1,1.3,1.9,1.3c0.5,0,1-0.4,1-0.9c0-0.5-0.4-0.7-0.7-1c-0.3-0.3-0.3-0.7-0.7-1c-0.2-0.1-0.5-0.2-0.5-0.4c0-0.6,0.6-0.8,1-1.2c0.7-0.7,1.1-1.1,1.9-1.7c0.4-0.4,1.2-0.3,1.2-0.8c0-1.7-1.9-2.2-1.9-3.8v-1.1c0-0.4-0.1-0.7-0.4-1c-0.4,0.3-1,0.3-1.3,0.8c-0.3,0.4-0.4,1-0.9,1c-0.2,0-0.4-0.1-0.6-0.1v-1.5c0-0.5-0.5-0.6-0.9-1c-0.2-0.2-0.3-0.5-0.7-0.5c-1.1,0-1.4,1.2-2.5,1.2c-0.8,0-0.3-1.8-1.1-1.8c-0.2,0-0.4,0.1-0.6,0.1c-0.3,0-0.4-0.1-0.6-0.2c0.5-1.1,2.1-1.2,2.1-2.4c0-0.5-0.6-0.5-1-0.7c-0.5-0.2-0.7-0.6-0.7-1.1c0-1.2,0.7-1.8,0.7-3c0-0.8-1.6-0.4-1.6-1.1c0-0.9,1-1.1,1.7-1.6c0.7-0.4,0.9-1.3,1.8-1.3c0.5,0,0.7,0.7,1.2,0.7c0.7,0,1-0.5,1.6-1c0.7-0.6,1.2-0.9,1.5-1.7c-1.2-0.8-2-0.8-3.3-1.3c-0.6-0.3-0.9-0.6-1.4-1c-0.1-0.1-0.4-0.1-0.4-0.2c0-0.8,0.4-1.2,0.4-2.1v-1l-0.5-0.1c-0.7,0.4-1.5,0.1-2.1,0.7c-0.4,0.4-0.3,1.1-0.8,1.1c-0.1,0-0.2-0.1-0.3-0.1v-1.6l-0.3-1.5c0.1-0.6,0.6-1.1,1.2-1.2c0.6-0.1,1,0.2,1.6-0.1c0.6-0.4,0.4-1,0.5-1.7c0.1-0.6,0.8-0.7,1.4-0.7c0.2,0,0.4,0.1,0.6,0.2c0.6,0.1,1.1,0.2,1.7,0.2v-2.1c0-0.8-1-0.9-1.8-0.9c0-0.3-0.1-0.5-0.1-0.8c0-0.4,0.4-0.5,0.6-0.8c0.5-0.9,0.5-1.7,1.2-2.5c0.8-1.1,1.7-1.7,1.7-3c0-1.1-0.1-1.7,0-2.8h0.5c1.7,0,1.8,2.7,3.5,2.7c0.7,0,0.6-1,0.6-1.7c0-0.9-0.5-1.7,0.2-2.2c0.4-0.3,0.8,0,1.2-0.2c0.8-0.6,1.3-0.9,2.2-1.3c1.3-0.6,2.2-0.4,3.6-0.7c1.2-0.2,1.8-0.6,2.9-1l0.6,0.1c1.3-0.3,2.1-0.8,2.8-1.9c0.3-0.4,0.7-0.6,0.7-1.2V692l-0.2-0.9c0.3-1,1.1-1.3,1.9-1.8c1.6-0.9,2.6-1.6,4.4-1.6h1.8c1,0,1.6,0.3,2.6,0.3c0.7,0,1-0.2,1.7-0.2h0.9c0,1.1,0.1,1.8,0.7,2.8c2.1-0.9,2.6-2.9,2.8-5.2c0.1-0.6,0.4-0.9,0.4-1.6c0-1.2-0.6-1.8-1.5-2.6c-0.6-0.5-1.2-0.8-1.2-1.6c0-0.7,0.9-0.7,1.3-1.2c0.5-0.5,0.3-1.2,0.4-1.9c0.4-1.5,0.9-2.3,0.9-3.9c0-0.7-0.7-0.9-0.7-1.6c0-0.9,0.8-1.3,0.8-2.2c0-0.5-0.6-0.6-0.6-1c0-0.9,0.4-1.6,1.2-1.9c0.8-0.3,1.5-0.3,2.2-0.7c0.7,0.1,1.3,0,1.9,0.4c0.7,0.6,0.8,1.3,0.8,2.3v1.5c0,1.4,0.8,2.1,1.2,3.5c0.4,1.4,0.2,2.3,0.3,3.8c0.1,1.7,0.4,2.6,0.4,4.3c0,1.4-0.5,2.2-0.5,3.6v2c0,0.7,0.4,1.1,0.4,1.8c0.1,1.3-0.3,2.2,0.2,3.4c0.3,0.7,0.8,1,1.3,1.6c1.1,1.4,1.7,2.2,2.8,3.6c1.3,1.7,1.3,3.1,1.6,5.2c0.1,0.7,0.3,1.1,0.3,1.8v2.2c0,1.5,0.4,2.4,0.4,3.9v5.1l0.3,1.4c0.4,1,0.5,1.7,0.7,2.8c0.7,3.1,1.2,4.8,1.8,7.9c0.3,1.7,1,2.6,1,4.3v3.7c0,0.7-0.6,1-1.1,1.5c-0.9,1-0.8,1.9-1.3,3.1c-0.4,1.1-0.5,1.7-1,2.7c-0.5,0.9-1.2,1.2-1.6,2.2c-0.7,1.7-1.6,2.4-2.1,4.2C986.4,751,986.7,752.3,986,754.5z"/>
<text transform="matrix(1.0037 0 0 1 944.7627 737.1409)"><tspan x="0" y="0" class="texte">Corse</tspan></text>
</a></g>
<text font-size="100" x="800" y="650" display="none" style="font-size:30px;font-weight:bold;fill:#f2f210;font-family:Brush Script MT, Brush Script Std, cursive">
Corse
<animate fill="freeze" dur="0.1s" begin="13.mouseover" from="none" to="block" attributeName="display"></animate>
<animate fill="freeze" dur="0.1s" begin="13.mouseout" from="block" to="none" attributeName="display"></animate>
</text>
</svg></div>
<div class="map__list">
<ul style="display:block; width:900px;">
<li style="display:block; float:left; width:225px;" ><a href="#" id="list-CRS" >Corse</a></li>
</ul>
</div>
</div>
<!-- script pour visualiser de la liste-->
<script >
var map = document.querySelector('#map')
var paths = map.querySelectorAll('.map__image a')
var links = map.querySelectorAll('.map__list a')
// Polyfill du foreach
if (NodeList.prototype.forEach === undefined) {
NodeList.prototype.forEach = function (callback) {
[].forEach.call(this, callback)
}
}
var activeArea = function (id) {
map.querySelectorAll('.is-active').forEach(function (item) {
item.classList.remove('is-active')
})
if (id !== undefined) {
document.querySelector('#list-' + id).classList.add('is-active')
document.querySelector('#region-' + id).classList.add('is-active')
}
}
paths.forEach(function (path) {
path.addEventListener('mouseenter', function () {
var id = this.id.replace('region-','')
activeArea(id)
})
})
links.forEach(function (link) {
link.addEventListener('mouseenter', function () {
var id = this.id.replace('list-', '')
activeArea(id)
})
})
map.addEventListener('mouseover', function () {
activeArea()
})
</script>
<!-- tooltip et JQuery -->
<script src="js/2.1.3_jquery.min.js"></script>
<script src="js/index_tootip.js"></script>
<!-- Afficher ou Cacher les noms des régions-->
<script src='./js/afficher_cacher.js'></script>
</body>
</html>
Je vous remercie d'avance
Max
Cordialement
Afficher du texte au passage de la souris
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
