18041 sujets

Questions générales et questions de débutants

Urgent : SVG, survol d'un élément précis pour faire apparaître une

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 ?
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)
Sujet clos
Aller à