Head bearbeiten - Image Map oder sowas in der Art

15.10.2016 23:31 (zuletzt bearbeitet: 15.10.2016 23:32)

Moni
#1

Mo

Hallo,
ich bin ganz neu hier und habe gleich eine Frage... Ich nutze den Style Cape Town und bin eigentlich auch ganz zufrieden mit dem Ergebnis. Abgesehen davon, dass der Link vom Header-Bild immer auf die Startseite führt. Ich würde das gerne ändern, so dass man je nachdem wo man darauf klickt, auf verschiedene Unterseiten kommt. Das sollte auf allen Seiten gleich sein und sollte sich vermutlich machen lassen, indem man in den Einstellungen unter Head bearbeiten den richtigen Code eingibt, oder? Dabei mach ich aber definitiv etwas falsch, egal was ich bisher ausprobiert habe, es ändert sich nichts.

Mit Hilfe anderer Forumstipps und Tutorials kann ich das für einzelne Seiten, indem ich dort in einem Widget das Headerbild überschreibe. Das sieht dann etwa so aus, wie hier testweise: http://zweihundertvierbar.jimdo.com/test

Der Code dafür ist:
<div style="position: absolute; top:80px; align: center;">
<img style="margin-left: 15px;" src="Bildlink" usemap="#imgmap2" alt="" />
<map id="imgmap2" name="imgmap2">
<area shape="rect" alt="" title="Startseite(Blog)" coords="0,0,1200,60" href="Link1" />
<area shape="rect" alt="" title="Radreisen" coords="0,60,1200,190" href="Link2" />
<area shape="rect" alt="" title="Tauchausbildung" coords="0,190,1200,500" href="Link3" />
</map>
</div>

Kann mir jemand sagen, wie ich das für alle Unterseiten hinbekomme ohne überall das Widget einzufügen? Abgesehen davon, dass das aufwändig wäre, sieht es zB auf dem Smartphone richtig doof aus, weil das Bild dann die Größe behält und nur ein Teil angezeigt wird... Stichworte wonach ich suchen muss würden auch schon weiterhelfen (wie man merkt hab ich aber wenig Ahnung von HTML und co...)
Vielen Dank schonmal!

Antworten

Beitrag melden

#2

16.10.2016 14:16

az_
#2

az_

Hallo @Moni,

...Du kannst Dein Script nicht responsiv gestalten, da die Koordinaten nicht dynamisch sind. Es gäbe eine Möglichkeit, das über ein zusätzlichen jQuery Script zu gewährleisten. Aber das ist schon etwas knifflig.

LG, az

Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!

...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html

Antworten

Beitrag melden

#3

16.10.2016 19:32

Moni
#3

Mo

Moni

Hallo, danke erstmal für die Antwort - das hatt ich mir auch so halbwegs ergoogelt, aber nicht so direkt verstanden. Responsiv ist mir nicht ganz so wichtig, gibt es denn eine einfache Möglichkeit, das gleich im Head zu integrieren? Also anstelle des Widgets auf jeder Unterseite?
Ich hatte mal nach der anleitung versucht, das Bild zu testweise für eine Unterseite zu ändern, aber da hat sich gar nichts getan.
Lg und danke nochmal

Antworten

Beitrag melden

#4

17.10.2016 14:27

az_
#4

az_

Hallo @Moni,

...normalerweise müsste das funktionieren, auch mit einem anderen Bild. Dein Code scheint jedenfalls richtig zu sein.

LG, az

Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!

...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html

Antworten

Beitrag melden

#5

17.10.2016 17:53

az_
#5

az_

...aaalso:

- http://forum-images.jimdo.com/images/

...hier hab ich mal mit Deinem Script etwas ausprobiert. Funzt ganz gut, jedenfalls auf Chrome. Woanders hab ich es noch nicht getestet. Der Trick war, das Script per jQuery an eine andere Stelle im Quelltext zu verschieben.

LG, az

Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!

...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html

Antworten

Beitrag melden

#6

17.10.2016 22:14

Moni
#6

Mo

Moni

Wow, wahnsinn! Ich bastle daran nun schon ewig... Deins sieht mit jedem Browser und Smartphone klasse aus, bei mir klappts leider nicht. Ich vermute mal, weils "jtpl-title" in meinem Header-Quelltext gar nicht gibt :( Könntest du das noch ein paar Tage online lassen, das muss ich mir nochmal in Ruhe ansehen. Vielen Dank für die Mühe!

Antworten

Beitrag melden

#7

18.10.2016 00:07

az_
#7

az_

...es war leider noch etwas unsauber programmiert. Jetzt hab ich es mir noch einmal genauer angesehen und scheinbar klappt das responsive erst mal nur über transform: scale(x,y).

Ist ein interessantes Thema. Hier noch ein Link: http://mattstow.com/experiment/responsiv...image-maps.html
Andere Technik. klappt aber noch nicht bei mir...

LG, az

Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!

...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html

Antworten

Beitrag melden

#8

18.10.2016 11:45 (zuletzt bearbeitet: 18.10.2016 11:51)

az_
#8

az_

...und geht doch, die mattstow.com-Methode!
Vergiss, was ich bisher gemacht hab!

s.h.: http://redesign-berlin-seminar.jimdo.com...ider/imagemaps/

LG, az

PS: Design ist übr. CapeTown

Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!

...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html

Bildanh�nge

Antworten

Beitrag melden

#9

18.10.2016 22:36

Moni
#9

Mo

Moni

Hallo, ich hatte heute nachmittag nur auf deine Beispielseite geschaut, da sahs perfekt aus. Hast du in der Zwischenzeit nochmal was geändert - wenn ich mich richtig erinnere das prependTo-Statement, oder? Bei mir wird das Bild auf deiner Homepage aktuell nicht mehr angezeigt.

Habs auch mal getestet, bisher nur stumpf alles auf meine Seite kopiert. Responsiv klappt, Position ändern nicht, aber das wird noch. Ich meld mich dann, wenn ichs hinbekommen hab...

Tausend Dank erstmal

Antworten

Beitrag melden

#10

20.10.2016 20:56

az_
#10

az_

...ja genau!

Man nennt sowas "versaubeutelt"

Ich hab es noch ein bisschen verbessern wollen, etwas verhübschen - und hab dabei versehentlich etwas wichtiges gelöscht. Und dann hatte ich einen Termin und konnte es erst am Abend wiederherstellen. Peinlich!

Aber jetzt ist wieder alles richtig: http://redesign-berlin-seminar.jimdo.com...ider/imagemaps/

LG, az

Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!

...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html