Image Map mehr Hotpots

Mandy

Hallo
ich muss eine Deutschlandkarte erstellen und würde gerne das Widget Image Map verwenden, leider gibt es hier nur 10 Hot spots ist es möglich diese auf 16 zu erhöhen oder wenn man es rund haben möchte auf 20? Das wäre Klasse!
VG Mandy

mario

Muss ich mal schauen wie ich Zeit finde das entsprechend zu erweitern.

Alternativ kannst du auch den Code verwenden, da kannst du die Anzahl der Hotspots unendlich erweitern.

https: //www. zella. de/code/imagemap-responsive. html">https: //www. zella. de/code/imagemap-responsive. html>

mario

Ging schneller als erwartet.

Update ist raus, Version 2. 1 bis zu 20 Hotspots möglich.

Mandy

Hallo,

so schnell bin ich nicht mal mit dem lesen hinterher gekommen vielen lieben Dank. . Campingverband Thüringen wird es dir danken https: //www. zella. de/forum/images/smilies/emojione/263a. png" class="smiley" alt=": -)" height="23" srcset="https: //www. zella. de/forum/images/smilies/emojione/263a@2x. png 2x">

mario

Campingverband Thüringen?

Da sind wir doch auch vertreten. Der vom Schniz?

Mandy

stimmt habe ich gerade gesehen. . zella. de. . . irgendwelche Anregungen dafür https: //www. zella. de/forum/images/smilies/emojione/263a. png" class="smiley" alt=": -)" height="23" srcset="https: //www. zella. de/forum/images/smilies/emojione/263a@2x. png 2x">

mario

Verstehe ich nicht recht. http: //www. campingverband-thueringen. de/">http: //www. campingverband-thueringen. de/> ist doch nicht mit ZP erstellt.

Mandy

ist in Bearbeitung

Peter

Hallo Mario,

zuerst mal ein großes Lob für Dein Widgets "Image MAP". Ich habe schon vergebens im Netz nach einer Möglichkeit gesucht, ohne HTML-Kenntnisse mehrere Hotspot in einer Landkarte zu integrieren.

Als Test habe ich die Version 2. 1 installiert und gleich erfolgreich losgelegt. Nach ein paar Hotspots merkte ich, dass die Anzahl auf 20 reduziert ist, was warscheindlich die meisten Anwendungen auch abdeckt.

