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 -


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


Download  Clipping.zip (mit Bild ca. 25 kb)




© 2001-2004 Albert Kluge - Alle Rechte vorbehalten
Impressum | Datenschutz | Nutzung | eMail