Clicking one of SVG parts to show an image-CodePudding

I'm a JS noob, never touched any coding other than simple CSS stuff. What I'm trying to do here is to create an interactive graphic where you click a part of the SVG, and it shows you a picture. Here's the code I used:

 <script>
function myFunction(idblue) {
    var bluepic = "https://i.ibb.co/yfn8GwC/bluecity.jpg";
    document.getElementById(idblue).src = bluepic;
}

and I put the onclick on <path> like this.

<path id="bluecity" onclick="myFunction('idblue')"  d="000 000 000..."> </path>

However, it just doesn't work. Here's also the SVG file I'm fiddling with. How do I make it work?

CodePudding user response：

just add the script to the html of the site instead of inside the svg and it should work fine.

function myFunction(idblue) {
    var bluepic = "https://i.ibb.co/yfn8GwC/bluecity.jpg";
    document.getElementById(idblue).src = bluepic;
}

<img id = "idblue">
<svg
   viewBox="0 0 400 400"
   version="1.1"
   id="svg5"
   inkscape:version="1.1.2 (b8e25be833, 2022-02-05)"
   sodipodi:docname="colourfultest.svg"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <sodipodi:namedview
     id="namedview7"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageshadow="2"
     inkscape:pageopacity="0.0"
     inkscape:pagecheckerboard="0"
     inkscape:document-units="mm"
     showgrid="false"
     inkscape:zoom="0.49798681"
     inkscape:cx="307.23705"
     inkscape:cy="562.26389"
     inkscape:window-width="1300"
     inkscape:window-height="745"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1"
     inkscape:current-layer="svg5" />
  <defs
     id="defs2" />
    
 <style type="text/css">
    .land {
        stroke: white;
        stroke-width: 1.5;
        stroke-miterlimit: 4;
    }
    .circle {
        opacity: 0;
        fill-opacity: 1;
        stroke: black;
        stroke-width: 0.5;
        stroke-opacity: 1;
    }
    path:hover {
        opacity: 0.5;
    }
 </style>
 
  <path id="bluecity" onclick="myFunction('idblue')" 
     style="display:inline;fill:#008080;stroke-width:0.531307"
     d="m 88.728086,215.13469 c -4.383275,-0.85084 -8.447765,-1.76804 -9.0322,-2.03822 -0.584438,-0.27018 -3.45349,-0.6237 -6.375673,-0.78561 -2.922182,-0.1619 -6.180121,-0.54227 -7.239868,-0.84526 -2.218883,-0.63439 -4.714515,-2.90179 -4.714515,-4.28336 0,-2.25724 3.359785,-9.6287 5.317104,-11.66588 1.116415,-1.16196 2.110166,-2.31789 2.208339,-2.56873 0.09817,-0.25084 1.194615,-1.09253 2.436543,-1.87041 1.241928,-0.77789 2.258052,-1.61225 2.258052,-1.85413 0,-0.24188 1.29462,-0.75036 2.876934,-1.12995 2.699123,-0.64751 2.898968,-0.8076 3.233385,-2.5902 0.622493,-3.31818 3.923255,-8.57808 5.383028,-8.57808 0.779145,0 2.92205,-1.0698 3.394831,-1.6948 0.152498,-0.20159 1.179237,-0.97863 2.281645,-1.72674 2.574552,-1.74714 5.27671,-1.79093 7.265191,-0.11773 1.982278,1.66798 7.247568,3.73676 12.773188,5.01871 2.4931,0.5784 5.41484,1.65014 6.49277,2.38164 1.07792,0.7315 4.22992,2.20957 7.00442,3.28461 5.88597,2.28062 7.23529,3.58417 8.73457,8.43828 2.35765,7.63317 1.90294,14.0327 -1.21889,17.15453 -3.3572,3.3572 -19.31992,7.15173 -29.71618,7.06388 -3.610701,-0.0305 -8.026991,-0.55684 -13.362674,-1.59255 z">
    </path>
     
  <path id="redcity" 
     style="fill:#ff5555;stroke-width:0.531307"
     d="m 109.27514,170.51745 c -1.97083,-0.79008 -5.92979,-4.25918 -6.81572,-5.97239 -0.44664,-0.8637 -1.17199,-2.79492 -1.61189,-4.29161 -0.43991,-1.49669 -1.164654,-3.13127 -1.610554,-3.63242 -0.470961,-0.52931 -0.690076,-1.41996 -0.522835,-2.12522 0.50968,-2.14937 1.772199,-5.21524 2.410439,-5.85349 0.34127,-0.34127 0.6205,-1.33274 0.6205,-2.20326 0,-0.87051 0.22535,-2.317 0.50079,-3.2144 1.05212,-3.42798 3.21957,-13.38571 3.21897,-14.78867 -2.6e-4,-0.80756 -0.20453,-1.88346 -0.45375,-2.39088 -1.27324,-2.59233 -2.14883,-4.7966 -2.45307,-6.1756 -0.2965,-1.34389 -1.80374,-3.24177 -5.902118,-7.43183 -0.607412,-0.621 -2.123361,-1.9659 -3.368775,-2.98867 -1.760128,-1.44545 -2.916987,-3.22023 -5.194845,-7.96958 -3.506531,-7.311156 -4.277569,-9.934897 -4.677789,-15.917893 -0.166933,-2.495564 -0.417975,-5.438532 -0.557871,-6.539931 -0.221242,-1.741827 -0.08786,-2.065846 1.024527,-2.488774 0.832139,-0.316379 1.603682,-1.336707 2.208684,-2.920879 0.672184,-1.760087 1.296437,-2.526667 2.253091,-2.766771 1.463543,-0.367327 7.541728,0.803132 14.441796,2.781011 2.47123,0.708367 5.12391,1.287939 5.89485,1.287939 0.77094,0 1.83537,0.479184 2.36539,1.064853 0.53002,0.585668 1.89322,1.315151 3.02933,1.621075 3.23801,0.871906 9.94498,7.943713 14.76739,15.570682 2.19164,3.466226 6.13658,9.084788 8.76655,12.485688 l 4.78175,6.18346 -0.0756,9.29785 c -0.0416,5.11382 -0.33196,10.37375 -0.64529,11.68874 -0.31332,1.31498 -1.15339,5.0543 -1.86681,8.3096 -1.50649,6.87401 -1.21612,6.25738 -7.16195,15.20945 -2.52759,3.80554 -5.07378,7.68691 -5.65822,8.62527 -1.73758,2.78983 -2.46275,3.47169 -5.1292,4.82288 -2.10389,1.06613 -3.29418,1.28104 -6.94035,1.25314 -2.42051,-0.0186 -4.95735,-0.25674 -5.63742,-0.52937 z">
    </path>
     
  <path id="peachcity" 
     style="fill:#ff9955;stroke-width:0.531307"
     d="m 61.027386,182.81041 c -4.252931,-1.93119 -7.431894,-5.68353 -12.498004,-14.75221 -1.682308,-3.01144 -8.242038,-10.56109 -13.157422,-15.14299 -8.732758,-8.1403 -13.004832,-17.1289 -11.241577,-23.65271 0.784462,-2.90241 3.581932,-6.5536 5.908882,-7.71213 1.011499,-0.5036 3.968387,-1.93591 6.570863,-3.18292 6.035233,-2.89184 9.347832,-5.96046 9.347832,-8.65935 0,-3.06735 -1.278133,-4.80954 -5.215464,-7.10906 -6.313357,-3.687203 -9.805995,-8.536949 -10.519391,-14.606842 -0.324919,-2.764555 -0.319691,-2.776802 2.889012,-6.765449 4.200583,-5.221629 5.819957,-6.308159 15.6352,-10.490547 1.388036,-0.591457 2.523702,-1.357995 2.523702,-1.703416 0,-1.008605 11.313345,-0.328869 14.876565,0.893826 2.338245,0.802351 2.958568,1.260366 3.104264,2.292027 0.100142,0.709115 0.544504,1.842431 0.98747,2.518481 0.65306,0.996699 0.73465,2.21755 0.431371,6.454828 -0.337135,4.710301 -0.264229,5.430491 0.739272,7.302807 0.612312,1.142442 1.113295,2.442528 1.113295,2.889083 0,1.278618 3.55858,6.33816 6.913788,9.829932 3.918794,4.0783 5.241695,6.26134 7.739528,12.77168 l 2.030666,5.29272 0.206084,11.42308 c 0.251312,13.93002 -0.251579,18.67761 -3.067224,28.95617 -3.987387,14.55602 -7.51255,19.72735 -15.413141,22.61071 -4.972677,1.81481 -6.873973,1.91889 -9.905571,0.54228 z">
    </path>

