nicht angemeldet
Hallo an alle,
habe letzte Woche schonmal mein Problem hier im Forum angesprochen.
Bei einer Antwort dachte ich, die Lösung wäre schon gefunden. Nach ein paar Stunden euphorischer Rumbastelei mußte ich feststellen, daß das ganze leider doch nicht so problemlos funktioniert, wie ich dachte.
Mein Problem: Ich möchte per Dhtml einen Balken in Form eines Gif‚s durchs Bild wandern lassen. Per imagemap befinden sich unterschiedliche Links darauf. Bei mouseover bleibt der Balken stehen, bei mouseout bewegt er sich wieder. Das alles funktioniert
inzwischen wunderbar. Das Problem ist nur, wenn sich die Maus bereits beim Laden der Seite über dem Bild befindet, wird anscheinend das mouseover nicht erkannt und der Balken läuft weiter.
Schlimmer noch, wenn mann anschließend mit der Maus wieder herunterfährt wird der Timer der Bewegenfunktion noch ein zweites Mal gestartet und das Band läuft doppelt so schnell. Wie läßt sich daß verhindern? (Grübel grübel...)
Nachfolgend der Quelltext:
<html>
<head>
<meta name="robots" content="noindex">
<meta name="robots" content="nofollow">
<script language="JavaScript">
<!--
var positionx= 0;
var positionx1= -800;
var Maus = 0;
var meinTimer;
function raus(){
if (Maus = 0) return;
if (Maus=1) bewege();
}
function rein(){
Maus = 1;
clearTimeout(meinTimer);
}
function bewege() {
Maus= 0;
if (navigator.appName == "Netscape") {
document.layers["Band"].left = positionx;
document.layers["Band2"].left = positionx1;
if (positionx > 800) positionx= 0 ;
if (positionx1 > 0) positionx1= -800 ;
positionx = positionx + 3;
positionx1 = positionx1 + 3;
} else {
document.all["Band"].style.pixelLeft = positionx;
document.all["Band2"].style.pixelLeft = positionx1;
if (positionx > 800) positionx= 0 ;
if (positionx1 > 0) positionx1= -800 ;
positionx = positionx + 3;
positionx1 = positionx1 + 3;
}
meinTimer = setTimeout("bewege()", 30);
}
function fenster(){
F1 = open("Sitemap/Sitemap_home_d.htm","Fenster1","width=150,height=485,screenX=30,screenY=30");
}
// -->
</script>
<style type="text/css"><!--
#band { position: absolute; top: 34px; left: 0px; visibility: visible }
#band2 { position: absolute; top: 34px; left: -795px; visibility: visible }
#maske { position: absolute; top: 34px; left: 750px; visibility: visible }-->
</style>
</head>
<body style="background-image:url(Bilder/bgMain.jpg);background-repeat:no-repeat;" SCROLL="NO" bgcolor="#001531" onload="bewege()">
<div id="Band">
<img src="Bilder/band_d.jpg" border="0" usemap="#Scroller"><map name="Scroller"><area shape="rect" coords="0,0,158,80" href="IT-Service/frameset.htm" onmouseover="rein();" onmouseout="raus();"><area shape="rect" coords="159,0,318,80" href="Webpublishing/frameset.htm" onmouseover="rein();" onmouseout="raus();"><area shape="rect" coords="319,0,478,80" href="Kontakt/frameset.htm" onmouseover="rein();" onmouseout="raus();"><area shape="rect" coords="479,0,638,80" href="Checkliste/frameset.htm" onmouseover="rein();" onmouseout="raus();"><area shape="rect" coords="639,0,800,80" href="javascript:fenster()" onmouseover="rein();" onmouseout="raus()"></map></a></div>
<div id="Band2">
<img src="Bilder/band_d.jpg" border="0" usemap="#Scroller"></div>
<div id="Maske">
<img src="Bilder/maske_d.gif" usemap="#" border="0"><map name=""></map></div>
<table border="0" cellpadding="3" cellspacing="2" width="742" height="98%" align="left">
<tr heigth="130" height="120">
<td heigth="130" height="120" align="right" valign="bottom"> <img height="103" width="409" src="Bilder/logoMain.gif"></td>
</tr>
</table>
</body>
</html>
Habe schon eine kleine Abfrage eingebaut um zu verhindern, das bei einem mouseout, daß vor enem mouseover kam, die Funktion ein zweites Mal gestartet wird. Hilft nur leider nicht viel.
Vielen Dank im Voraus für Eure Hilfe !!!