Meggi: Zwei Links/Ein Bild

Hallo zusammen,

wir müssen in der Schule gerade eine Webseite programmieren. Ich habe ein Bild und mein Ziel wäre es, dass wenn man auf die eine Hälfte vom Bild klickt, man auf eine andere Seite weitergeleitet wird, als wenn man auf die andere Hälfte klickt. Gibt es da eine Möglichkeit oder kann man nur ein Bild mit einem Link verbinden?

Vielen Dank für Antworten Meggi

  1. Hallo Meggi,

    Ich habe ein Bild und mein Ziel wäre es, dass wenn man auf die eine Hälfte vom Bild klickt,

    Bilder sind von Hause aus keine interaktiven Elemente.

    man auf eine andere Seite weitergeleitet wird, als wenn man auf die andere Hälfte klickt. Gibt es da eine Möglichkeit

    Ja, die gibt es. Die Frage ist, wie ist dein Kenntnisstand?

    Bis demnächst
    Matthias

    --
    Pantoffeltierchen haben keine Hobbys.
  2. Moin,

    schau mal, was unser Wiki zum Thema verweissensitive Grafiken schreibt.

    Viele Grüße
    Robert

    1. Vielen Dank, war genau das was ich gebraucht habe, hat super funktioniert

  3. hallo

    Hallo zusammen,

    wir müssen in der Schule gerade eine Webseite programmieren. Ich habe ein Bild und mein Ziel wäre es, dass wenn man auf die eine Hälfte vom Bild klickt, man auf eine andere Seite weitergeleitet wird, als wenn man auf die andere Hälfte klickt. Gibt es da eine Möglichkeit oder kann man nur ein Bild mit einem Link verbinden?

    Es gibt mehrere Lösungsansätze.

    <!DOCTYPE html>
    <html lang="de">
    <head>
    <title>undefined</title>
    <style>
    .linkgroup { display:flex;flex-flow:row; }
    .linkgroup a { 
    	display:inline-block; width:4em; height:4em; 
    	background-image:linear-gradient(90deg, black 4em, red 4em);
    	background-size:8em 4em;
    	background-repeat:no-repeat;
    	color:transparent;
    }
    .linkgroup a:first-child {background-position: 0em 0; }
    .linkgroup a:last-child {background-position: -4em 0; }
    .linkgroup a:hover,
    .linkgroup a:focus {color:blue;}
    </style>
    </head>
    <body>
    <h1>Beispiel</h1>
    <p class="linkgroup">
    	<a href="">Link 1</a>
    	<a href="">Link 2</a>
    </p>
    </body>
    </html>
    

    Statt eines Bildes verwende ich hier einen linear-gradient

  4. Hej Meggi,

    Ich habe ein Bild und mein Ziel wäre es, dass wenn man auf die eine Hälfte vom Bild klickt, man auf eine andere Seite weitergeleitet wird, als wenn man auf die andere Hälfte klickt. Gibt es da eine Möglichkeit oder kann man nur ein Bild mit einem Link verbinden?

    Auch wenn dir bereits eine hilfreiche Antwort gegeben wurde. In den allermeisten Fällen wird es sinnvoll sein, zwei grafische Elemente zu haben.

    Ist seltsam, wenn ein Element auf zwei Ziele verweist. Das macht in der Regel nciht nur bei der Erstellung Schwierigkeiten, sondern auch bei der Bedienung.

    Wenn Du z.B. ein Bild hast, das wie folgt aussieht

    Ja | Nein

    spricht ja nichts dagegen ein Bild für „ja“ zu verwenden und ein zweites für „nein“.

    Verweissensitive Grafik benötigte man früher vor allem für Karten und kartenähnliche Gebilde.

    Kartenpixelgrafiken sind dank diverser kostenloser Kartenangebote im Web obsolet geworden, kartenähnliche Gebilde dank der zahlreichen Möglichkeiten, Elemente auf einem Hintergrund zu platzieren in aller Regel ebenfalls unnötig.

    Marc

    1. Hallo Marc,

      Ich habe ein Bild und mein Ziel wäre es, dass wenn man auf die eine Hälfte vom Bild klickt, man auf eine andere Seite weitergeleitet wird, als wenn man auf die andere Hälfte klickt. Gibt es da eine Möglichkeit oder kann man nur ein Bild mit einem Link verbinden?

      Auch wenn dir bereits eine hilfreiche Antwort gegeben wurde. In den allermeisten Fällen wird es sinnvoll sein, zwei grafische Elemente zu haben.

      Das kommt auf den Anwendungsfall an.

      Ist seltsam, wenn ein Element auf zwei Ziele verweist. Das macht in der Regel nciht nur bei der Erstellung Schwierigkeiten, sondern auch bei der Bedienung.

      Bei einer Karte würde ich genau so ein Verhalten durchaus erwarten, zumal du area mit einem title ausstatten kannst. Wobei, was heißt Karte (die man ja eh eigentlich lieber als SVG hätte), man könnte auch an Fotos mit verlinkten Details denken.

      Verweissensitive Grafik benötigte man früher vor allem für Karten und kartenähnliche Gebilde.

      Kartenpixelgrafiken sind dank diverser kostenloser Kartenangebote im Web obsolet geworden, kartenähnliche Gebilde dank der zahlreichen Möglichkeiten, Elemente auf einem Hintergrund zu platzieren in aller Regel ebenfalls unnötig.

      Wie werden denn solche Karten technisch umgesetzt? 😉 Und warum soll ich auf fremde, „kostenlose“ (du bezahlst oft genug mit den Besuchern deiner Seite) Drittinhalte einbinden, wenn der Link innerhalb meines Webprojekts bleibt? Ich widerspreche dem „früher“ und dem „obsolet“.

      Viele Grüße
      Robert

      1. Hej Robert,

        Bei einer Karte würde ich genau so ein Verhalten durchaus erwarten, zumal du area mit einem title ausstatten kannst. Wobei, was heißt Karte (die man ja eh eigentlich lieber als SVG hätte), man könnte auch an Fotos mit verlinkten Details denken.

        Wer sieht den title denn?

        ber Karten kommen ja eh unten noch mal.

        Verweissensitive Grafik benötigte man früher vor allem für Karten und kartenähnliche Gebilde.

        Kartenpixelgrafiken sind dank diverser kostenloser Kartenangebote im Web obsolet geworden, kartenähnliche Gebilde dank der zahlreichen Möglichkeiten, Elemente auf einem Hintergrund zu platzieren in aller Regel ebenfalls unnötig.

        Wie werden denn solche Karten technisch umgesetzt? 😉

        Ich hätte jetzt gedacht in einem Vektor-Format. Irre ich?

        Und warum soll ich auf fremde, „kostenlose“ (du bezahlst oft genug mit den Besuchern deiner Seite) Drittinhalte einbinden, wenn der Link innerhalb meines Webprojekts bleibt? Ich widerspreche dem „früher“ und dem „obsolet“.

        Gute Argumente. Solche Karten sind auch ein anderer Anwendungsfall, als der hier gefragte. Ich habe nur irgendwie direkt an Karten gedacht, als ich an Image-Maps dachte.

        Wenn man die auf seiner Website einbindet kann man ja überlegen, ob einzelne Elemente sinnvoller sind, die darauf platziert werden — ich wüsste jetzt aus dem Kopf gar nicht mehr, wie man eine Image-Map barrierefrei bekommt, weil ich die seit vielen Jahren nirgends mehr eingesetzt habe oder auch nur in einer Seite gesehen hätte, die ich testen musste in den letzten 5-10 Jahren. Aber es geht irgendwie. Das weiß ich noch

        😉

        Marc

        1. Moin Marc,

          Wer sieht den title denn?

          Jeder, der mit der Maus kurz genug über der area verweilt.

          Wie werden denn solche Karten technisch umgesetzt? 😉

          Ich hätte jetzt gedacht in einem Vektor-Format. Irre ich?

          Kleiner Tipp: Schau mal, was OpenStreetMap oder Google Maps alles laden 😉

          ich wüsste jetzt aus dem Kopf gar nicht mehr, wie man eine Image-Map barrierefrei bekommt

          Wie praktisch, dass jemand einen brauchbaren Link dazu geliefert hat.

          Viele Grüße
          Robert

          1. Hej Robert,

            Wer sieht den title denn?

            Jeder, der mit der Maus kurz genug über der area verweilt.

            Muss ich jetzt sagen, dass die meisten nutzer ohne Maus unterwegs sind - und dagegen auch nichts tun können? 😉

            ich wüsste jetzt aus dem Kopf gar nicht mehr, wie man eine Image-Map barrierefrei bekommt

            Wie praktisch, dass jemand einen brauchbaren Link dazu geliefert hat.

            Klickbare Flächen müssen mindestens 44px mal 44px groß sein, Links müssen als Links ausgezeichnet sein, Kontraste ausreichend hoch sein, der Fokus muss klar erkennbar sein, die INhalte müssen auf 200% skaliert bei einem Viewport von 1280x768px angezeigt werden können, alt-Texte müssen über Funktion und Inhalt informieren, alt-Text und title-Text sollten nciht identisch sein, die ebenfalls erwähnten serverseitigen image-maps sind per se nicht zugänglich; da gibt es ganz viele Dinge, die mir auf Anhieb einfallen, die nicht im Artikel berücksichtigt sind — müssen sie auch nicht, weil es da nicht um Barrierefreiheit geht, sondern um verweissensitive Grafiken.

            Nur ist der Link in bezug auf barrierefreie Imagemaps nicht brauchbar. 😉

            Ich glaube die Empfehlung war alle enthaltenen Links noch mal per Liste zugänglich zu machen, ist aber wie gesagt so lange her, dass ich öffentlich lieber keine halbgare Aussage dazu treffen möchte…

            Müsste ich selber noch mal nachlesen, falls es jemanden interessiert.

            Es wäre schön, wenn der OP noch mitliest. Wenn man Barrierefreieheit von Anfang an berücksichtigt, geht das in Fleisch und Blut über und erzeugt keinen Mehraufwand.

            Marc

    2. @@marctrix

      In den allermeisten Fällen wird es sinnvoll sein, zwei grafische Elemente zu haben.

      Oder drei …

      Wenn Du z.B. ein Bild hast, das wie folgt aussieht

      Ja | Nein

      spricht ja nichts dagegen ein Bild für „ja“ zu verwenden und ein zweites für „nein“.

      … eins für „ja“, eins für „nein“, eins für den Hintergrund. Wenn nicht „ja“ und „nein“ dann doch auf das Hintergrundbild gesetzte Texte sind.

      Dann kann man später noch Texte und Hintergrund ohne aufwendige Grafikbearbeitung austauschen.

      Performanter ist natürlich eine Grafikdatei anstatt drei. Muss man halt abwägen …

      LLAP 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      1. Hej Gunnar,

        @@marctrix

        In den allermeisten Fällen wird es sinnvoll sein, zwei grafische Elemente zu haben.

        Oder drei …

        Oder eine Hintergrundfarbe - oder zwei 😉

        Wenn man das konkrete Beispiel sähe, wäre auch klar, ob man überhaupt eine Grafik benötigt oder statt dessen gestaltete Text, eine Farbverkauf SVG oder anderes sinnvoll wären. Führt Jet aber vielleicht etwas weit bei so einer Anfängerfrage.

        Wenn Du z.B. ein Bild hast, das wie folgt aussieht

        Ja | Nein

        spricht ja nichts dagegen ein Bild für „ja“ zu verwenden und ein zweites für „nein“.

        … eins für „ja“, eins für „nein“, eins für den Hintergrund. Wenn nicht „ja“ und „nein“ dann doch auf das Hintergrundbild gesetzte Texte sind.

        Dann kann man später noch Texte und Hintergrund ohne aufwendige Grafikbearbeitung austauschen.

        Performanter ist natürlich eine Grafikdatei anstatt drei. Muss man halt abwägen …

        Mit HTTP 2.0 nicht unbedingt. Auch hier wieder: Führt vermutlich zu weit…

        Marc