Anker setzen – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self?srt=yes Anker setzen Mon, 25 Jun 18 17:35:48 Z https://forum.selfhtml.org/self/2018/jun/25/anker-setzen/1725543?srt=yes#m1725543 https://forum.selfhtml.org/self/2018/jun/25/anker-setzen/1725543?srt=yes#m1725543 <p>Hi, gefühlt ein altes Problem. Ich habe eine Deutschlandkarte erstellt und eine Liste mit Orten als <ol>. Die Orte sind nach Himmelsrichtungen sortiert und ich möchte, dass beim Klick auf die Grafik der erste Ort der Himmelsrichtung angezeigt wird. (hoffentlich verständlich erklärt)</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://.../wp-content/uploads/2018/06/kartei_deutschland.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">usemap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#image-map<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>map</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image-map<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>area</span> <span class="token attr-name">title</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 attr-name">alt</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 attr-name">coords</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>106,438,52<span class="token punctuation">"</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></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>#mitte<span class="token punctuation">"</span></span> <span class="token attr-name">target</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> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>area</span> <span class="token attr-name">title</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 attr-name">alt</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 attr-name">coords</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>252,551,86<span class="token punctuation">"</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></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>#sued<span class="token punctuation">"</span></span> <span class="token attr-name">target</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> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>area</span> <span class="token attr-name">title</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 attr-name">alt</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 attr-name">coords</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>85,309,52<span class="token punctuation">"</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></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>#west<span class="token punctuation">"</span></span> <span class="token attr-name">target</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> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>area</span> <span class="token attr-name">title</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 attr-name">alt</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 attr-name">coords</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>386,235,78<span class="token punctuation">"</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></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>#ost<span class="token punctuation">"</span></span> <span class="token attr-name">target</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> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>area</span> <span class="token attr-name">title</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 attr-name">alt</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 attr-name">coords</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>203,157,56<span class="token punctuation">"</span></span> <span class="token attr-name">shape</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></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>#nord<span class="token punctuation">"</span></span> <span class="token attr-name">target</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> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>map</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</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>http://.../2018/04/28/kiel/<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#nord<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Kiel<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>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span> </code></pre> <p>Die ganze Sache funktioniert aber nicht. Zudem muss ich dazu sagen, dass ich das Ganze in WordPress mache, aber eben nicht via Plugin, sondern händisch. Aber was mache ich falsch?</p> <p>Vielen Dank für Eure Hilfe!</p> <p>(Edit: HTML formatiert / Rolf B)</p> Anker setzen Mon, 25 Jun 18 18:48:48 Z https://forum.selfhtml.org/self/2018/jun/25/anker-setzen/1725547?srt=yes#m1725547 https://forum.selfhtml.org/self/2018/jun/25/anker-setzen/1725547?srt=yes#m1725547 <p>Hallo Cameron,</p> <p>sieht prinzipiell nicht so schlecht aus. <a href="https://jsfiddle.net/n3my0vxt/1" rel="noopener noreferrer">Hab mal probiert</a>, ein Klick auf eins der oberen 3 Bundesländer springt auf den Listenpunkt. Ich habe mit a:target eine CSS Regel ergänzt, die den angesprungenen Punkt hervorhebt.</p> <p>Möglicherweise passen die area-Koordinaten nicht zum Image? Was passiert, wenn Du mit der Tab-Taste durchläufst, werden die erwarteten Bereiche mit Fokus versehen?</p> <p>Auf welchem Gerät probierst Du das? Desktop, Mobil, Retina-Display? Weil: Die Area-Koordinaten sind CSS-Pixel, nicht physikalische Pixel, und dann passt das vielleicht nicht.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> Anker setzen Mon, 25 Jun 18 19:01:24 Z https://forum.selfhtml.org/self/2018/jun/25/anker-setzen/1725550?srt=yes#m1725550 https://forum.selfhtml.org/self/2018/jun/25/anker-setzen/1725550?srt=yes#m1725550 <p>Hi,</p> <blockquote> <pre><code class="block language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</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>http://.../2018/04/28/kiel/<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#nord<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Kiel<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>li</span><span class="token punctuation">></span></span> </code></pre> <p>Aber was mache ich falsch?</p> </blockquote> <p>Im name-Attribut ist ein # zu viel.</p> <p>cu,<br> Andreas a/k/a MudGuard</p> Anker setzen Mon, 25 Jun 18 19:58:46 Z https://forum.selfhtml.org/self/2018/jun/25/anker-setzen/1725559?srt=yes#m1725559 https://forum.selfhtml.org/self/2018/jun/25/anker-setzen/1725559?srt=yes#m1725559 <p>@@Cameron</p> <blockquote> <pre><code class="block language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</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>http://.../2018/04/28/kiel/<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#nord<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Kiel<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>li</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Das <code>a</code>-Element hat kein <code>name</code>-Attribut (mehr – wurde abgeschafft). Verwende <code>id</code>.</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> Anker setzen Mon, 25 Jun 18 21:34:38 Z https://forum.selfhtml.org/self/2018/jun/25/anker-setzen/1725564?srt=yes#m1725564 https://forum.selfhtml.org/self/2018/jun/25/anker-setzen/1725564?srt=yes#m1725564 <p>Hallo Cameron,</p> <blockquote> <p>Vielen Dank für Eure Hilfe!</p> </blockquote> <p>Das ist nett und aus aktuellem Anlass auch eine Bitte an dich. Der Blog hier benötigt Unterstützung. Ich finde, sehen hier viele zwar anders, da wären auch ein paar Artikel für Wordpress interessant, insbesondere das was du hier gerade ohne Plugin zu realisieren versuchst, klingt nach einem lesenswerten Artikel. Denk mal bitte drüber nach, wäre schön.</p> <p>Gruss<br> Henry</p> <div class="signature">-- <br> Meine Meinung zu DSGVO & Co:<br> „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“ </div> Anker setzen Mon, 25 Jun 18 19:03:27 Z https://forum.selfhtml.org/self/2018/jun/25/anker-setzen/1725551?srt=yes#m1725551 https://forum.selfhtml.org/self/2018/jun/25/anker-setzen/1725551?srt=yes#m1725551 <p>Vielen Dank! Allein das Problem, dass das nicht passen könnte, wird mir jetzt erst bewusst. Auf dem Laptop passt das, Mobil schon mal nicht.</p> <p>Wie könnte man das denn noch lösen? Doch mit einem Plugin?</p> <p>Vielen Dank!</p> Anker setzen Mon, 25 Jun 18 19:10:01 Z https://forum.selfhtml.org/self/2018/jun/25/anker-setzen/1725553?srt=yes#m1725553 https://forum.selfhtml.org/self/2018/jun/25/anker-setzen/1725553?srt=yes#m1725553 <p>Hallo Andreas,</p> <p>AUTSCH. Das hab ich ganz unwillkürlich weggefiddelt. Mit # an der Stelle geht's natürlich nicht.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> responsive Image Map (re: Anker setzen) Mon, 25 Jun 18 23:00:24 Z https://forum.selfhtml.org/self/2018/jun/25/anker-setzen/1725570?srt=yes#m1725570 https://forum.selfhtml.org/self/2018/jun/25/anker-setzen/1725570?srt=yes#m1725570 <p>Servus!</p> <blockquote> <p>Allein das Problem, dass das nicht passen könnte, wird mir jetzt erst bewusst. Auf dem Laptop passt das, Mobil schon mal nicht.</p> </blockquote> <p>der passende Artikel im SELF-Wiki: <a href="https://wiki.selfhtml.org/wiki/HTML/Multimedia_und_Grafiken/verweissensitive_Grafiken" rel="nofollow noopener noreferrer">HTML/Multimedia und Grafiken/verweissensitive Grafiken</a> verlinkt im Kapitel 3.3 auf:</p> <ul> <li><a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials/responsive_Imagemaps" rel="nofollow noopener noreferrer">SVG/Tutorials/responsive Imagemaps</a></li> </ul> <blockquote> <p>Wie könnte man das denn noch lösen? Doch mit einem Plugin?</p> </blockquote> <p>Hier ist das nächste Problem: Für Wordpress benötigst du ein Plugin, wenn Du Grafiken im SVG-Format einbinden willst, z.B. das <a href="https://de.wordpress.org/plugins/svg-support/" rel="nofollow noopener noreferrer">SVG-Support</a>-Plugin</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> "An alle, die nie an mich geglaubt haben und gesagt haben, aus mir werde nie was. Ich bin jetzt Admin bei einer WhatsApp Gruppe!" </div> Anker setzen Mon, 25 Jun 18 19:26:01 Z https://forum.selfhtml.org/self/2018/jun/25/anker-setzen/1725555?srt=yes#m1725555 https://forum.selfhtml.org/self/2018/jun/25/anker-setzen/1725555?srt=yes#m1725555 <p>Das hat schon einmal funktioniert - vielen Dank! Wie gehe ich das Problem mit der Image-Map an bzw. damit, dass sich die Links verschieben? Da habe ich so gar keinen Ansatzpunkt. Vielen Dank!</p> Anker setzen Tue, 26 Jun 18 13:01:50 Z https://forum.selfhtml.org/self/2018/jun/25/anker-setzen/1725608?srt=yes#m1725608 https://forum.selfhtml.org/self/2018/jun/25/anker-setzen/1725608?srt=yes#m1725608 <blockquote> <p>Wie gehe ich das Problem mit der Image-Map an bzw. damit, dass sich die Links verschieben? Da habe ich so gar keinen Ansatzpunkt.</p> </blockquote> <p>Ich würde einen div mit position:relative um die Karte legen und dann transparente Grafiken (Kreis mit transparenter Fläche) position:absolute mit x-Prozent und y-Prozent darüber.</p> <p>Und schon hast du deine Klick-Flächen an den richtigen Stellen.</p> <p>Gruß, Linuchs</p> Anker setzen Tue, 26 Jun 18 00:03:42 Z https://forum.selfhtml.org/self/2018/jun/25/anker-setzen/1725571?srt=yes#m1725571 https://forum.selfhtml.org/self/2018/jun/25/anker-setzen/1725571?srt=yes#m1725571 <p>Mit einem Plugin wird die Image-Map kompatibel für mobile Geräte.</p> <p>Ich habe die Befürchtung, dass mein Vorhaben nicht für einen Blog-Beitrag taugt. Ich habe während des Studiums mehr codiert, dann hatte ich irgendwann keine Zeit mehr und habe z.B. die mobile Entwicklung komplett verpasst.</p> <p>Für dieses aktuelle Vorhaben wäre eine "Eigenproduktion" meinerseits wahnsinnig gewesen, ich bin schlicht und ergreifend aus der Zeit gefallen und mir fehlt eben jene, um mich einzulesen.</p> <p>Also habe ich mich für WordPress entschieden. Ich kam mir anfangs vor wie ein Betrüger - ich bin eigentlich der Meinung, dass nur eigen verfasster Code etwas zählt. Aber hier geht's eben nicht um Ehre und WordPress ist kein Frontpage.</p> <p>WordPress hat - so mein persönlicher Eindruck nach einigen Wochen - wahnsinnig viel zu bieten, lässt sich intuitiv erlernen und es gibt kostenlose Templates, die wirklich schön sind. Ich bin begeistert und ich komme mir auch nicht mehr vor wie ein Betrüger.</p> <p>Was ich aber schön finde: Ich hatte hier binnen kürzester Zeit Hilfe. Daran hat sich zu alten HTML-Zeiten nichts geändert und dafür bin ich sehr dankbar.</p> Anker setzen Tue, 26 Jun 18 13:12:43 Z https://forum.selfhtml.org/self/2018/jun/25/anker-setzen/1725610?srt=yes#m1725610 https://forum.selfhtml.org/self/2018/jun/25/anker-setzen/1725610?srt=yes#m1725610 <p>Hallo Linuchs,</p> <p>und warum ist das besser als das semantisch dafür vorgesehene <map> und <area> ?</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> Anker setzen Tue, 26 Jun 18 20:47:40 Z https://forum.selfhtml.org/self/2018/jun/25/anker-setzen/1725648?srt=yes#m1725648 https://forum.selfhtml.org/self/2018/jun/25/anker-setzen/1725648?srt=yes#m1725648 <p>Deine eigenen Worte:</p> <blockquote> <p>Die Area-Koordinaten sind CSS-Pixel, nicht physikalische Pixel, und dann passt das vielleicht nicht.</p> </blockquote>