Popup (html-Seite) öffnen und bei Fokusverlust schließen
katkit19
- javascript
Hallo an alle Spezialistinnen und Spezialisten,
ich schlage mich seit Stunden mit einem wahrscheinlich völlig banalen Problem herum:
Ich erstelle eine interaktive Karte (usemap). Beim Klick auf einen Hotspot soll sich eine andere html-Seite als Popup (400x400) öffnen. Soweit kein Problem. Diese Seite soll sich aber auch wieder schließen, wenn ich irgendwo auf die Karte oder sonstwo außerhalb des Fokusbereichs klicke. Irgendwie geht das mit onblur, soweit war ich schon.
Da ich an verschiedenen Stellen der Karte verschiedene html Seiten aufrufen will, sollte dies als Variable im Link auftauchen.
Die Lösung ist irgendwo da draußen, aber wo? Hat jemand so ein Script zum Download gefunden oder kann es mir senden?
Vielen Dank schonmal,
katkit19
Hallo,
ich bin noch nicht ganz auf dem Stand, den du im Moment erreicht hast. Schaffst du es im Moment verschiedene Bereiche auf verschiedene HTML-Seiten verweisen zu lassen oder nicht? Wenn ja, was willst du im Parameter unterbringen?
Generell sehe ich den Zusammenhang zum onblur nicht. Das onblur gehört am Besten in das Dokument im PopUp, ansonsten wird das eine ziemliche Herumprobiererei. Von dort aus müsstest du lediglich mit onblur="self.close();" das Fenster schließen.
MfG
Rouven
Hi,
Irgendwie geht das mit onblur, soweit war ich schon.
Schreib in Deine Seite (Head, Javascript):
function checkPop() {
if (popup && !popup.closed) popup.close();
popup = false;
}
window.onfocus = checkPop;
D.h.: sobald Du Dein "Hauptfenster" nach vorne holst wird auf Popup geprueft, wenn vorhanden/offen wird geschlossen.
ACHTUNG: "popup" ist der Handler mit dem das popup geoeffnet wurde und muss ggf. angepasst werden.
Gruesse, Joachim
Hallo Joachim, hallo Rouven!
Vielen Dank für die Antworten. Ich habe inzwischen eine Lösung gefunden. Die ist so banal, dass ich mich fast nicht traue, Sie zu posten:
Das Geheimnis ist, im auf der Zielseite den <BODY> Tag in <body onblur="close()"> zu ändern.
Die Quellseiten enthalten, unabhängig davon, ob es sich um ein usemap oder ein Textlink handelt, im BODY folgendes Script:
<script type="text/javascript">
function oeffnefenster (url) {
fenster = window.open(url, "fenster", "width=600,height=400,status=yes,scrollbars=yes,resizable=yes");
fenster.focus();
}
</script>
Für Textlinks sieht der Verweis auf der Quellseite folgendermaßen aus:
<a href="javascript:oeffnefenster('test.htm');">Javatest</a>
Für Links aus usemaps wie folgt:
<p><map name="FPMap0">
<area href="javascript:oeffnefenster('test.htm');" shape="rect" coords="601, 126, 705, 222">
</map><img border="0" src="Map.jpg" usemap="#FPMap0" width="800" height="741"></p>
Die Zielseite test.htm:
<html>
<head>
<title>Testziel</title>
</head>
<body onblur="close()">
<p>Dies ist eine Testseite.</p>
</body>
</html>
Wahrscheinlich ist das nicht die eleganteste Lösung, aber sie funktioniert. Falls jemand bessere Lösungen auf Lager hat - ich bin weiter interessiert.
Viele Grüße,
Katkit