dedlfix: Möglichkeiten der Regionenkennzeichnung auf Bildern

Tach!

Welche Möglichkeiten gibt es, auf Bildern Regionen mit Namen zu kennzeichnen und auch deren Umriss zu zeigen?

Gegeben sei eine Landkarte (rechteckig), und die Gebiete, die sie darstellt, sind natürlich in Regionen aufgeteilt. Zum Beispiel Staaten oder Provinzen oder Landkreise oder Postleitzahlengebiete, sowas in der Art. Nun geht es darum, zumindest eine Beschriftung aufzubringen, um die Namen der Regionen zu zeigen. Zusätzlich wäre es hilfreich, dass man die Gebiete oder Grenzen der Regionen anzeigen kann. Pomforzionös wäre es, wenn die Namen zwar ständig zu sehen sind, die Regionen aber erst durch Mausdraufzeigen hervorgehoben werden (oder vielleicht der Rest abgedunkelt wird).

Bekannt ist mir HTMLs ImageMap-Geschichte (img usemap, map und area). Das ist zwar einerseits auch gewünscht, dass zu einer Ziel-URL verlinkt werden kann, andererseits jedoch fehlt dem die Möglichkeit der Beschriftung, und die Grenzen sind auch eher unsichtbar.

Eine einfache Grafik mit eingebauter Beschriftung ist auch nicht wünschenswert, weil das bei Änderungen schwer zu warten ist.

dedlfix.

akzeptierte Antworten

  1. @@dedlfix

    Welche Möglichkeiten gibt es, auf Bildern Regionen mit Namen zu kennzeichnen und auch deren Umriss zu zeigen?

    SVG.

    Gegeben sei eine Landkarte

    Die sollte schon SVG sein. Oder in ein solches vektorisiert werden. Und wenn nicht, kann man ja auch eine Pixelgrafik in SVG einbetten.

    LLAP 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
  2. Servus!

    Pomforzionös wäre es, wenn die Namen zwar ständig zu sehen sind, die Regionen aber erst durch Mausdraufzeigen hervorgehoben werden (oder vielleicht der Rest abgedunkelt wird).

    Ist da was dabei?

    der Vorteil -es ist alles nur CSS.

    Herzliche Grüße

    Matthias Scharwies

    --
    Es gibt viel zu tun: ToDo-Liste
    1. Tach!

      Ist da was dabei?

      Sieht schon mal gut aus. Muss ich mir doch mal SVG anschauen.

      Ich befürchtete schon, dass SVG als Antwort kommt. Allerdings habe ich damit ein paar Bauchschmerzen. Das Resultat ist zwar einigermaßen einfach änderbar, aber letztlich läuft das im Prinzip auch darauf hinaus, dass man das Bild als solches bearbeiten muss, wenn man es nicht ins HTML einbetten kann/möchte. Das hab ich in der Aufgabenstellung nicht als Gegebenheit genannt, aber es geht um ein Wiki und da ist man stark eingeschränkt. Da bleibt quasi nur neues SVG-Dokument hochladen, was aufwendiger ist, als im Seitentext etwas hinzuzufügen. Obwohl, irgendwas mit Templates und Widgets wird man da doch zaubern können.

      dedlfix.

      1. @@dedlfix

        Ich befürchtete schon, dass SVG als Antwort kommt.

        Kein Grund zur Sorge. Sieht dann so in der Art aus.

        Das hab ich in der Aufgabenstellung nicht als Gegebenheit genannt, aber es geht um ein Wiki und da ist man stark eingeschränkt. Da bleibt quasi nur neues SVG-Dokument hochladen, was aufwendiger ist, als im Seitentext etwas hinzuzufügen.

        „Etwas“ heißt HTML-Elemente?

        Wenn du HTML-Elemente hinzufügen kannst, kannst du auch SVG-Elemente hinzufügen.

        LLAP 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        1. Tach!

          Das hab ich in der Aufgabenstellung nicht als Gegebenheit genannt, aber es geht um ein Wiki und da ist man stark eingeschränkt. Da bleibt quasi nur neues SVG-Dokument hochladen, was aufwendiger ist, als im Seitentext etwas hinzuzufügen.

          „Etwas“ heißt HTML-Elemente?

          Jein, nur eine sehr eingeschränkte Auswahl an HTML-Elementen.

          Wenn du HTML-Elemente hinzufügen kannst, kannst du auch SVG-Elemente hinzufügen.

          Es gibt zum Beispiel die Widgets-Extension, darüber können Admins beliebigen Code in eine Seite bringen. Die müsste sowieso auch bei Nicht-SVG-Lösungen zum Einsatz kommen, um das benötigte CSS abseits vom style-Attribut der einzelnen Elemente notieren zu können (abgesehen vom globalen Wiki-CSS). Also wird es am Ende gehüpft wie gesprungen sein und eingebettetes SVG die Lösung werden. Für die Nicht-Admin-Anwender muss man sich was mit Template ausdenken, worüber das Widget mit den Regionsdaten versorgt wird.

          Also ja: "Obwohl, irgendwas mit Templates und Widgets wird man da doch zaubern können."

          Aber abgesehen vom SVG, welche Möglichkeiten bietet CSS nebst HTML an?

          dedlfix.