1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Interaktives Bild bzw. Map

Dieses Thema im Forum "Plugins und Widgets" wurde erstellt von mcduke, 15. Februar 2017.

Schlagworte:
  1. mcduke

    mcduke New Member

    Registriert seit:
    15. Februar 2017
    Beiträge:
    4
    Zustimmungen:
    0
    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>
    <!-- Javascript-Code für Bildwechsel Anfang -->

    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 &quot;klick&quot; auf einen Landkreis, ob Ihr Wahlkreis </p>
    <p>dort beinhaltet ist.<br></p>

    <!-- Hintergrundbilder Position Top Left -->

    <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"/>

    <!-- 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,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>
    <!-- Karte Ende -->
    </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.
     
    #1 mcduke, 15. Februar 2017
  2. eisregen1986

    eisregen1986 Well-Known Member

    Registriert seit:
    3. Mai 2006
    Beiträge:
    95
    Zustimmungen:
    0
    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:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!

    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.
     
    #2 eisregen1986, 16. Februar 2017
    Zuletzt bearbeitet: 16. Februar 2017
  3. SuMu

    SuMu Well-Known Member

    Registriert seit:
    5. Januar 2006
    Beiträge:
    6.301
    Zustimmungen:
    84
    ich würde das nicht im WP Editor machen, sondern mir ein extra template anlegen.
     
    #3 SuMu, 16. Februar 2017
  4. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    Ich würde es evtl. sogar in einen Shortcode auslagern.
     
    #4 SirEctor, 16. Februar 2017
  5. mcduke

    mcduke New Member

    Registriert seit:
    15. Februar 2017
    Beiträge:
    4
    Zustimmungen:
    0
    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?
     
    #5 mcduke, 16. Februar 2017
    Zuletzt bearbeitet: 16. Februar 2017
  6. mcduke

    mcduke New Member

    Registriert seit:
    15. Februar 2017
    Beiträge:
    4
    Zustimmungen:
    0
    @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!!
     
    #6 mcduke, 16. Februar 2017
  7. mcduke

    mcduke New Member

    Registriert seit:
    15. Februar 2017
    Beiträge:
    4
    Zustimmungen:
    0
    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:
    <script type="text/javascript">
    und
    </script>

    gelöscht und neu eingetragen und siehe da, es funktioniert wieder.
    Wenn dass bei Wordpress immer so ist, na dann gute Nacht. :):)
     
    #7 mcduke, 19. Februar 2017
(Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können. )
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden