Hotspots in Bilder einfügen

frank_gayer

Hallo,

ich suche nach einer Möglichkeit sogenannte Hotspots die ich aus Dreamweaver kenne auch in Wordpress zu verwenden. Dabei werden Teile eines Bildes, die frei auswählbar sind auf Webseiten oder Unterseiten der Homepage verlinkt.

Hier ist der Code, denn Dreamweaver erzeugt und ich schon versucht habe in meine vorhandene Seite einzubauen. Vielleicht kennt jemand da eine Möglichkeit !

PHP

<area shape="rect" coords="3,384,54,406" href="http://www.frankgayer.com/reiseberichte/1999/tour.php" target="_self" />

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

Tutrix

Hotspots mit Dreamweaver ins Bild setzen.
Editor von WP auf html Modus, Bild hochladen, dem img-Code das (usemap="#Map") hinzufügen und dann den ganzen map-Code hinzufügen also
bei deinem Beispiel

Code

<map name="Map" id="Map">[COLOR=#000000][COLOR=#007700]<[/COLOR][COLOR=#0000bb]area shape[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"rect" [/COLOR][COLOR=#0000bb]coords[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"3,384,54,406" [/COLOR][COLOR=#0000bb]href[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"http://www.frankgayer.com/reiseberichte/1999/tour.php" [/COLOR][COLOR=#0000bb]target[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#dd0000]"_self" [/COLOR][COLOR=#007700]/></map>  [/COLOR][/COLOR]

frank_gayer

Hallo,

das habe ich schon gemacht, dachte das lässt sich 1:1 kopieren. Da aber die "Koordinaten" dann anders sind muss ich das Hotspotfeld manuell anpassen können, aber ich sehe diese Felder eben nicht

Tutrix

das funktioniert ohne Probleme

siehe [COLOR=Red]Testlink wieder entfernt[/COLOR]

hab mal 3 Links auf meiner Seite eingefügt

[COLOR=Red]Edit[/COLOR]: 30.06.10..... Artikel dazu erstellt, siehe = Hotspots, Images Maps in WordPress

frank_gayer

Hallo,

interessant. Bei mir klappt das nicht. Hier mal der Code den ich auf meiner aktuellen Homepage online habe und nun auf meine Offline-Installation übernommen habe, mit diesem geht es nicht.

Zitat

<div style="text-align: center;"><img style="border: 0px initial initial;" usemap="#Map" src="http://localhost/wordpress_fran…/04/USA_Map.png" border="0" alt="" width="616" height="349" /></div>
<p>
<map id="Map" name="Map">
<area shape="rect" coords="856,248,925,271" href="http://www.frankgayer.com/reiseberichte/2010-2/tour.php" target="_self" />
<area shape="rect" coords="858,271,906,294" href="http://www.frankgayer.com/reiseberichte/2010/tour.php" target="_self" />
<area shape="rect" coords="2,310,63,331" href="http://www.frankgayer.com/reiseberichte/2006-2/tour.php" target="_self" />
<area shape="rect" coords="684,233,726,253" href="reiseberichte/2009/tour.php" target="_self" />
<area shape="rect" coords="683,274,735,294" href="reiseberichte/2007-2/tour.php" target="_top" />
<area shape="rect" coords="683,311,723,330" href="reiseberichte/1996/tour.php" target="_self" />
<area shape="rect" coords="684,253,730,273" href="reiseberichte/2008/tour.php" target="_self" />
<area shape="rect" coords="682,295,727,311" href="reiseberichte/2002/tour.php" target="_self" />
<area shape="rect" coords="727,311,732,317" href="reiseberichte/2002/tour.php" />
<area shape="rect" coords="2,335,57,353" href="reiseberichte/2006/tour.php" target="_self" />
<area shape="rect" coords="2,358,57,378" href="http://www.frankgayer.com/reiseberichte/2004/tour.php" target="_self" />
<area shape="rect" coords="1,411,52,432" href="http://www.frankgayer.com/reiseberichte/1998/tour.php" target="_self" />
<area shape="rect" coords="4,229,67,251" href="http://www.frankgayer.com/reiseberichte/2009-2/tour.php" target="_self" />
<area shape="rect" coords="3,384,54,406" href="http://www.frankgayer.com/reiseberichte/1999/tour.php" target="_self" />
<area shape="rect" coords="-2,284,58,303" href="http://www.frankgayer.com/reiseberichte/2007/tour.php" target="_self" />
<area shape="rect" coords="850,392,900,413" href="http://www.frankgayer.com/reiseberichte/1996/tour.php" target="_self" />
<area shape="rect" coords="856,368,907,387" href="http://www.frankgayer.com/reiseberichte/2002/tour.php" target="_self" />
<area shape="rect" coords="852,342,923,362" href="http://www.frankgayer.com/reiseberichte/2007-2/tour.php" target="_self" />
<area shape="rect" coords="857,320,903,337" href="http://www.frankgayer.com/reiseberichte/2008/tour.php" target="_self" />
<area shape="rect" coords="2,261,63,281" href="http://www.frankgayer.com/reiseberichte/2008-2/tour.php" target="_self" />
<area shape="rect" coords="858,291,906,314" href="http://www.frankgayer.com/reiseberichte/2009/tour.php" target="_self" />
</map>
</p>

Alles anzeigen

Tutrix

füge den Map-Code mal direkt an den Images-Code, also in das Div und nicht extern und ohne <p>

frank_gayer

So geht es auch nicht:

Zitat

<div style="text-align: center;"><img usemap="#Map" src="http://localhost/wordpress_fran…/04/USA_Map.png" alt="" width="616" height="349" />
<map id="Map" name="Map">
<area shape="rect" coords="3,384,54,406" href="http://www.frankgayer.com/reiseberichte/1999/tour.php" target="_self" />
</map>
</div>

Tutrix

hmm... hänge das ( usemap="#Map") mal ans Ende des img-Codes

frank_gayer

Geht auch nicht. Kannst Du mal Deinen kompletten Code zeigen ?

Tutrix

was geht den nicht, die Jahreszahlen im Bild sind doch alle verlinkt?!

frank_gayer

Das ist ja auch die Onlineversion die ich jetzt durch Wordpress ersetzen will was ich aktuell unter Xampp am laufen habe

Tutrix

nun hab das bei mir wieder gelöscht
das war der Inhalt im Editor

Code

<img class="alignleft size-full wp-image-561" title="testbild" src="http://artofpic.de/wp-content/uploads/2010/06/testbild.png" alt="" width="300" height="300" usemap="#Map" /><map name="Map" id="Map"><area shape="rect" coords="32,32,109,105" href="http://artofpic.de/kategorie/artofpic-news" target="_self" />
<area shape="rect" coords="209,103,280,165" href="http://artofpic.de/kategorie/photoshop-news" target="_self" />
<area shape="rect" coords="93,157,165,219" href="http://artofpic.de/kategorie/photoshop-tutorials" target="_self" />
</map>

frank_gayer

Habe mal den Code 1:1 kopiert und die Bildquelle angepasst. Bei mir geht das nicht. An was könnte das noch liegen ?

Tutrix

Also ich hab das jetzt nochmal etwas ausführlicher getestet und es funktioniert ohne Probleme.

siehe = Hotspots, Images Maps in WordPress ;-)

Vielleicht liegt es ja an Xampp

frank_gayer

Hallo,

ja genau. Ich teste das einfach wenn die Seite online ist, denn ich kann ja den Code 1:1 aus Dreamweaver übernehmen. Danke für die tolle Anleitung

frank_gayer

Hallo,

online scheint es jetzt zu klappen, aber wie bekomme ich die Hotspots dorthin wo ich sie hinhaben will ?

Tutrix

nun wenn der richtige Bildpfad angegeben wird, funktioniert es

also statt

Code

http://localhost/wordpress_frankgayer.com/wp-content/uploads/2010/04/USA_Map.png

den richtigen

Code

http://www.frankgayer.com/wp-content/uploads/2010/04/USA_Map.png

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Hotspots in Bilder einfügen

Jetzt mitmachen!