Frameübergreifende Animation

[Andreas]

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

[wahsaga]

hi,

Ich würde aber gerne, dass die Augen den Mauszeiger auch frameübergreifend verfolgen, also wenn der Zeiger sich in den benachbarten Frames bewegt.

dann müssen im anderen frame diese augen ebenfalls vorhanden sein.

mach dir klar, was frames sind - ein mittel zum parallelen anzeigen von mehreren _unabhängigen_ dokumenten.

du kannst also nicht die "augen" in einen anderen frame rüberschieben, sondern müsstest dort eigene "augen" haben.
die im einen frame dann ausblenden, wenn der mauszeiger diesen "verlässt", und die im anderen einblenden.

Bisher hat mir deine Seite immer weiterhelfen können [...]
Wär cool, wenn du mir weiterhelfen könntest!!!

interessante art der persönlichen ansprache :-)

gruss,
wahsaga

[Andreas]

Hallo, erstmal danke für deine schnelle Antwort!!!

Habe mich etwas missverständlich ausgedrückt!!!
Die Augen bewegen sich nicht in dem Sinne dem Mauszeiger hinterher, dass sie an ihm kleben, sondern sie gucken ihm nur hinterher!!!
Hab ich schlecht beschrieben, sorry!!!
Also die Augen haben ihre feste Position in der Navigationsleiste und gucken dem Mauszeiger nur hinterher!!! Aber wenn man den Mauszeiger aus dem "Navigationsframe" bewegt gucken sie nicht mehr hinterher. Sollen sie aber!!!
Das ist mein Problem (ich hoffe nun präziser beschrieben) ;)

Kannst du mir trotzdem weiterhelfen???

Andreas

[wahsaga]

hi,

Die Augen bewegen sich nicht in dem Sinne dem Mauszeiger hinterher, dass sie an ihm kleben, sondern sie gucken ihm nur hinterher!!!

dann musst du wohl zum einen den event "mausbewegung" in den anderen frames auch abfangen, und zum anderen aus der position im jeweiligen frame dann berechnen, in welche "richtung" die augen blicken müssen.

um ausführliches studium des javascript-kapitels von selfhtml wirst du da wohl nicht herumkommen.

gruss,
wahsaga

[Andreas]

um ausführliches studium des javascript-kapitels von selfhtml wirst du da wohl nicht herumkommen.

F***!!! Genau das wollte ich vermeiden!!!

Hat denn keiner eine einfachere Lösung???
Oder weiß jemand, ob man das auch mit dem "parent.framename....."-Befehl machen kann und wenn ja wie???

[Jens Holzkämper]

Tach,

F***!!! Genau das wollte ich vermeiden!!!

Hat denn keiner eine einfachere Lösung???

nein, wegen: " Von allen hier Teilnehmenden werden HTML-Grundkenntnisse erwartet. Es wird erwartet, daß bei Problemen erst einmal in SELFHTML, im  Forumsarchiv oder in anderen Quellen nach einer Lösung gesucht wird."

mfg
Woodfighter

[Andreas]

nein, wegen: " Von allen hier Teilnehmenden werden HTML-Grundkenntnisse erwartet. Es wird erwartet, daß bei Problemen erst einmal in SELFHTML, im  Forumsarchiv oder in anderen Quellen nach einer Lösung gesucht wird."

Über HTML Grundkenntnisse verfüge ich schon seit Jahren!!! Hier geht es ja um JavaScript!!! Und das liegt mir noch nicht so ganz!!!
Und in SELFHTML und im Forumsarchiv und in anderen Quellen habe ich auch schon gesucht!!! Sonst würd ich hier nicht reinschreiben!!!

[Jens Holzkämper]

Tach,

Über HTML Grundkenntnisse verfüge ich schon seit Jahren!!! Hier geht es ja um JavaScript!!! Und das liegt mir noch nicht so ganz!!!
Und in SELFHTML und im Forumsarchiv und in anderen Quellen habe ich auch schon gesucht!!! Sonst würd ich hier nicht reinschreiben!!!

dann hast du jetzt die Möglichkeit es zu lernen, das wird hier von dir erwartet. Du hast selber gesagt, dass du das Javascript Kapitel noch nicht studiert hast, also tue dies. Du willst hier ein nichttriviales Problem gelöst haben, das deinem Benutzer keinen realen Mehrwert bringt; ich behaupte, daß niemand hier dir die Lösung auf dem Silbertablett servieren wird.

mfg
Woodfighter

P.S. Nimm dir den Spruch in meiner Signatur zu Herzen.

[Andreas]

dann müssen im anderen frame diese augen ebenfalls vorhanden sein.

Das kann ich in meine andere HP einbauen!!! Da wollte ich genau sowas machen!!! (nicht mit den Augen, sondern mit einem normalem Bild) - Wusste bisher nur nicht wie. Aber damit kann ich es jetzt erst mal versuchen!!!

THX