Beispiel:SVG-responsive-imagemap.svg

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
     viewBox="0 0 1536 1024" >
  <defs>
    <style>
      rect:hover {
	    fill: white;
	    opacity:0.5;
	  }
    </style>
  </defs> 
 
  <image width="1536" height="1024" href="https://wiki.selfhtml.org/images/8/82/Mount_Rushmore.jpg">
    <title>Mount Rushmore National Memorial</title>
  </image>	
  
  <a href="https://de.wikipedia.org/wiki/George_Washington">
    <rect x="300" y="125" opacity="0" width="250" height="300" />
  </a>
  <a href="https://de.wikipedia.org/wiki/Thomas_Jefferson">
    <rect x="550" y="225" opacity="0" width="200" height="300" />
  </a>
  <a href="https://de.wikipedia.org/wiki/Theodore_Roosevelt">
    <rect x="750" y="375" opacity="0" width="200" height="300" />
  </a>
  <a href="https://de.wikipedia.org/wiki/Abraham_Lincoln">
    <rect x="999" y="375" opacity="0" width="200" height="300" />
  </a>
</svg>