CodePudding user response：

Welcome to StackOverflow! So, first of all, as you didn't include a complete version of your HTML, I took the liberty of creating one of my own. In your future questions, always remember to include a minimal reproducible example of what you're doing.

If I understand correctly, you want to show different images on the <img> tag depending on the part of the SVG you click. In the snippet below, I've only used a single <img> tag that changes sources between clicks. I have put the styles for the SVG on the <head> tag, which is where they should be most of the times (there are rare exceptions). I've also refactored your code to use .addEventListener(), which is vastly preferred over the HTML onclick="".

<!DOCTYPE html>
<html>
  <head>
    <title>How to make a PIN</title>
    <style type="text/css">
      .land {
        stroke: white;
        stroke-width: 1.5;
        stroke-miterlimit: 4;
      }

      .circle {
        opacity: 0;
        fill-opacity: 1;
        stroke: black;
        stroke-width: 0.5;
        stroke-opacity: 1;
      }

      path:hover {
        opacity: 0.5;
      }
    </style>
  </head>
  <body>
    <div>
      <svg viewBox="0 0 400 400" version="1.1" id="svg5" inkscape:version="1.1.2 (b8e25be833, 2022-02-05)" sodipodi:docname="colourfultest.svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
        <sodipodi:namedview id="namedview7" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageshadow="2" inkscape:pageopacity="0.0" inkscape:pagecheckerboard="0" inkscape:document-units="mm" showgrid="false" inkscape:zoom="0.49798681" inkscape:cx="307.23705" inkscape:cy="562.26389" inkscape:window-width="1300" inkscape:window-height="745" inkscape:window-x="-8" inkscape:window-y="-8" inkscape:window-maximized="1" inkscape:current-layer="svg5" />
        <defs id="defs2" />
        <path id="bluecity"  style="display:inline;fill:#008080;stroke-width:0.531307" d="m 88.728086,215.13469 c -4.383275,-0.85084 -8.447765,-1.76804 -9.0322,-2.03822 -0.584438,-0.27018 -3.45349,-0.6237 -6.375673,-0.78561 -2.922182,-0.1619 -6.180121,-0.54227 -7.239868,-0.84526 -2.218883,-0.63439 -4.714515,-2.90179 -4.714515,-4.28336 0,-2.25724 3.359785,-9.6287 5.317104,-11.66588 1.116415,-1.16196 2.110166,-2.31789 2.208339,-2.56873 0.09817,-0.25084 1.194615,-1.09253 2.436543,-1.87041 1.241928,-0.77789 2.258052,-1.61225 2.258052,-1.85413 0,-0.24188 1.29462,-0.75036 2.876934,-1.12995 2.699123,-0.64751 2.898968,-0.8076 3.233385,-2.5902 0.622493,-3.31818 3.923255,-8.57808 5.383028,-8.57808 0.779145,0 2.92205,-1.0698 3.394831,-1.6948 0.152498,-0.20159 1.179237,-0.97863 2.281645,-1.72674 2.574552,-1.74714 5.27671,-1.79093 7.265191,-0.11773 1.982278,1.66798 7.247568,3.73676 12.773188,5.01871 2.4931,0.5784 5.41484,1.65014 6.49277,2.38164 1.07792,0.7315 4.22992,2.20957 7.00442,3.28461 5.88597,2.28062 7.23529,3.58417 8.73457,8.43828 2.35765,7.63317 1.90294,14.0327 -1.21889,17.15453 -3.3572,3.3572 -19.31992,7.15173 -29.71618,7.06388 -3.610701,-0.0305 -8.026991,-0.55684 -13.362674,-1.59255 z"></path>
        <path id="redcity"  style="fill:#ff5555;stroke-width:0.531307" d="m 109.27514,170.51745 c -1.97083,-0.79008 -5.92979,-4.25918 -6.81572,-5.97239 -0.44664,-0.8637 -1.17199,-2.79492 -1.61189,-4.29161 -0.43991,-1.49669 -1.164654,-3.13127 -1.610554,-3.63242 -0.470961,-0.52931 -0.690076,-1.41996 -0.522835,-2.12522 0.50968,-2.14937 1.772199,-5.21524 2.410439,-5.85349 0.34127,-0.34127 0.6205,-1.33274 0.6205,-2.20326 0,-0.87051 0.22535,-2.317 0.50079,-3.2144 1.05212,-3.42798 3.21957,-13.38571 3.21897,-14.78867 -2.6e-4,-0.80756 -0.20453,-1.88346 -0.45375,-2.39088 -1.27324,-2.59233 -2.14883,-4.7966 -2.45307,-6.1756 -0.2965,-1.34389 -1.80374,-3.24177 -5.902118,-7.43183 -0.607412,-0.621 -2.123361,-1.9659 -3.368775,-2.98867 -1.760128,-1.44545 -2.916987,-3.22023 -5.194845,-7.96958 -3.506531,-7.311156 -4.277569,-9.934897 -4.677789,-15.917893 -0.166933,-2.495564 -0.417975,-5.438532 -0.557871,-6.539931 -0.221242,-1.741827 -0.08786,-2.065846 1.024527,-2.488774 0.832139,-0.316379 1.603682,-1.336707 2.208684,-2.920879 0.672184,-1.760087 1.296437,-2.526667 2.253091,-2.766771 1.463543,-0.367327 7.541728,0.803132 14.441796,2.781011 2.47123,0.708367 5.12391,1.287939 5.89485,1.287939 0.77094,0 1.83537,0.479184 2.36539,1.064853 0.53002,0.585668 1.89322,1.315151 3.02933,1.621075 3.23801,0.871906 9.94498,7.943713 14.76739,15.570682 2.19164,3.466226 6.13658,9.084788 8.76655,12.485688 l 4.78175,6.18346 -0.0756,9.29785 c -0.0416,5.11382 -0.33196,10.37375 -0.64529,11.68874 -0.31332,1.31498 -1.15339,5.0543 -1.86681,8.3096 -1.50649,6.87401 -1.21612,6.25738 -7.16195,15.20945 -2.52759,3.80554 -5.07378,7.68691 -5.65822,8.62527 -1.73758,2.78983 -2.46275,3.47169 -5.1292,4.82288 -2.10389,1.06613 -3.29418,1.28104 -6.94035,1.25314 -2.42051,-0.0186 -4.95735,-0.25674 -5.63742,-0.52937 z"></path>
        <path id="peachcity"  style="fill:#ff9955;stroke-width:0.531307" d="m 61.027386,182.81041 c -4.252931,-1.93119 -7.431894,-5.68353 -12.498004,-14.75221 -1.682308,-3.01144 -8.242038,-10.56109 -13.157422,-15.14299 -8.732758,-8.1403 -13.004832,-17.1289 -11.241577,-23.65271 0.784462,-2.90241 3.581932,-6.5536 5.908882,-7.71213 1.011499,-0.5036 3.968387,-1.93591 6.570863,-3.18292 6.035233,-2.89184 9.347832,-5.96046 9.347832,-8.65935 0,-3.06735 -1.278133,-4.80954 -5.215464,-7.10906 -6.313357,-3.687203 -9.805995,-8.536949 -10.519391,-14.606842 -0.324919,-2.764555 -0.319691,-2.776802 2.889012,-6.765449 4.200583,-5.221629 5.819957,-6.308159 15.6352,-10.490547 1.388036,-0.591457 2.523702,-1.357995 2.523702,-1.703416 0,-1.008605 11.313345,-0.328869 14.876565,0.893826 2.338245,0.802351 2.958568,1.260366 3.104264,2.292027 0.100142,0.709115 0.544504,1.842431 0.98747,2.518481 0.65306,0.996699 0.73465,2.21755 0.431371,6.454828 -0.337135,4.710301 -0.264229,5.430491 0.739272,7.302807 0.612312,1.142442 1.113295,2.442528 1.113295,2.889083 0,1.278618 3.55858,6.33816 6.913788,9.829932 3.918794,4.0783 5.241695,6.26134 7.739528,12.77168 l 2.030666,5.29272 0.206084,11.42308 c 0.251312,13.93002 -0.251579,18.67761 -3.067224,28.95617 -3.987387,14.55602 -7.51255,19.72735 -15.413141,22.61071 -4.972677,1.81481 -6.873973,1.91889 -9.905571,0.54228 z"></path>
      </svg>
    </div>
    <div >
      <img id="image_tag" src="" style="display: none">
    </div>
    <script>
        window.onload = function() {
            document.getElementById("bluecity").addEventListener("click", showImage);
            document.getElementById("redcity").addEventListener("click", showImage);
            document.getElementById("peachcity").addEventListener("click", showImage);
        }
    
      function showImage() {
        const imageSource = getImageSourceFromPath(this);
        const imageElement = document.getElementById("image_tag");
        
        imageElement.src = imageSource;
        imageElement.style.display = "block";
      }

      function getImageSourceFromPath(path) {
        switch (path.id) {
          case "bluecity":
            return "https://i.ibb.co/yfn8GwC/bluecity.jpg";
          case "redcity":
            return "https://i.ibb.co/yfn8GwC/redcity.jpg";
          case "peachcity":
            return "https://i.ibb.co/yfn8GwC/peachcity.jpg";
        }
      }
    </script>
  </body>
</html>

Hope it helps. Cheers!