Bonjour à tou.tes !
J'ai crée un fichier SVG sur illustrator : un tracé censé représenter une "rivière" avec un certain nombres de cercles numérotés (comme des pastilles). J'aimerais que lorsque l'utilisateur survol une des pastilles, apparaissent une image, ainsi que du texte.

J'ai essayé plein de choses mais je galère. Si vous pouviez m'aider je vous en serais éternellement reconnaissante.
Modifié par noush (04 Apr 2021 - 17:23)
salut!
tu pourrais essayer quelque chose de comme ça avec un peu de javascript (;
bonne soirée!


  <svg id="svg" width="150" height="100" viewBox="0 0 3 2">
    <rect width="1" height="2" x="0" fill="#008d46" />
    <rect width="1" height="2" x="1" fill="#ffffff" />
    <rect width="1" height="2" x="2" fill="#d2232c" />
  </svg>

<img src="..." style="display: none;" id="img"/>
<p id="txt" style="display: none;">...</p>




const svg = document.getElementById('svg'),
img = document.getElementById('img'), 
txt = document.getElementById('txt');

svg.addEventListener('mouseover', () => {
   img.style.display = "block";
   txt.style.display = "block";
});
Meilleure solution
Super ! Merci beaucoup !

Mais comment faire pour que l'image apparaissent uniquement lorsque je survole le carré vert par exemple ?
C'est bon j'ai réussi !!! Merci mille fois <3
Me revoilà !
En reprenant l'exemple de @vzytoi, j'ai pu afficher une image id="polly" en survolant uniquement le premier rect auquel j'ai attribué une id="vert" mais du coup je suis bloquée pour la suite. Comment faire pour donner l'ordre d'afficher une image avec une autre id en survolant le carré id="blanc" par exemple ?

J'espère être claire, c'est ma première fois avec js


const svg = document.getElementById("vert"),
  img = document.getElementById("polly");

svg.addEventListener("mouseover", () => {
  img.style.display = "block";
});

svg.addEventListener("mouseout", () => {
  img.style.display = "none";
});

Modifié par noush (05 Apr 2021 - 00:46)