ImageMap Responsive-alt

ImageMap Responsive ALT

Reithalle

Pferdestall

Ökologischer Badeteich

Gasthof

Biergarten

Spielplatz

Offenställe

Nebengebäude
Zimmer
Ferienwohnung N1
Ferienwohnung N2
Ferienwohnung N3

Hauptgebäude
Zimmer
Ferienwohnung H2
Ferienwohnung H3

Streichelzoo

Grillkota

Bootsanleger

Campingplatz

Ferienhaus

Bogenschießen

Reitplatz

Longierplatz

Test letzter Eintrag

CSS-Code

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

Quellcode markieren & kopieren

Quelltext

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

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

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

<a href="https://www.zella.de/schwimmteich.html" title="" target="_blank">
		<div class="HotSpot bullet" style="top: 63%; left: 65%; z-index:2; ">
			<p style="top: -90px; left: -120px;">Ökologischer Badeteich<img src="https://www.zella.de/media/images/schwimmteich1000-6.jpg" alt=""></p></div></a>

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

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

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

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

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

<a href="https://www.zella.de/uebernachtung.html" title="" target="_blank">
		<div class="HotSpot bullet" style="top: 55%; left: 62%; ">
			<p style="top: -50px; left: -80px;"><strong><span style="font-size: large">Hauptgebäude</span></strong><br><a href="https://www.zella.de/zimmer.html" target="_blank">Zimmer</a><br><a href="https://www.zella.de/ferienwohnung-h1-01.html" target="_blank">Ferienwohnung H2</a><br><a href="https://www.zella.de/ferienwohnung-h1-02.html" target="_blank">Ferienwohnung H3</a></p></div></a>

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

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

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

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

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

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

<a href="https://www.zella.de/reitbetrieb.html" title="" target="_blank">
		<div class="HotSpot bullet" style="top: 55%; left: 37%; z-index:57; ">
			<p>Reitplatz</p></div></a>

<a href="https://www.zella.de/reitbetrieb.html" title="" target="_blank">
		<div class="HotSpot bullet" style="top: 46%; left: 40%; z-index:56; ">
			<p>Longierplatz</p></div></a>

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

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

<a href="http://www.deineseite.de/link.html" title="" target="_blank">

<div class="HotSpot bullet" style="top: 56%; left: 79%; z-index:1; ">

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