Interaktives Bild bzw. Map

mcduke

Hallo an Alle.

Bin neu seit heute bei euch und habe gleich mal ein aus meiner Sicht schwieriges Problem.

Ich möchte gerne eine Art Landkarte mit einem Map-Tag versehen um beim Mouseover einen Teil des Bildes ändern zu lassen.
Hier ein Link wie es aussehen und funktionieren soll:
http://metracom.de/dkp/seiten/wahlbezirke.html

Mit Dreamweaver für eine "Normale" Seite funktioniert das auch einwandfrei, hier der Code vom oberen Link:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Wahlbezirke</title>
<link href="../css/bootstrap.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
</script>
<script>


sourceImage = new Image();
function changeImage(target,image) {
sourceImage.src = image;
document.getElementById(target) .src =sourceImage.src;
}

<!-- Ende -- >

</script>
</head>
<body>

<p><H1 karte>Bitte wählen sie Ihren Landkreis aus, um weitere Informationen zu erhalten.</p>
<p>Achtung! Landkreis und Wahlkreis stimmen nicht immer genau überein!</p>
<p>Informieren Sie sich bitte nach "klick" auf einen Landkreis, ob Ihr Wahlkreis </p>
<p>dort beinhaltet ist.<br></p>



<img style="z-index:0; position:absolute; top:0px left:0px;" src="../img/Bundestagswahlkreis_1.gif" width="1000" height="1000" alt="" />
<img style="z-index:1; position:absolute; top:0px left:0px;" id="bildwechsel" src="../img/transparent.gif" width="1000" height="1000" alt="" usemap="#Map"/>





<map name="Map">
<area shape="poly" coords="219,115,464,193,479,336,431,410,400,450,336,403,279,426,253,344,10,230,90,170" href="56-gross.html" alt=""
onMouseOver="changeImage('bildwechsel','../img/Bundestagswahlkreis_56-1.gif');"
onMouseOut="changeImage('bildwechsel','../img/transparent.gif');" target="_blank"/>

<area shape="poly" coords="678,12,752,75,796,64,842,116,846,163,786,273,786,306,762,308,760,323,712,352,650,345,650,324,608,321,589,300,602,262,527,152,597,90" href="57.html" alt=""
onMouseOver="changeImage('bildwechsel','../img/Bundestagswahlkreis_57.gif');"
onMouseOut="changeImage('bildwechsel','../img/transparent.gif'); "target="_blank"/>

</map>
</p>

</body>
</html>

Soweit alles gut, nur kann ich den Code nicht direkt in meine Wordpress Seite einbinden, denn dann passiert nichts. :shock::shock:

Habe mir das Plugin: Draw Attention installiert, was auch erstmal soweit gut funktioniert, jedoch in der Free-Version nur eine Klick-Funktion ohne Bildwechsel hat.
Nutzt also nicht wirklich was für meine Zwecke.

Meine Frage ist nun, kennt jemand ein gutes Plugin für diese Option oder kann mir jemand sagen wie ich das direkt in der Seiteneinstellung bei Wordpress hin bekommen kann?

Hab schon mal vielen Dank für eure Hilfe.

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

eisregen1986

Hallo mcduke,

was genau klappt denn nicht?

Generell kannst du den Code den du hier veröffentlicht hast, zu 90% nutzen.

Wichtig ist, das du um den Code in deine "WordPress Seite" einzupflegen vom "Visuellen Editor" in den "Text Editor" wechsels, damit der HTML Code nicht umgewandelt wird.

Es reicht dann aus wenn du folgende Code Teile in den Editor einpflegst:

HTML

<script type="text/javascript">
<!-- Javascript-Code für Bildwechsel Anfang -->
sourceImage = new Image();
function changeImage(target,image) {
    sourceImage.src = image;
    document.getElementById(target) .src =sourceImage.src;
 }<!-- Ende -- >
</script>
<!-- Hintergrundbilder Position Top Left -->
<img style="z-index:0; position:absolute; top:0px left:0px;" src="http://forum.wpde.org/img/Bundestagswahlkreis_1.gif" width="1000" height="1000" alt="" />
<img style="z-index:1; position:absolute; top:0px left:0px;" id="bildwechsel" src="http://forum.wpde.org/img/transparent.gif" width="1000" height="1000" alt="" usemap="#Map"/>
 <!-- Hintergrund Ende -->
