script für augen rollen kompatiebel machen

L

lubino

Mitglied
hallo ihr lieben,

ich habe einen script gefunden der für mich ideal ist,
nun will ich auch das er auf allen browsern gleich angezeigt wird. im moment ist er nur für IE geschrieben...ich habe das beispiel hochgeladen unter :

http://www.lubino.de/test.htm

wie kann man das machen ? ich freu mich :)
 
Andere Browser als der IE kennen das document.all-Objekt nicht uns selbst der IE hat damit Schwierigkeiten. Abhilfe schaffen die DOM-Methoden (funktionieren allerdings in wirklich alten Browsern nicht): Dazu ersetzte 'document.all["pupilleX"]' durch 'document.getElementById("pupilleX")', wobei das 'X' am Ende für die jeweilige Nummer steht. Weiter musst du die Zeilen 'x=...' und 'y=...' durch 'x = (document.all) ? window.event.x + document.body.scrollLeft : e.pageX;' 'y = (document.all) ? window.event.y + document.body.scrollTop : e.pageY;' ersetzten, dann sollte alles klappen. Habs aber nicht getestet. P.S. Sorry wegen der Lesbarkeint meines Beitrages. Das Forum wird anscheinend z.Zt. umgestellt und das hat wohl zu Floge, das Codeboxen, Zeilenumbrüche und alles andere, was einen Text übersichtlich machen könnte ausgeschaltet ist.
 
Zuletzt bearbeitet:
danke, du hast recht
HTML: 
document.getElementById
ist besset. aber trotzdem läuft en noch nicht im firefox oder netspace. im opera kommt der script nicht 100% durch und im IE zeig er mir das ein fehler auf der seite ist. wo ist nun der fehler? ich hab noch alles angegeben was man braucht oder brauch ich nocht eine browser dekeration?
 
Oh man, wie wäre es, wenn du mal die Fehlermeldungen liest? Du hast kein element mit der id "pupille2" oder "auge2" auf deiner Seite, versuchst beides aber im Script anzusprechen.
 
Wie ich schon sagte: Lies die Fehlermeldungen. Der Mozilla sagt dir ebenfalls, dass pixelTop nicht unterstüzt wird. Du müsst also statt style.pixelTop nur styleTop verwenden. Alle anderen Änderungen, die ich an deinem Code gemacht habe sind nur rein kosmetischer Natur.
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var    auge = 44,    //Höhe des Auges (entschricht 'o' bei 72pt)
    pupille = 6,    //Höhe der Pupille (entspricht '.' bei 36pt)
    hoehe = 20,    //Hoehe von oben
    links=300,    //Anstand vom linken Rand
    abstand=55,    //Abstand der Augen zueinander
    
    x=y=0, auge1, pupille1;

document.onmousemove = mouse;

function mouse(e){
    x = (document.all) ? window.event.x + document.body.scrollLeft : e.pageX;
    y = (document.all) ? window.event.y + document.body.scrollTop : e.pageY;
    status = x + "    " + y;
    pupillen();
}

function ausrichten() {
    auge1 = document.getElementById("auge1").style;
    pupille1 = document.getElementById("pupille1").style;
    auge1.left = links - auge/2 + pupille;
    auge1.style.top = hoehe - auge/2;
}

function pupillen() {
    pupille1.left = links + (auge/2 - pupille) * Math.cos(Math.atan2(y-(hoehe ),x-(links)));
    pupille1.top = hoehe + (auge/2 - pupille) * Math.cos(Math.atan2(x-(links ),y-(hoehe)));
}

</script>

<style type="text/css">
#auge1        { font-family:"Courier New", Courier, mono; font-size: 72pt; position: absolute;}
#pupille1    { font-family:"courier new"; font-size: 36pt; position: absolute;}
</style>

</head><body onload="ausrichten()">

    <span id="pupille1" class="pupille1"><font color="#003333">.</font></span><span id="auge1" class="auge1"><font color="#66CC00">o</font></span> 

</body>

</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück