Andreas: Frameübergreifende Animation

Beitrag lesen

Hallo,

bin noch Anfänger in JavaScript und habe folgendes Problem:
Meine HP habe ich mit mehreren Frames gebaut. In einem Frame (Der Navigationsleiste) habe ich ein Script eingefügt (ein Augenpaar, dass dem Mauszeiger hinterher guckt)

Das sieht so aus:

<style type="text/css">
<!--
.eyestyle{
padding-left : 50px;
padding-top : 10px;
padding-right : 10px;
padding-bottom : 0px;
float : left;
}
//-->
</style>

<script type="text/javascript">
<!-- Static Eyes
if (document.getElementById){
//Pre load images
pic0=new Image();
pic0.src="../bilder/eye.gif";
pic1=new Image();
pic1.src="../bilder/pupils.gif";
function watchTheMouse(y,x){
var dy,dx,angle1,angle2,d1,d2;
osy=eyeballs.offsetTop;
osx=eyeballs.offsetLeft;
c1y=osy+17;
c1x=osx+17;
c2y=osy+17;
c2x=osx+52;
dy1 = y - c1y;
dx1 = x - c1x;
d1 = Math.sqrt(dy1*dy1 + dx1*dx1);
dy2 = y - c2y;
dx2 = x - c2x;
d2 = Math.sqrt(dy2*dy2 + dx2*dx2);
ay1 = y - c1y;
ax1 = x - c1x;
angle1 = Math.atan2(ay1,ax1)*180/Math.PI;
ay2 = y - c2y;
ax2 = x - c2x;
angle2 = Math.atan2(ay2,ax2)*180/Math.PI;
dv = 1.7;
onEyeBall1 = (d1 < 17)?d1/dv:10;
onEyeBall2 = (d2 < 17)?d2/dv:10;
pupil1.top = c1y-6+onEyeBall1*Math.sin(angle1*Math.PI/180)-osy+addPx;
pupil1.left = c1x-6+onEyeBall1*Math.cos(angle1*Math.PI/180)-osx+addPx;
pupil2.top = c2y-6+onEyeBall2*Math.sin(angle2*Math.PI/180)-osy+addPx;
pupil2.left = c2x-6+onEyeBall2*Math.cos(angle2*Math.PI/180)-osx+addPx;
}

function init(){
theEyes='<div id="eyblls" style="position:relative;width:69px;height:34px"><img src="../bilder/eye.gif" alt=""/>'
+'<img id="ppl1" src="../bilder/pupils.gif" alt="" style="position:absolute;top:10px;left:11px;width:13px;height:13px"/>'
+'<img id="ppl2" src="../bilder/pupils.gif" alt="" style="position:absolute;top:10px;left:46px;width:13px;height:13px"/>'
+'</div>';
document.write(theEyes);
d = document;
eyeballs=d.getElementById("eyblls");
pupil1=d.getElementById("ppl1").style;
pupil2=d.getElementById("ppl2").style;
addPx=((d.compatMode) &&
d.compatMode.indexOf("CSS") != -1)?"px":0;
d.onmousemove=mouse;
}

function mouse(e){
if (!e) e = window.event;
 if (typeof e.pageY == 'number'){
  mouseY = e.pageY;
  mouseX = e.pageX;
 }
 else{
  if (document.documentElement &&
  typeof document.documentElement.clientWidth == "number" &&
  document.documentElement.clientWidth != 0)
   var ref = document.documentElement;
  else{
  if (document.body &&
  typeof document.body.clientWidth == "number")
   var ref = document.body;
  }
  if (typeof window.pageYOffset == "number"){
   var scY=window.pageYOffset;
   var scX=window.pageXOffset;
  }
  else{
   var scY=ref.scrollTop;
   var scX=ref.scrollLeft;
  }
 mouseY = e.clientY + scY;
 mouseX = e.clientX + scX;
 }
watchTheMouse(mouseY,mouseX);
}
}
//-->
</script>

Soweit so gut!!!

Aber wenn man mit dem Mauszeiger den Frame (mit der Navigationsleiste) verlässt und z.B. in den Frame geht, in dem die Seiten von der Navigationsleiste aufgerufen werden, bleiben die Augen stehen und verfolgen den Mauszeiger erst wieder, wenn man mit dem Mauszeiger wieder zurück in den "NavigationsFrame" geht!!! Ich würde aber gerne, dass die Augen den Mauszeiger auch frameübergreifend verfolgen, also wenn der Zeiger sich in den benachbarten Frames bewegt.

Bisher hat mir deine Seite immer weiterhelfen können und mir auch zu guten HTML-Kenntnissen verholfen, doch da ich noch nicht besonders fit in JavaScript bin, fällt es mir hierbei etwas schwer!!!

Auf meiner Suche nach einer Antwort bin ich oft (und auch auf deiner Seite) auf "parent.frame..." gestoßen, damit aber nicht zurecht gekommen (bin wie gesagt noch sehr unerfahren mit JavaScript)und bin mir auch nicht sicher, ob es damit wirklich funktioniert.

Wär cool, wenn du mir weiterhelfen könntest!!!

Thx

Andreas