<!--
author: Volker Göhler
email:    volker.goehler@informatik.tu-freiberg.de
language: de
narrator: German Female
version: 0.0.9
edit: true
date: 2025-06-24
logo: ../assets/img/Logo_234px.png
comment: test course to test out image maps and svg

import: https://raw.githubusercontent.com/Ifi-DiAgnostiK-Project/Piktogramme/refs/heads/main/makros.md

title: Sägenbilder zum Anklicken

tags: Experimente

@style
.flex-container {
    display: flex;[](https://liascript.github.io/LiveEditor/liascript/index.html?#5)
    flex-wrap: wrap; /* Allows the items to wrap as needed */
    align-items: stretch;
    gap: 20px; /* Adds both horizontal and vertical spacing between items */
}

.flex-child {
    flex: 1;
    margin-right: 20px; /* Adds space between the columns */
}

@media (max-width: 600px) {
    .flex-child {
        flex: 100%; /* Makes the child divs take up the full width on slim devices */
        margin-right: 0; /* Removes the right margin */
    }
}
@end

import: https://raw.githubusercontent.com/Ifi-DiAgnostiK-Project/Piktogramme/refs/heads/main/makros.md
-->
# Image Maps:

> Image Map Generated by http://www.image-map.net/

<img src="https://www.heimwerker-test.de/images/testbilder/big/tisch_kreissaegen_guede_gtks_2200_pro_bild_1411722386.jpg" alt="Güde GTKS 2200" usemap="#image-map">

<map name="image-map">
    <area target="" alt="Sägeblatt" title="Sägeblatt" href="" coords="944,269,748,185" shape="rect">
</map>

Man sieht nichts weil die unsichtbar darüber liegt. Lässt sich da was machen mit javascript ? 😂

@Warnzeichen.Automatischer_Anlauf(10)

# Das ganze als svg umgewandelt und interaktiv

Finde das Sägeblatt:

<svg width="1000" height="700" xmlns="http://www.w3.org/2000/svg">
  <image href="https://www.heimwerker-test.de/images/testbilder/big/tisch_kreissaegen_guede_gtks_2200_pro_bild_1411722386.jpg" width="1000" height="700"/>
  <a href="#" title="Sägeblatt">
    <rect x="468" y="100" width="196" height="84"
          fill="transparent"
          stroke="red"
          stroke-width="0"
          onmouseover="this.setAttribute('fill','rgba(255,0,0,0.3)')"
          onmouseout="this.setAttribute('fill','transparent')"/>
  </a>
</svg>

Ist jetzt mit einer SVG Umgebung gelöst. Probleme seh ich darin wie man die Zonen definiert. Definitiv lösbar, aber wie hoch prioritisieren wir das?
