Einen Bild-Ausschnitt verschieben mit JavaScript und CSS.
Mit der CSS-Anweisung "clip:rect(oben rechts unten links)" lässt sich ein beliebiges Rechteck aus einem Bild herausschneiden. Zusammen mit JavaScript ergeben sich interessante Möglichkeiten für kleine Grafik-Spielereien.
Erfolgreich getestet mit Internet Explorer 5.5 und 6.0, Netscape Navigator 6.01, 6.1, 6.22, 7.0 und 7.1, Mozilla 1.21 und 1.4, sowie Opera 7.01.
Demo:
Funktioniert überings auch vor einem nicht-leeren Hintergrund (andere Bilder, Texte etc.): hier
Der Quelltext:
<html>
<head>
<title>Clipping 2</title>
<script language="JavaScript">
var imgWidth=445, imgHeight=342; // Bild-Maße
var x=0, y=0; // relative Position des Ausschnitts zu Beginn
var clipWidth=180, clipHeight=110; // Ausschnitts-Maße
var restWidth=imgWidth-clipWidth, restHeight=imgHeight-clipHeight; // Hilfsgrößen
// Bewegung des Bildausschnitts.
function move() {
document.getElementById("image").style.clip=
"rect("+y+" "+(x+clipWidth)+" "+(y+clipHeight)+" "+x+")";
// neuer Ausschnitt: rect(oben rechts unten links)
}
// Der Ausschnitt startet oben-links und bewegt sich immer diagonal über das Bild.
// Erreicht der Ausschnitt einen Bildrand prallt er im 90°-Winkel ab.
// Die Zufallselemente sollen monotone Bewegungsmuster verhindern.
// Startfunktion
function rightDown() {
// Ausschnitt-Koordinaten um einen Pixel nach rechts-unten
x++, y++;
move(); // Bewegung ausführen
// Sonderfälle
if(x==restWidth&&y==restHeight) setTimeout('leftUp()',40);
else if(x==restWidth) setTimeout('leftDown()',40);
else if(y==restHeight) setTimeout('rightUp()',40);
else if(Math.random()<0.001) setTimeout('rightUp()',40); // Zufallselement
else setTimeout('rightDown()',40);
// Ausschnitt bewegt sich weiter nach rechts-unten
}
function leftDown() {
x--, y++;
move();
if(x==0&&y==restHeight) setTimeout('rightUp()',40);
else if(x==0) setTimeout('rightDown()',40);
else if(y==restHeight) setTimeout('leftUp()',40);
else if(Math.random()<0.001) setTimeout('leftUp()',40);
else setTimeout('leftDown()',40);
}
function rightUp() {
x++, y--;
move();
if(x==restWidth&&y==0) setTimeout('leftDown()',40);
else if(x==restWidth) setTimeout('leftUp()',40);
else if(y==0) setTimeout('rightDown()',40);
else if(Math.random()<0.001) setTimeout('rightDown()',40);
else setTimeout('rightUp()',40);
}
function leftUp() {
x--, y--;
move();
if(x==0&&y==0) setTimeout('rightDown()',40);
else if(x==0) setTimeout('rightUp()',40);
else if(y==0) setTimeout('leftDown()',40);
else if(Math.random()<0.001) setTimeout('leftDown()',40);
else setTimeout('leftUp()',40);
}
</script>
</head>
<body bgcolor="#FFFFFF" onload="rightDown()">
<p>
<img id="image" style="position:absolute;top:10;left:10;clip:rect(0 180 110 0)"
src="HomerBart.gif" width="445" height="342" border="0" alt="">
</p>
</body>
</html>
Auch die Ausschnitt-Größe lässt sich, durch Einfügen von clipWidth++ und clipHeight++ bzw. clipWidth-- und clipHeight-- an geeigneter Stelle, variieren. Das könnte dann zum Beispiel so aussehen: hier