SELF-Treffen in Mannheim 2025
SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.
Beispiel:SVG-responsive-imagemap.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<style>
</style>
<title>responsive Imagemap mit SVG</title>
</head>
<body>
<figure id="imagemap">
<svg 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" >
<title>George Washington
(1732 - 1799)</title>
</rect>
</a>
<a href="https://de.wikipedia.org/wiki/Thomas_Jefferson">
<rect x="550" y="225" opacity="0" width="200" height="300" >
<title>Thomas Jefferson
(1743 - 1826)</title>
</rect>
</a>
<a href="https://de.wikipedia.org/wiki/Theodore_Roosevelt">
<rect x="750" y="375" opacity="0" width="200" height="300" >
<title>Theodor Roosevelt
(1858 - 1919)</title>
</rect>
</a>
<a href="https://de.wikipedia.org/wiki/Abraham_Lincoln">
<rect x="999" y="375" opacity="0" width="200" height="300" >
<title>Abraham Lincoln
(1809 - 1865)</title>
</rect>
</a>
</svg>
<figcaption>Mount Rushmore National Memorial - Klicke auf die Köpfe!</figcaption>
</figure>
</body>
</html>
