Java & JavaScript


Home
Applets
Scripts
   Navigation:
 · Kontextmenü
 · Linkwechsler
   Dialogboxen:
 · Alert
 · Alert 2
 · Confirm
 · Prompt
   Animation:
 · Kreis
 · Kreis 2
 · Kreis 3
 · Drei Kreise
 · Spirale
 · Planetarium
 · Globus
   Grafik-Effekte:
 · Clipping
 · Clipping 2
 · Clipping 3
 · Alpha-Clipping
 · Fading
 · Wellenmuster
 · Wellenmuster 2
   Bildschirmschoner:
 · Proto
 · Marquee
 · Donut
 · Worm
 · Mondrian
 · Pacman
   Datum & Uhrzeit:
 · Countdown
 · Countup
 · Wochentag
 · Last Modified
   Fraktale:
 · Apfelmännchen
 · Apfelmännchen 2
 · Juliamenge
 · Juliamenge 2
 · C-Wert-Generator
   Mathematik:
 · Primzahlen
 · Primzahlen 2
   Verschiedenes:
 · Dynamic Popup
 · TextArea Counter
 · Warteschleife
 · Mausschreiber
Gäste
Kontakt

- 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