<!--
author:    Volker Göhler
email:     volker.goehler@informatik.tu-freiberg.de
date:      2025-06-24
version:   0.0.9

narrator:  German Female
language:  de

edit:      https://github.dev/Ifi-DiAgnostiK-Project/Tischlerei/blob/main/materials/Saege_Test.md

logo:      ../assets/img/Logo_234px.png

title:     Sägenbilder zum Anklicken
comment:   test course to test out image maps and svg
tags:      Experimente

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

@style
.flex-container {
    display: flex;
    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
-->

# 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?
