18041 sujets

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

[Résolu] SVG - faire apparaitre div (en dehors du svg) au click d'un c

Bonjour, premier post ici, j'explique mon problème, j'aimerai faire apparaitre une div qui se trouve en dehors de mon svg quand je clique sur un circle de mon svg, j'ai essayé plusieurs choses mais rien n'y fait. 


 <section id="carte">
      <div class="where carte">
        <svg id="australie" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="900px"
        height="700px" viewBox="0 0 836 754" enable-background="new 0 0 836 754" xml:space="preserve">
(...)
<g id="sydney">
    <circle class="circle" fill="#4F484B" cx="758.518" cy="518.749" r="7.596"/>
      <g class="txt" id="sydney-txt">
      <text transform="matrix(1 0 0 1 770.8213 521.7227)" fill="#4F484B" font-family="'OpenSans'" font-size="16">Sydney</text>
      </g>
    </g>
</svg>
    </div>
    <!-- END WHERE 1-->
    <div class="where">
      <div id="etape">
        <img src="img/monimahe.jpg" width="500" alt="mon image" />
      </div>
    </div>
  </section>


Ca doit être tout bête je suppose, mais je suis pas une pro Smiley cligne

Merci à vous,
Bien vu Smiley cligne

J'ai simplement le "a onclick sur tout le "g", j'avais essayé en le mettant autour du circle mais ça ne fonctionnait pas. 

 <g a onclick="document.getElementById('syd').style.visibility='visible';" id="sydney">
     <circle class="circle" fill="#4F484B" cx="758.518" cy="518.749" r="7.596"/>
      <g class="txt" id="sydney-txt">
      <text transform="matrix(1 0 0 1 770.8213 521.7227)" fill="#4F484B" font-family="'OpenSans'" font-size="16">Sydney</text>
      </g>
    </g></a>


Par contre, j'aimerai bien que si je clique sur la suivante, la précédente disparait, etc.. Car là elle se superposent :

 <g a onclick="document.getElementById('grif').style.visibility='visible';" id="griffith">
   <circle fill="#4F484B" cx="650.699" cy="518.749" r="7.596"/>
      <g class="txt" id="griffith-txt">
        <rect x="661.938" y="510.028" fill="#FFFFFF" width="61.395" height="17.25"/>
        <polygon fill="#FFF8FB" points="665.938,518.146 665.938,523.633 661.188,520.89 656.437,518.146 661.188,515.404 665.938,512.662 "/>
        <text transform="matrix(1 0 0 1 668.7188 523.3906)" fill="#4F484B" font-family="'OpenSans'" font-size="13.9411">Griffith</text>
      </g>
    </g></a>


Des idées?
Bonjour et bravo d'avoir partagé !
c'est plus simple que cela, agit comme nous le faisons en AJAX c'est à dire, crées un véritable
script car le onclic est pas très lisible, et gérable je ferais donc,

<script type="text/javascript">
<!--
function exemple(xx,yy)
{
document.getElementById('xx').style.visibility="hidden";
document.getElementById('yy').style.visibility="visible";
}
//-->
</script>
<g a onclick="exemple(griffith0,griffith1);" id="griffith1">
Sujet clos
Aller à