Zwei Links/Ein Bild
0 
Matthias Apsel
0 
Robert B.
0 0 
marctrix
Zwei Links/Ein Bild
Gunnar BittersmannHallo 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
-
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. -
-
Vielen Dank, war genau das was ich gebraucht habe, hat super funktioniert
-
-
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
-
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
-
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
areamit einemtitleausstatten 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-
Hej Robert,
Bei einer Karte würde ich genau so ein Verhalten durchaus erwarten, zumal du
areamit einemtitleausstatten 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
-
Moin Marc,
Wer sieht den title denn?
Jeder, der mit der Maus kurz genug über der
areaverweilt.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-
Hej Robert,
Wer sieht den title denn?
Jeder, der mit der Maus kurz genug über der
areaverweilt.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
-
-
-
-
@@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-
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
-
-