|
- JavaScript : Grafik-Effekte : Clipping 3 -
Eine weitere Möglichkeit CSS-Clipping mit JavaScript dynamisch zu erweitern.
Erfolgreich getestet mit Internet Explorer 5.5 und 6.0.
Netscape Navigator 6.22, 7.0 und 7.1, sowie Mozilla 1.21 und 1.4 lassen gelegendlich in der Mitte ein paar Pixel stehen.
Demo: ... suchen ...
Der Quelltext:
<html>
<head>
<title>Clipping 3</title>
</head>
<body bgcolor="#FFFFFF" onmouseover="status=1;show()" onmouseout="status=0;hide()">
<p>
<img id="image" style="position:absolute;top:10;left:10;clip:rect(0 0 0 0)"
src="borgqueen.jpg" width="285" height="233" border="0" alt="">
</p>
<script language="JavaScript">
var imgWidth=285, imgHeight=233;
var xStart=Math.floor(imgWidth/2), yStart=Math.floor(imgHeight/2);
var x=xStart, y=yStart;
var clipWidth=(imgWidth-2*xStart), clipHeight=(imgHeight-2*yStart);
var status;
function show() {
if(status==1) {
document.getElementById("image").style.clip=
"rect("+y+" "+(x+clipWidth)+" "+(y+clipHeight)+" "+x+")";
x-=1;
clipWidth+=2;
y-=1;
clipHeight+=2;
if(x>0||y>0) setTimeout('show()',50);
}
}
function hide() {
if(status==0) {
document.getElementById("image").style.clip=
"rect("+y+" "+(x+clipWidth)+" "+(y+clipHeight)+" "+x+")";
x+=1;
clipWidth-=2;
y+=1;
clipHeight-=2;
if(clipWidth>-2||clipHeight>-2) setTimeout('hide()',50);
}
}
</script>
</body>
</html>
Das Script hier mal nicht im head-tag, da es sonst u.U. zu einem Laufzeitfehler kommen kann.
Download Clipping_3.zip (mit Bild ca. 11 kb)
© 2001-2004 Albert Kluge - Alle Rechte vorbehalten
Impressum | Datenschutz | Nutzung | eMail
|