title: How do I use the onmouseover function to highlight a portion of an SVG image?
body: <p>I have a SVG image of the map of Europe, with partitions for each country represented by paths. If I hover over a country, I want the opacity of the country that is hovered over to change to 0.5. I've tried defining a JavaScript function to call, but nothing seems to happen when I hover over a country. Here is my SVG code for reference, and the JavaScript I've tried to write:</p>
  
  <pre><code>&lt;script
      xlink:href="../map.js"
      id="script99"
      type="text/javascript" /&gt;
   &lt;g
      inkscape:groupmode="layer"
      id="layer2"
      class="section"
      inkscape:label="paths"
      transform="translate(0,-230.143)"&gt;
     &lt;path
        style="fill:#3399ff;stroke:#000000;stroke-width:0.06832593px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
        d="m 170.10418,253.29039 0.16365,-1.29169 2.4003,-0.68196 2.91852,-0.51346 0.90921,0.17651 0.12727,0.61776 -0.50914,0.82636 -0.14547,1.3639 -1.51836,1.04298 -0.82736,0.85845 c 0,0 -0.28187,0.48137 -0.33642,0.48939 -0.0545,0.007 -0.99103,-0.7381 -0.99103,-0.7381 l -0.66371,-0.43325 -0.60915,-1.37191 z"
        id="ukraine" 
        onclick="Here(id)"
        onmouseover="MouseOver(this)"
        inkscape:connector-curvature="0"
        /&gt; 
  </code></pre>
  
  <pre><code>function MouseOver(elem){
      elem.opacity = 0.1;
  }
  </code></pre>