Für meine Anwendung bräuchte ich jedoch 40 und weis nicht, wie ich das hinkriegen soll. Mit dem Code, denn Du schon mal in eine Antwort eingefügt hast (https: //www. zella. de/code/imagemap-responsive. html">https: //www. zella. de/code/imagemap-responsive. html>) bin ich überfordert und weis nicht, welchen Quellcode ich ändern, kopieren. . . . soll.

Vielleicht kannst Du mir auch als "Einsteiger" helfen.

Schöne Grüße

Peter

mario

20 Hotspots ist schon heftig, das wird sicher unübersichtlich.

In dem Code musst du eigentlich lediglich im Quelltext die Hotspots entsprechend erweitern.

Ich habe die Hotspots mal umbenannt damit du es einfacher sehen kannst was erweitert werden muss.

Einfach < ! -- HotSpot01 --> bis < ! -- HotSpot18 --> entsprechend erweitern

< div class="HotSpotWrapper"> < img src="DeinBildHierVerlinken" alt="Image Map">

< ! -- HotSpot01 -->
< div class="HotSpot bullet" style="top: 40%; left: 20%; ">
< p> < span> Reithalle< /span> < img src="https: //www. zella. de/media/images/halle_5. jpg" alt="">
< a href="https: //www. zella. de/reitbetrieb. html" title="" target="_blank"> WEITER< /a> < /p>
< /div>

< ! -- HotSpot02 -->
< div class="HotSpot bullet" style="top: 32%; left: 50%; ">
< p> < span> Pferdestall< /span> < img src="https: //www. zella. de/foto/media/images/thumbnails/album-global25-200x150. jpg" alt="">
< a href="https: //www. zella. de/reitbetrieb. html" title="" target="_blank"> WEITER< /a> < /p>
< /div>

< ! -- HotSpot03 -->
< div class="HotSpot bullet" style="top: 63%; left: 65%; ">
< p style="top: -90px; left: -120px; "> < span> Schwimmteich< /span> < img src="https: //www. zella. de/media/images/schwimmteich1000-6. jpg" alt="">
< a href="https: //www. zella. de/schwimmteich. html" title="" target="_blank"> WEITER< /a> < /p>
< /div>

< ! -- HotSpot04 -->
< div class="HotSpot bullet" style="top: 57%; left: 54%; ">
< p> < span> Gasthof< /span> < img src="https: //www. zella. de/media/images/thumbnails/gasthof-theke-350. jpg" alt="">
< a href="https: //www. zella. de/gasthof. html" title="" target="_blank"> WEITER< /a> < /p>
< /div>

< ! -- HotSpot05 -->
< div class="HotSpot bullet" style="top: 61%; left: 50%; ">
< p> < span> Biergarten< span> < img src="https: //www. zella. de/foto/media/images/thumbnails/album-global13-200x150. jpg" alt="">
< a href="https: //www. zella. de/gasthof. html" title="" target="_blank"> WEITER< /a> < /p>
< /div>

< ! -- HotSpot06 -->
< div class="HotSpot bullet" style="top: 71%; left: 55%; ">
< p style="top: -90px; left: -20px; "> < span> Spielplatz< /span> < img src="https: //www. zella. de/media/images/thumbnails/spielplatz_1000x666-350. jpg" alt="">
< a href="https: //www. zella. de/gasthof. html" title="" target="_blank"> WEITER< /a> < /p>
< /div>

< ! -- HotSpot07 -->
< div class="HotSpot bullet" style="top: 53%; left: 20%; ">
< p> < span> Offenställe< /span> < img src="https: //www. zella. de/media/images/thumbnails/reitenlinaleonie1000-300. jpg" alt="">
< a href="https: //www. zella. de/reitbetrieb. html" title="" target="_blank"> WEITER< /a> < /p>
< /div>

< ! -- HotSpot08 -->
< div class="HotSpot bullet" style="top: 23%; left: 62%; ">
< p style="top: 0px; left: -120px; "> < span> Nebengebäude< /span> < br> Zimmer< br> Ferienwohnung N1< br> Ferienwohnung N2< br> Ferienwohnung N3< br> < br>
< a href="https: //www. zella. de/uebernachtung. html" title="" target="_blank"> WEITER< /a> < /p>
< /div>

< ! -- HotSpot09 -->
< div class="HotSpot bullet" style="top: 55%; left: 62%; ">
< p style="top: -50px; left: -80px; "> < span> Hauptgebäude< /span> < br> Zimmer< br> Ferienwohnung H2< br> Ferienwohnung H3< br> < br>
< a href="https: //www. zella. de/uebernachtung. html" title="" target="_blank"> WEITER< /a> < /p>
< /div>

< ! -- HotSpot10 -->
< div class="HotSpot bullet" style="top: 68%; left: 40%; ">
< p style="top: -90px; left: 0px; "> < span> Streichelzoo< /span> < img src="https: //www. zella. de/media/images/thumbnails/sreichelzoo-7-290x190. jpg" alt="">
< a href="https: //www. zella. de/streichelzoo. html" title="" target="_blank"> WEITER< /a> < /p>
< /div>

< ! -- HotSpot11 -->
< div class="HotSpot bullet" style="top: 62%; left: 41%; ">
< p style="top: -90px; left: 0px; "> < span> Grillkota< /span> < img src="https: //www. zella. de/media/images/thumbnails/24-200x150. jpg" alt="">
< a href="https: //www. zella. de/grillkota. html" title="" target="_blank"> WEITER< /a> < /p>
< /div>

< ! -- HotSpot12 -->
< div class="HotSpot bullet" style="top: 79%; left: 41%; ">
< p style="top: -90px; left: -50px; "> < span> Bootsanleger< /span> < img src="https: //www. zella. de/media/images/kanu7. jpg" alt="">
< a href="https: //www. zella. de/kanutouren. html" title="" target="_blank"> WEITER< /a> < /p>
< /div>

< ! -- HotSpot13 -->
< div class="HotSpot bullet" style="top: 65%; left: 82%; ">
< p style="top: -110px; left: -150px; "> < span> Campingplatz< /span> < img src="https: //www. zella. de/media/images/campingplatz2. jpg" alt="">
< a href="https: //www. zella. de/camping. html" title="" target="_blank"> WEITER< /a> < /p>
< /div>

< ! -- HotSpot14 -->
< div class="HotSpot bullet" style="top: 56%; left: 79%; ">
< p style="top: -120px; left: -150px; "> < span> Ferienhaus< /span> < img src="https: //www. zella. de/media/images/ferienhaus-01. jpg" alt="">
< a href="https: //www. zella. de/ferienhaus. html" title="" target="_blank"> WEITER< /a> < /p>
< /div>

< ! -- HotSpot15 -->
< div class="HotSpot bullet" style="top: 32%; left: 0. 5%; ">
< p> < span> Bogenschießen< /span> < img src="https: //www. zella. de/media/images/thumbnails/bogenchiessen1-350. jpg" alt="">
< a href="https: //www. zella. de/bogenschiessen. html" title="" target="_blank"> WEITER< /a> < /p>
< /div>

< ! -- HotSpot16 -->
< div class="HotSpot bullet" style="top: 55%; left: 37%; ">
< p> < span> Reitplatz< /span> < br> 40m x 40m< br> < br>
< a href="https: //www. zella. de/reitbetrieb. html" title="" target="_blank"> WEITER< /a> < /p>
< /div>

< ! -- HotSpot17 -->
< div class="HotSpot bullet" style="top: 46%; left: 40%; ">
< p> < span> Longierplatz< /span> < br> 17m x 17m< br> < br>
< a href="https: //www. zella. de/reitbetrieb. html" title="" target="_blank"> WEITER< /a> < /p>
< /div>

< ! -- HotSpot18 -->
< div class="HotSpot bullet" style="top: 85%; left: 82%; ">
< p style="top: -120px; left: -150px; " > < span> Test letzter Eintrag< /span> < img src="https: //www. zella. de/media/images/campingplatz2. jpg" alt="">
< a href="https: //www. zella. de/camping. html" title="" target="_blank"> WEITER< /a> < /p>
< /div>

< /div>

Peter

Hallo Mario,

vielen Dank für die RÜ

Ist für mich doch etwas schwieriger, in den Quellcode einzugreifen!

Zu meiner Vorgehensweise:

Im Editor Zeta Producer rufe ich die zu bearbeitende Seite auf und in der Darstellung re. Maustaste kommt der Quelltext mit dem Editor geöffnet.

Hier kann ich auch die Datei bearbeiten, doch wo soll ich jetzt Speichern ? geöffnet wurde mir ja ein *. tmp Datei.

Speichere ich im Ordner preview od. autput ? beides probiert und hat nicht funktioniert.

Wurde mein Hotspot 21 meinerseits auch richtig eingefügt ?

< div onclick="" class="HotSpot bullet WZP-Artikel_1789" style="top: 30%; left: 70%; ">

< p style="left: -0px; ">

< span> test19< /span>

< img src="media/images/Bild1. jpg" alt="" title="">

< a href="" style="cursor: auto; "> weiter< /a>

< /p>

< /div>

< div onclick="" class="HotSpot bullet WZP-Artikel_1789" style="top: 50%; left: 70%; ">

< p style="left: -0px; ">

< span> test20< /span>

< img src="media/images/bild2. jpg" alt="" title="">

< a href="" style="cursor: auto; "> weiter< /a>

< /p>

< /div>

< div onclick="" class="HotSpot bullet WZP-Artikel_1789" style="top: 50%; left: 70%; ">

< p style="left: -0px; ">

< span> test21< /span>

< img src="media/images/bild3. jpg" alt="" title="">

< a href="" style="cursor: auto; "> weiter< /a>

< /p>

< /div>

Schöne Grüße

Peter

mario

Ich sehe schon das wird so nichts. Lösche alles was du bisher angelegt hast.

Was du mit Rechtsklick > Quelltext geändert hast kannst du so lassen, das löscht ZP sowieso wieder.

Ich habe das Widget für dich auf 40 HotSpost erweitert und hier angehängt.

Dieses kannst du parallel zu dem anderen installieren, solltest aber nicht beide gleichzeitig in einem Projekt verwenden.

Kann sein das die Performens von ZP aufgrund der vielen Felder etwas nachlässt wenn du das Widget gerade anlegst, diesbezüglich bitte mal berichten.

attachment=84

Peter

Hallo Mario,

ich kann mich nur höflichst bei Dir bedanken, dass Du so einen doch spezielen Wunsch an das Widgets nachgekommen bist. Ist heute nicht mehr ganz so selbstverständlich, dass einem spontan mit doch höherem Aufwand eine perfekte Hilfe angeboten wird. https: //www. zella. de/forum/images/smilies/emojione/1f44d. png" alt=": thumbup: " class="smiley" srcset="https: //www. zella. de/forum/images/smilies/emojione/1f44d@2x. png 2x" height="23">https: //www. zella. de/forum/images/smilies/emojione/1f44d. png" alt=": thumbup: " class="smiley" srcset="https: //www. zella. de/forum/images/smilies/emojione/1f44d@2x. png 2x" height="23">

Sobald ich die Karte fertig habe (wird aber etwas dauernen), melde ich mich über die Performance.

Nochmal ein dickes Danke

Grüße

Peter