Antworten zu häufig gestellten Homepage-Fragen
 Alle Anleitungen
Einige Anleitungen
Intern
Kostenl. Partnerlinks
[,__,] Druckversion

Die Website Homepage-FAQs.de befindet sich im Archivmodus.
FAQS zu HP&Co.
Infobox bei Mouseover (oder Popup per Klick) und Hotspot/Imagemap (Linkbereiche auf Bild) kombinieren

Wenn auf einer Grafik an verschiedenen Stellen bei Überfahren mit der Maus Infoboxen erscheinen sollen, dann kann man Hotspot/Imagemap und Infoboxen (entweder einfaches alt/title-Attribut oder Javascript-Infobox) kombinieren.

Eine weitere Möglichkeit sind Popups bei Mausklick, beim Überfahren erscheint ein Hinweisfenster (per "alt" und "title"), das die Besucher auf das Popup hinweist, falls die Besucher Popups deaktiviert haben und sie aktivieren möchten, Anleitung siehe Punkt C).

Inhalt:

Ohne Javascript mit "title" und "alt"
- Infobox mit Javascript
- Popup bei Mausklick mit Javascript


A) am einfachsten (und ohne Javascript) gehts wohl mit "title" und "alt".

HTML-Code:
<html>
<head>
<title>Testseite</title>
</head>
<body>
<map name="bild123" id="bild123">
<area shape="poly" coords="218,87,219,88,407,65,408,117,220,135" href="allmersbach.html" title="Hier Text für Link 123 test test" alt="Hier Text für Link 123 test test" />
<area shape="poly" coords="99,40,100,41,199,87,201,135,101,94" href="heiningen.html" title="Hier Text für Link 456 test test" alt="Hier Text für Link 456 test test" />
<area shape="poly" coords="1,115,2,116,115,102,193,136,5,160" href="weissach.html" title="Hier Text für Link 789 test test" alt="Hier Text für Link 789n test test" />
</map>
<img src="allmersbach-radwege.jpg" width="410" height="307" border="0" alt="" title="" usemap="#bild123" />
</body>
</html>
(getestet mit IE7, Firefox2 und Opera9)

Siehe Testseite

http://www.homepage-faqs.de/1-test-h...box/index.html


B) Mit dem Javascript "Overlib", siehe

http://www.homepage-faqs.de/index.ph...uch-mit-Bilder

HTML-Code:
<html>
<head>
<title>Testseite</title>
<script language="JavaScript" src="overlib.js" type="text/javascript"></script>
</head>
<body>
<map name="bild123" id="bild123">
<area shape="poly" coords="218,87,219,88,407,65,408,117,220,135" href="allmersbach.html" onmouseover="return overlib('<strong>Test 123:</strong><br>Test test test');" onmouseout="nd();" alt="" />
<area shape="poly" coords="99,40,100,41,199,87,201,135,101,94" href="heiningen.html" onmouseover="return overlib('<strong>Test 456:</strong><br>Test test test');" onmouseout="nd();" alt="" />
<area shape="poly" coords="1,115,2,116,115,102,193,136,5,160" href="weissach.html" onmouseover="return overlib('<strong>Test 789:</strong><br>Test test test');" onmouseout="nd();" alt="" />
</map>
<img src="allmersbach-radwege.jpg" width="410" height="307" border="0" alt="" title="" usemap="#bild123" />
</body>
</html>
(Getestet mit IE7, Firefox2 und Opera9)

Testseite

http://www.homepage-faqs.de/1-test-h...ox/index2.htm

Hinweis: Wird keine Verlinkung gebraucht, dann bei href="abc.html" einfach href="#" schreiben.


C) Infobox als Popup (Javascript) bei Klick

Verwendetes Javascript für Popup: http://www.jjam.de/JavaScript/Popup/Popup.html

Evtl. können auch andere Javascript-Popup-Codes verwendet werden.


HTML-Code:
<html>
<head>
<title>Dynamic Popup</title>

<script language="JavaScript">
function popup(w,h,site) {
x = screen.availWidth/2-w/2;
y = screen.availHeight/2-h/2;
var popupWindow = window.open(
'','','width='+w+',height='+h+',left='+x+',top='+y+',screenX='+x+',screenY='+y);
popupWindow.document.write(site);
}
</script>

</head>
<body>
<map name="bild123" id="bild123">

<area shape="poly" coords="218,87,219,88,407,65,408,117,220,135"
href="javascript:popup(250,150,'<html><head><title>Info-Popup 1</title></head><body>Mein Popup-Test 1<br>Test test und testen<br>Test für Popup</body></html>')"
alt="Info-Popup bei Klick" title="Info-Popup bei Klick" />


<area shape="poly" coords="99,40,100,41,199,87,201,135,101,94"
href="javascript:popup(250,150,'<html><head><title>Info-Popup 2</title></head><body>Mein Popup-Test 2<br>Test test und testen><br>Test für Popup</body></html>')"
alt="Info-Popup bei Klick" title="Info-Popup bei Klick" />


<area shape="poly" coords="1,115,2,116,115,102,193,136,5,160"
href="javascript:popup(250,150,'<html><head><title>Info-Popup 2</title></head><body>Mein Popup-Test 3<br>Test test und testen<br>Test für Popup</body></html>')"
alt="Info-Popup bei Klick" title="Info-Popup bei Klick" />


</map>
<img src="allmersbach-radwege.jpg" width="410" height="307" border="0" alt="" title="" usemap="#bild123" />
</body>
</html>
Wichtig:

Dieser Teil
HTML-Code:
javascript:popup(250,150,'<html>...</html>')
muss in einer Zeile stehen, keine Zeilenumbrüche, sonst geht das Popup nicht!

Test unter http://www.homepage-faqs.de/1-test-h...ox/index3.html

Tipp: Imagemaps ganz einfach mit Fast Image-Map 2 (Freeware, Adresse im Link unten) erstellen.

Siehe auch

Imagemaps / Hotspots - anklickbare Links auf einer Grafik


Anleitung (C) 2006 Daniel Wurst - http://www.homepage-faqs.de