ImageMap Responsive

Reithalle WEITER

Pferdestall WEITER

Schwimmteich WEITER

Gasthof WEITER

Biergarten WEITER

Spielplatz WEITER

Offenställe WEITER

Nebengebäude
Zimmer
Ferienwohnung N1
Ferienwohnung N2
Ferienwohnung N3

WEITER

Hauptgebäude
Zimmer
Ferienwohnung H2
Ferienwohnung H3

WEITER

Streichelzoo WEITER

Grillkota WEITER

Bootsanleger WEITER

Campingplatz WEITER

Ferienhaus WEITER

Bogenschießen WEITER

Reitplatz
40m x 40m

WEITER

Longierplatz
17m x 17m

WEITER

Test letzter Eintrag WEITER

CSS-Code

Diesen Code per Einstellungen > CSS einfügen und anpassen.

Quellcode markieren & kopieren

Quelltext

Diesen Code per Widget > Quelltext einfügen und anpassen.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Quellcode markieren & kopieren

Der Vorschau-Text sowie das Vorschau-Bild werden immer rechts vom Mauszeiger angezeigt. Bei stark verkleinerter Ansicht kann es sein das bei Hotspots die sich ganz rechts befinden der Vorschau-Text sowie das Vorschau-Bild abgeschnitten werden. Hier können wir die Position der Vorschau durch Inline-CSS verschieben.

<p style="top: -120px; left: -150px;">deinText<img src="http://www.deineseite.de/deinbild.jpg" alt="">