nicht angemeldet
Anker setzen
0 
Rolf B
1 
MudGuard
1 
Gunnar Bittersmann
1 
Henry
Anker setzen
Matthias Scharwies
LinuchsHi, 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)
<img src="http://.../wp-content/uploads/2018/06/kartei_deutschland.jpg" usemap="#image-map" />
<map name="image-map">
<area title="" alt="" coords="106,438,52" shape="circle" href="#mitte" target="" />
<area title="" alt="" coords="252,551,86" shape="circle" href="#sued" target="" />
<area title="" alt="" coords="85,309,52" shape="circle" href="#west" target="" />
<area title="" alt="" coords="386,235,78" shape="circle" href="#ost" target="" />
<area title="" alt="" coords="203,157,56" shape="circle" href="#nord" target="" />
</map>
<ol>
<li><a href="http://.../2018/04/28/kiel/" name="#nord">Kiel</a></li>
</ol>
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?
Vielen Dank für Eure Hilfe!
(Edit: HTML formatiert / Rolf B)
-
Hallo Cameron,
sieht prinzipiell nicht so schlecht aus. Hab mal probiert, 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.
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?
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.
Rolf
--
sumpsi - posui - clusi-
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.
Wie könnte man das denn noch lösen? Doch mit einem Plugin?
Vielen Dank!
-
Servus!
Allein das Problem, dass das nicht passen könnte, wird mir jetzt erst bewusst. Auf dem Laptop passt das, Mobil schon mal nicht.
der passende Artikel im SELF-Wiki: HTML/Multimedia und Grafiken/verweissensitive Grafiken verlinkt im Kapitel 3.3 auf:
Wie könnte man das denn noch lösen? Doch mit einem Plugin?
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 SVG-Support-Plugin
Herzliche Grüße
Matthias Scharwies
--
"An alle, die nie an mich geglaubt haben und gesagt haben, aus mir werde nie was. Ich bin jetzt Admin bei einer WhatsApp Gruppe!"
-
-
-
Hi,
<li><a href="http://.../2018/04/28/kiel/" name="#nord">Kiel</a></li>Aber was mache ich falsch?
Im name-Attribut ist ein # zu viel.
cu,
Andreas a/k/a MudGuard-
Hallo Andreas,
AUTSCH. Das hab ich ganz unwillkürlich weggefiddelt. Mit # an der Stelle geht's natürlich nicht.
Rolf
--
sumpsi - posui - clusi-
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!
-
Wie gehe ich das Problem mit der Image-Map an bzw. damit, dass sich die Links verschieben? Da habe ich so gar keinen Ansatzpunkt.
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.
Und schon hast du deine Klick-Flächen an den richtigen Stellen.
Gruß, Linuchs
-
Hallo Linuchs,
und warum ist das besser als das semantisch dafür vorgesehene <map> und <area> ?
Rolf
--
sumpsi - posui - clusi-
Deine eigenen Worte:
Die Area-Koordinaten sind CSS-Pixel, nicht physikalische Pixel, und dann passt das vielleicht nicht.
-
-
-
-
-
-
@@Cameron
<li><a href="http://.../2018/04/28/kiel/" name="#nord">Kiel</a></li>Das
a-Element hat keinname-Attribut (mehr – wurde abgeschafft). Verwendeid.LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann -
Hallo Cameron,
Vielen Dank für Eure Hilfe!
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.
Gruss
Henry--
Meine Meinung zu DSGVO & Co:
„Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“-
Mit einem Plugin wird die Image-Map kompatibel für mobile Geräte.
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.
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.
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.
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.
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.
-