Supportnet / Forum / Skripte(PHP,ASP,Perl...)
onmouseover und out
Frage
Hallo zusammen, habe da ein kleines problem mit einem onmouseout befehl.
Ich habe eine .html datei in der JS und dieses onmouseover und out in einer datei ist.
Habe also ein Bild in der ich einige Hotspots habe (mit Nr.versehen). Diese habe ich benannt und ein link draufgesezt (mit javascript). Zusätzlich habe ich es so gemacht, das wenn ich auf das Bild auf eine Nr.gehe, das er mir in der Ecke ein Bild anzeigt und wenn die Maus weg ist, das Bild natürlich weg ist. Es geht also ein popup auf, wenn ich diesen Link anklicke.
Das problem ist, wenn ich das popup schliesse, ist mein kleines Bild immer noch da und erst weg, wenn ich mit der Maus über die Nr. gehe.
Hier mal die Datei:
<html>
<head>
<title>Tal der Könige</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript1.2">
<!--
function Hide(vrstva) {
if (navigator.appName == "Microsoft Internet Explorer" || navigator.appName == "Opera") document.all[vrstva].style.visibility = "hidden";
else document.layers[vrstva].visibility = "hide";}
function Show(vrstva) {
if (navigator.appName == "Microsoft Internet Explorer" || navigator.appName == "Opera") document.all[vrstva].style.visibility = "visible";
else document.layers[vrstva].visibility = "show";}
// -->
</script>
<script language="JavaScript">
function openWin(url, windowname) {
newWin=window.open(url, windowname, "scrollbars=yes,width=900,height=750");
newWin.focus()
}
</script>
<base target="_self">
<script language="JavaScript" src="zahlen.js"></script>
</head>
<STYLE>
BODY {
scrollbar-face-color: #999999; scrollbar-shadow-color: #666666; scrollbar-highlight-color: #666666; scrollbar-3dlight-color: #666666; scrollbar-darkshadow-color: #666666; scrollbar-track-color: #666666; scrollbar-arrow-color: #666666
}
</style>
<body bgcolor="#FFFFFF" text="#000000" background="30a.gif">
<p>
<script language="JavaScript">
<!--
function SymError()
{
return true;
}
window.onerror = SymError;
//-->
</script>
</p>
<p align="center">
<img src="karte_tal-der-koenige.gif" width="397" height="440" usemap="#TalderKoenige" border="0">
<map name="TalderKoenige">
<area shape="rect" coords="91,24,111,39" onMouseOver="MM_swapImage;statusIn(' [ KV 1 ] ');Show('kv1');return true" onMouseOut=MM_swapImgRestore();statusOut();Hide('kv1');
a href="javascript:openWin('http://www.name.test.htm','newWindow')" target="_self" alt="KV 1" title="KV 1">
<area shape="rect" coords="158,82,179,96" onMouseOver="MM_swapImage;statusIn(' [ KV 2 ] ');Show('kv2');return true" onMouseOut=MM_swapImgRestore();statusOut();Hide('kv2');
a href="javascript:openWin('http://www.name.test.htm','newWindow')" target="_self" alt="KV 2" title="KV 2">
<area shape="rect" coords="190,98,212,113" onMouseOver="MM_swapImage;statusIn(' [ KV 3 ] ');Show('kv3');return true" onMouseOut=MM_swapImgRestore();statusOut();Hide('kv3');
a href="javascript:openWin('http://www.name.test.htm','newWindow')" target="_self" alt="KV 3" title="KV 3">
<area shape="rect" coords="221,118,242,132" onMouseOver="MM_swapImage;statusIn(' [ KV 4 ] ');Show('kv4');return true" onMouseOut=MM_swapImgRestore();statusOut();Hide('kv4');
a href="javascript:openWin('http://www.name.test.htm','newWindow')" target="_self" alt="KV 4" title="KV 4">
<area shape="default" nohref>
</map>
<div id="kv1" style="position: absolute; z-index: 2; left: 650; top: 20; visibility: hidden;"><img src="kv1.gif" border=0 width="200" height="93"></div>
<div id="kv2" style="position: absolute; z-index: 2; left: 650; top: 20; visibility: hidden;">
<img src="kv2.gif" border=0 width="200" height="93">
</div>
<div id="kv3" style="position: absolute; z-index: 2; left: 650; top: 20; visibility: hidden;"><img src="kv3.gif" border=0 width="200" height="93">
</div>
<tr>
<td width="32%" height="100">
<div align="center"><a onMouseOver="MM_swapImage;statusIn(' [ KV 1 ] ');return true" onMouseOut=MM_swapImgRestore();statusOut();
a href="javascript:openWin('http://www.name.test.htm','newWindow')"><img src="kv1.gif" width="150" height="70" border="0"></a></div></td>
<td width="2%"> </td><td width="33%" height="100">
<div align="center"><a onMouseOver="MM_swapImage;statusIn(' [ KV 2 ] ');return true" onMouseOut=MM_swapImgRestore();statusOut();
a href="javascript:openWin('http://www.name.test.htm','newWindow')"><img src="kv2.gif" width="150" height="59" border="0"></a></div></td>
Hoffe Ihr könnt was damit anfangen !!!
Antwort 1 von Dr.Ma-Busen
Nabend!
Hast du den Quelltext so aus deiner HTML- Datei kopiert??
Also, bei area fehlen noch " bei onMouseout. Da steht onMouseOut=MM_swapImgRestore();statusOut();Hide('kv3');
Muss aber onMouseOut="MM_swapImgRestore();statusOut();Hide('kv3');" lauten. Dann ist da auch noch das a zu viel, vor den href.
Das selbe bei den beiden Div- Tags wo du die Bilder kv1.gif und kv2.gif eingebunden hast.
Änder das mal um. Sollte es dann immer noch nicht gehen, dann gib mal den Link unter den man sich die Seite Ansehen kann.
MfG
Dr. Ma-Busen
Hast du den Quelltext so aus deiner HTML- Datei kopiert??
Also, bei area fehlen noch " bei onMouseout. Da steht onMouseOut=MM_swapImgRestore();statusOut();Hide('kv3');
Muss aber onMouseOut="MM_swapImgRestore();statusOut();Hide('kv3');" lauten. Dann ist da auch noch das a zu viel, vor den href.
Das selbe bei den beiden Div- Tags wo du die Bilder kv1.gif und kv2.gif eingebunden hast.
Änder das mal um. Sollte es dann immer noch nicht gehen, dann gib mal den Link unter den man sich die Seite Ansehen kann.
MfG
Dr. Ma-Busen
Antwort 2 von semi
Mal aus Neugier.
Welches Tool generiert diese ganzen MM_ Funktionen? Frontpage? Dreamweaver?
Gruß,
Michael
Welches Tool generiert diese ganzen MM_ Funktionen? Frontpage? Dreamweaver?
Gruß,
Michael
Antwort 3 von troublemaker
Hallo,
@Dr.Ma-Busen...habe es so gemacht wie Du geschrieben hattest, aber das Bild bleibt trotz alle dem. (war mir fast klar). Hier ist mal der Link dafür, vielleicht kannst damit was anfangen.
http://www.sphinx-vertrieb.de/sphinx/aegypten_infos/Seiten/Bauwerke/Graeber/Tal_Der_Koenige/koenige_uebersicht.html
Hoffe Du kommst klar damit *smile
@semi...ja ist von Dreamweaver, aber natürlich nicht alles....einiges mußte ich selbst einfügen
Gruß
Hermann
@Dr.Ma-Busen...habe es so gemacht wie Du geschrieben hattest, aber das Bild bleibt trotz alle dem. (war mir fast klar). Hier ist mal der Link dafür, vielleicht kannst damit was anfangen.
http://www.sphinx-vertrieb.de/sphinx/aegypten_infos/Seiten/Bauwerke/Graeber/Tal_Der_Koenige/koenige_uebersicht.html
Hoffe Du kommst klar damit *smile
@semi...ja ist von Dreamweaver, aber natürlich nicht alles....einiges mußte ich selbst einfügen
Gruß
Hermann
Antwort 4 von Dr.Ma-Busen
So, ich habe mir mal die Seite angeschaut. Das Problem liegt bei den beiden Funktionen Hide() und Show().
Wenn man jetzt auf ein dieser Links klickt dann öffnet sich ja unter den coursor das neue Fenster. Dadurch wird onMouseout nicht aufgerufen und das Bild wird dann auch nicht wieder versteckt. Erst wenn man wider mit dem Cursor über den selben link fährt.
Also, um das Problem zu lösen gibt es jetzt zwei möglichkeiten. Entweder du erweiterst die ganzen Links noch mit onMouedown="Hide('...')".
Oder, was etwas besser währe ist. Du erstellst eine Variable in der du den Namen des aktuellen Bildes Speicherst. Und rufst dann die Funktion Hide() auf wenn das Fenster in den Hintergrund gebracht wird.
Also etwa so:
Danach sollte es gehen.
MfG
Dr. Ma-Busen
Wenn man jetzt auf ein dieser Links klickt dann öffnet sich ja unter den coursor das neue Fenster. Dadurch wird onMouseout nicht aufgerufen und das Bild wird dann auch nicht wieder versteckt. Erst wenn man wider mit dem Cursor über den selben link fährt.
Also, um das Problem zu lösen gibt es jetzt zwei möglichkeiten. Entweder du erweiterst die ganzen Links noch mit onMouedown="Hide('...')".
Oder, was etwas besser währe ist. Du erstellst eine Variable in der du den Namen des aktuellen Bildes Speicherst. Und rufst dann die Funktion Hide() auf wenn das Fenster in den Hintergrund gebracht wird.
Also etwa so:
var old_obj = null;
function Show(vrstva) {
if (navigator.appName == "Microsoft Internet Explorer"
|| navigator.appName == "Opera") document.all[vrstva].style.visibility = "visible";
else document.layers[vrstva].visibility = "show";
old_obj = vrstva;
}
window.onblur = function(){Hide(old_obj)}
Danach sollte es gehen.
MfG
Dr. Ma-Busen
Antwort 5 von troublemaker
@Dr.Ma-Busen .. ich danke Dir....glaube es funzt
Gruß
Hermann
Gruß
Hermann