<!-- Anfang Karte mit den Bereichen als Polygon-Begrenzung mit Anweisung für Javascript inklusive Mouseover-Effekt und Neuen Tab öffnen -->
<map name="Map">
    <area shape="poly" coords="219,115,464,193,479,336,431,410,400,450,33 6,403,279,426,253,344,10,230,90,170" href="56-gross.html" alt="" onMouseOver="changeImage('bildwechsel','../img/Bundestagswahlkreis_56-1.gif');" onMouseOut="changeImage('bildwechsel','../img/transparent.gif');" target="_blank"/>
        <area shape="poly" coords="678,12,752,75,796,64,842,116,846,163,786,2 73,786,306,762,308,760,323,712,352,650,345,650,324 ,608,321,589,300,602,262,527,152,597,90" href="57.html" alt=""onMouseOver="changeImage('bildwechsel','../img/Bundestagswahlkreis_57.gif');" onMouseOut="changeImage('bildwechsel','../img/transparent.gif'); "target="_blank"/>
</map>
<!-- Karte Ende -->

Alles anzeigen

Was noch wichtig ist!!!
Damit der Browser die Bilder findet, solltest du die Bildpfade im Code anpassen!

Danach sollte die Image-Map auch auf der gewünschten Seite problemlos funktionieren.

SuMu

ich würde das nicht im WP Editor machen, sondern mir ein extra template anlegen.

SirEctor

Ich würde es evtl. sogar in einen Shortcode auslagern.

mcduke

Super, danke erstmal für eure Antworten.
Vielleicht noch vorne weg, ich bin mit Wordpress noch nicht voll ends vertraut. :)

Bearbeite die Seite in Wordpress natürlich über die Text/HTML Eingabe.
Bildpfade sind alle auf Wordpress Pfade geändert.
Bilder liegen also im Media-Verzeichnis.

eisregen1986 Den Code für Wordpress hatte ich auch schon so angepasst bis auf den absoluten Pfad für die Hintergrundbilder. Der war relativ. Versuche es gleich mal mit absolut.

SuMu Meinst du wirklich Template´s oder PlugIn´s? PlugIn´s habe ich schon wie blöd seit 3 Tagen gesucht. Es gibt kostenlose nur mit HotSpots ohne Bildwechsel und diese dann auch nur mit Kreis oder Viereck als Raster zum drüber legen.
Es gibt zwar freie Maps von jedem beliebigen Land auf der Erde, jedoch keine mit detailierten Land- bzw. Wahlkreisen. Jetzt benutze ich Draw Attention in der free Version. Da kann man polygone Raster erstellen. Diese färben sich dann wenn man drüber fährt. Ist aber eben nicht das was ich wollte.

SirEctor Was ist ein Shortcode und wie kann ich diesen bei Wordpress abfragesicher einbinden?

mcduke

eisregen1986

DAAAAAAAAAAAAAAAAANKE!!!!!!!!!!!!!

Es lag wirklich nur an den absoluten Linkangaben.
Habe einfach den Permalink jeder Seite kopiert und in den Quellcode eingefügt, und siehe da, es funzt!!

mcduke

Noch ne Info für die jenigen die das auch so umsetzen wollen.

Nach Verlinkung meiner MapArea mit den absoluten Pfaden der Bilder, die muss man einzeln aus der Mediathek kopieren sonst funzt es nicht, hat der Mouseovereffekt nicht mehr geklappt.
Nach stundenlangem hin und her suchen im Netz, hab ich einfach die beiden Strings:
[COLOR=#800000]<script type=[COLOR=#0000FF]"text/javascript"[/COLOR]>
und
</script>

gelöscht und neu eingetragen und siehe da, es funktioniert wieder.
Wenn dass bei Wordpress immer so ist, na dann gute Nacht. :):)
[/COLOR]

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Interaktives Bild bzw. Map

Jetzt mitmachen!