Java Reference
In-Depth Information
</head>
<body>
<h1>Eine Bildanimation</h1>
<button>Start</button><button>Zurücksetzen</button>
<div id="p1"><img src="images/b5.jpg" id="b1" /></div>
<div id="ausgabe"></div>
</body>
</html>
Wir haben hier eine einfache Webseite mit einer Graik und zwei Schaltlächen vorliegen,
die wie üblich mit CSS formatiert wird. Für dieses Beispiel ist die CSS-Formatierung wieder
zum Teil von Bedeutung - kap8_23.css:
Listing 8.60■ Die CSS-Regeln
h1 {
background-color : #EEE;
}
#p1 {
position: absolute; top: 150px; left: 100px;
}
#b1 {
width: 40px; height: 30px;
}
Breite und Höhe des Bilds werden mit Style Sheets festgelegt und der umgebende DIV-
Bereich wird positioniert. Kommen wir zur JavaScript-Datei kap8_23.js:
Listing 8.61■ Eine Animation durch zeitverzögerte Veränderung der Größe und den Austausch
einer Graik
var mB1 = new Image();
var mB2 = new Image();
mB1.src = "images/b5.jpg";
mB2.src = "images/b4.jpg";
var counter = 0;
function ani() {
counter++;
with (document) {
getElementById("b1").src = mB1.src;
getElementById("b1").style.height = (30 + counter * 3) + "px";
getElementById("b1").style.width = (40 + counter * 4) + "px";
getElementById("ausgabe").innerHTML = "Breite: " +
getElementById("b1").style.width + ", Höhe: " +
getElementById("b1").style.height;
if (counter < 150) window.setTimeout("ani()", 1);
else {
getElementById("b1").src = mB2.src;
counter = 0;
}
}
}
function retur() {
with (document) {
getElementById("b1").src = mB1.src;
getElementById("b1").style.height = 30 + "px";
getElementById("b1").style.width = 40 + "px";
 
Search WWH ::




Custom Search