Zwei Links/Ein Bild – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self Zwei Links/Ein Bild Tue, 13 Nov 18 15:28:45 Z https://forum.selfhtml.org/self/2018/nov/13/zwei-links-strich-ein-bild/1736378#m1736378 https://forum.selfhtml.org/self/2018/nov/13/zwei-links-strich-ein-bild/1736378#m1736378 <p>Hallo zusammen,</p> <p>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?</p> <p>Vielen Dank für Antworten Meggi</p> Zwei Links/Ein Bild Tue, 13 Nov 18 15:31:59 Z https://forum.selfhtml.org/self/2018/nov/13/zwei-links-strich-ein-bild/1736380#m1736380 https://forum.selfhtml.org/self/2018/nov/13/zwei-links-strich-ein-bild/1736380#m1736380 <p>Hallo Meggi,</p> <blockquote> <p>Ich habe ein Bild und mein Ziel wäre es, dass wenn man auf die eine Hälfte vom Bild klickt,</p> </blockquote> <p>Bilder sind von Hause aus keine interaktiven Elemente.</p> <blockquote> <p>man auf eine andere Seite weitergeleitet wird, als wenn man auf die andere Hälfte klickt. Gibt es da eine Möglichkeit</p> </blockquote> <p>Ja, die gibt es. Die Frage ist, wie ist dein Kenntnisstand?</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Pantoffeltierchen haben keine Hobbys. </div> Zwei Links/Ein Bild Tue, 13 Nov 18 15:32:46 Z https://forum.selfhtml.org/self/2018/nov/13/zwei-links-strich-ein-bild/1736381#m1736381 https://forum.selfhtml.org/self/2018/nov/13/zwei-links-strich-ein-bild/1736381#m1736381 <p>Moin,</p> <p>schau mal, was unser Wiki zum Thema <a href="https://wiki.selfhtml.org/wiki/HTML/Multimedia_und_Grafiken/verweissensitive_Grafiken" rel="nofollow noopener noreferrer"><em>verweissensitive Grafiken</em></a> schreibt.</p> <p>Viele Grüße<br> Robert</p> Zwei Links/Ein Bild Tue, 13 Nov 18 16:25:49 Z https://forum.selfhtml.org/self/2018/nov/13/zwei-links-strich-ein-bild/1736393#m1736393 https://forum.selfhtml.org/self/2018/nov/13/zwei-links-strich-ein-bild/1736393#m1736393 <p>hallo</p> <blockquote> <p>Hallo zusammen,</p> <p>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?</p> </blockquote> <p>Es gibt mehrere Lösungsansätze.</p> <pre><code class="block language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>de<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>undefined<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">.linkgroup</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span>flex<span class="token punctuation">;</span><span class="token property">flex-flow</span><span class="token punctuation">:</span>row<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.linkgroup a</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span>inline-block<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span>4em<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>4em<span class="token punctuation">;</span> <span class="token property">background-image</span><span class="token punctuation">:</span><span class="token function">linear-gradient</span><span class="token punctuation">(</span>90deg<span class="token punctuation">,</span> black 4em<span class="token punctuation">,</span> red 4em<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">background-size</span><span class="token punctuation">:</span>8em 4em<span class="token punctuation">;</span> <span class="token property">background-repeat</span><span class="token punctuation">:</span>no-repeat<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span>transparent<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.linkgroup a:first-child</span> <span class="token punctuation">{</span><span class="token property">background-position</span><span class="token punctuation">:</span> 0em 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.linkgroup a:last-child</span> <span class="token punctuation">{</span><span class="token property">background-position</span><span class="token punctuation">:</span> -4em 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.linkgroup a:hover, .linkgroup a:focus</span> <span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span>blue<span class="token punctuation">;</span><span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Beispiel<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>linkgroup<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>Statt eines Bildes verwende ich hier einen linear-gradient</p> <div class="signature">-- <br> <a href="https://beat-stoecklin.ch/pub/index.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/pub/index.html</a> </div> Zwei Links/Ein Bild Wed, 14 Nov 18 08:12:52 Z https://forum.selfhtml.org/self/2018/nov/13/zwei-links-strich-ein-bild/1736440#m1736440 https://forum.selfhtml.org/self/2018/nov/13/zwei-links-strich-ein-bild/1736440#m1736440 <p>Hej Meggi,</p> <blockquote> <p>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?</p> </blockquote> <p>Auch wenn dir bereits eine hilfreiche Antwort gegeben wurde. In den allermeisten Fällen wird es sinnvoll sein, zwei grafische Elemente zu haben.</p> <p>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.</p> <p>Wenn Du z.B. ein Bild hast, das wie folgt aussieht</p> <p>Ja | Nein</p> <p>spricht ja nichts dagegen ein Bild für „ja“ zu verwenden und ein zweites für „nein“.</p> <p>Verweissensitive Grafik benötigte man früher vor allem für Karten und kartenähnliche Gebilde.</p> <p>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.</p> <p>Marc</p> Zwei Links/Ein Bild Tue, 13 Nov 18 20:06:22 Z https://forum.selfhtml.org/self/2018/nov/13/zwei-links-strich-ein-bild/1736425#m1736425 https://forum.selfhtml.org/self/2018/nov/13/zwei-links-strich-ein-bild/1736425#m1736425 <p>Vielen Dank, war genau das was ich gebraucht habe, hat super funktioniert</p> Zwei Links/Ein Bild Wed, 14 Nov 18 08:21:04 Z https://forum.selfhtml.org/self/2018/nov/13/zwei-links-strich-ein-bild/1736441#m1736441 https://forum.selfhtml.org/self/2018/nov/13/zwei-links-strich-ein-bild/1736441#m1736441 <p>Hallo Marc,</p> <blockquote> <blockquote> <p>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?</p> </blockquote> <p>Auch wenn dir bereits eine hilfreiche Antwort gegeben wurde. In den allermeisten Fällen wird es sinnvoll sein, zwei grafische Elemente zu haben.</p> </blockquote> <p>Das kommt auf den Anwendungsfall an.</p> <blockquote> <p>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.</p> </blockquote> <p>Bei einer Karte würde ich genau so ein Verhalten durchaus erwarten, zumal du <code>area</code> mit einem <code>title</code> 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.</p> <blockquote> <p>Verweissensitive Grafik benötigte man früher vor allem für Karten und kartenähnliche Gebilde.</p> <p>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.</p> </blockquote> <p>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“.</p> <p>Viele Grüße<br> Robert</p> Zwei Links/Ein Bild Wed, 14 Nov 18 08:50:16 Z https://forum.selfhtml.org/self/2018/nov/13/zwei-links-strich-ein-bild/1736443#m1736443 https://forum.selfhtml.org/self/2018/nov/13/zwei-links-strich-ein-bild/1736443#m1736443 <p>@@marctrix</p> <blockquote> <p>In den allermeisten Fällen wird es sinnvoll sein, zwei grafische Elemente zu haben.</p> </blockquote> <p>Oder drei …</p> <blockquote> <p>Wenn Du z.B. ein Bild hast, das wie folgt aussieht</p> <p>Ja | Nein</p> <p>spricht ja nichts dagegen ein Bild für „ja“ zu verwenden und ein zweites für „nein“.</p> </blockquote> <p>… 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.</p> <p>Dann kann man später noch Texte und Hintergrund ohne aufwendige Grafikbearbeitung austauschen.</p> <p>Performanter ist natürlich eine Grafikdatei anstatt drei. Muss man halt abwägen …</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Zwei Links/Ein Bild Wed, 14 Nov 18 11:18:51 Z https://forum.selfhtml.org/self/2018/nov/13/zwei-links-strich-ein-bild/1736482#m1736482 https://forum.selfhtml.org/self/2018/nov/13/zwei-links-strich-ein-bild/1736482#m1736482 <p>Hej Robert,</p> <blockquote> <p>Bei einer Karte würde ich genau so ein Verhalten durchaus erwarten, zumal du <code>area</code> mit einem <code>title</code> 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.</p> </blockquote> <p>Wer sieht den title denn?</p> <p>ber Karten kommen ja eh unten noch mal.</p> <blockquote> <blockquote> <p>Verweissensitive Grafik benötigte man früher vor allem für Karten und kartenähnliche Gebilde.</p> <p>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.</p> </blockquote> <p>Wie werden denn solche Karten technisch umgesetzt? </p> </blockquote> <p>Ich hätte jetzt gedacht in einem Vektor-Format. Irre ich?</p> <blockquote> <p>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“.</p> </blockquote> <p>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.</p> <p>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</p> <p> </p> <p>Marc</p> Zwei Links/Ein Bild Wed, 14 Nov 18 11:11:47 Z https://forum.selfhtml.org/self/2018/nov/13/zwei-links-strich-ein-bild/1736480#m1736480 https://forum.selfhtml.org/self/2018/nov/13/zwei-links-strich-ein-bild/1736480#m1736480 <p>Hej Gunnar,</p> <blockquote> <p>@@marctrix</p> <blockquote> <p>In den allermeisten Fällen wird es sinnvoll sein, zwei grafische Elemente zu haben.</p> </blockquote> <p>Oder drei …</p> </blockquote> <p>Oder eine Hintergrundfarbe - oder zwei </p> <p>Wenn man das konkrete Beispiel sähe, wäre auch klar, ob man überhaupt <strong>eine</strong> 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.</p> <blockquote> <blockquote> <p>Wenn Du z.B. ein Bild hast, das wie folgt aussieht</p> <p>Ja | Nein</p> <p>spricht ja nichts dagegen ein Bild für „ja“ zu verwenden und ein zweites für „nein“.</p> </blockquote> <p>… 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.</p> <p>Dann kann man später noch Texte und Hintergrund ohne aufwendige Grafikbearbeitung austauschen.</p> <p>Performanter ist natürlich eine Grafikdatei anstatt drei. Muss man halt abwägen …</p> </blockquote> <p>Mit HTTP 2.0 nicht unbedingt. Auch hier wieder: Führt vermutlich zu weit…</p> <p>Marc</p> Zwei Links/Ein Bild Wed, 14 Nov 18 12:39:32 Z https://forum.selfhtml.org/self/2018/nov/13/zwei-links-strich-ein-bild/1736492#m1736492 https://forum.selfhtml.org/self/2018/nov/13/zwei-links-strich-ein-bild/1736492#m1736492 <p>Moin Marc,</p> <blockquote> <p>Wer sieht den title denn?</p> </blockquote> <p>Jeder, der mit der Maus kurz genug über der <code>area</code> verweilt.</p> <blockquote> <blockquote> <p>Wie werden denn solche Karten technisch umgesetzt? </p> </blockquote> <p>Ich hätte jetzt gedacht in einem Vektor-Format. Irre ich?</p> </blockquote> <p>Kleiner Tipp: Schau mal, was OpenStreetMap oder Google Maps alles laden </p> <blockquote> <p>ich wüsste jetzt aus dem Kopf gar nicht mehr, wie man eine Image-Map barrierefrei bekommt</p> </blockquote> <p>Wie praktisch, dass <a href="https://forum.selfhtml.org/m1736381" rel="noopener noreferrer">jemand einen brauchbaren Link dazu</a> geliefert hat.</p> <p>Viele Grüße<br> Robert</p> Zwei Links/Ein Bild Wed, 14 Nov 18 16:44:02 Z https://forum.selfhtml.org/self/2018/nov/13/zwei-links-strich-ein-bild/1736515#m1736515 https://forum.selfhtml.org/self/2018/nov/13/zwei-links-strich-ein-bild/1736515#m1736515 <p>Hej Robert,</p> <blockquote> <blockquote> <p>Wer sieht den title denn?</p> </blockquote> <p>Jeder, der mit der Maus kurz genug über der <code>area</code> verweilt.</p> </blockquote> <p>Muss ich jetzt sagen, dass die meisten nutzer ohne Maus unterwegs sind - und dagegen auch nichts tun können? </p> <blockquote> <blockquote> <p>ich wüsste jetzt aus dem Kopf gar nicht mehr, wie man eine Image-Map barrierefrei bekommt</p> </blockquote> <p>Wie praktisch, dass <a href="https://forum.selfhtml.org/m1736381" rel="noopener noreferrer">jemand einen brauchbaren Link dazu</a> geliefert hat.</p> </blockquote> <p>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.</p> <p>Nur ist der Link in bezug auf barrierefreie Imagemaps nicht brauchbar. </p> <p>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…</p> <p>Müsste ich selber noch mal nachlesen, falls es jemanden interessiert.</p> <p>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.</p> <p>Marc</p>