Codeschnipsel: Bildvorschau mit Zoom

von Benutzer gelöscht | 2 | 12268 Aufrufe

Anzeige Hier werben

Anwendung

Die beste Anwendung die man sich dafür Vorstellen kann ist wohl eine Gallerie mit kleinen Vorschaubildern.
Diese werden etwas größer ~20 Pixel damit man etwas mehr erkennt.

Vorgehen

  • Beim überfahren mit der Maus
    • Bild um 20 Pixel in der Breite vergößern
    • Bild um 20 Pixel in der Höhe vergrößern
    • Bild um -10 Pixel nach links verschieben
    • Bild um -10 Pixel nach oben verschieben
  • Beim heruntergehen mit der Maus
    • Bild um 20 Pixel in der Breite verkleinern
    • Bild um 20 Pixel in der Höhe verkleinern
    • Bild um 10 Pixel nach rechts verschieben
    • Bild um 10 Pixel nach unten verschieben
Bild zu Codeschnipsel: Bildvorschau mit Zoom
picture1
Bild zu Codeschnipsel: Bildvorschau mit Zoom
picture2
Bild zu Codeschnipsel: Bildvorschau mit Zoom
picture3
Bild zu Codeschnipsel: Bildvorschau mit Zoom
picture4

Die Bilder

Ich habe hier vorerst die standard Bilder von Windows XP genommen, wer andere und eigene hatte kann mir die gerne schicken.

Der Code

 
JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<script type="text/javascript">
    function zoomImages(PIXEL)
    {
        function getAllImages()
        {
            images = document.getElementsByTagName('img'); // Alle Bilder
            for(i = 0;i < images.length;i++) // Bilder einzeln durchgehen
            {
                image = images[i]; // Momentanes Bild in Variable für einfachere Schreibweise
                if(image.className) // Wenn das Attribute class vorhanden ist 
                {
                    if(image.className.match(/zoom/i)) // Wenn in der Klasse / den Klassen zoom vorhanden ist
                    {
                        image.onmouseover = function() // Beim überfahren
                        {
                            zoomIn(this); // Funktionsaufruf mit aktivem Bild als Parameter
                        }
                        image.onmouseout = function() // Beim verlassen des Bildes
                        {
                            zoomOut(this); // Funktionsaufruf mit aktivem Bild als Parameter
                        }
                    }
                }
            }
        }
        
        function zoomIn(IMAGE)
        {
            n = 0;
            for(i = 1;i <= PIXEL;i++) // Pixel für Pixel
                window.setTimeout(function() { IMAGE.style.width = IMAGE.offsetWidth + 1 + 'px'; IMAGE.style.height = IMAGE.offsetHeight + 1 + 'px'; IMAGE.style.left = 0 - ++n * 0.5 + 'px'; IMAGE.style.top = 0 - n * 0.5 + 'px'; }, i * 5);
        }
        
        function zoomOut(IMAGE)
        {
            n = 0;
            for(i = 1;i <= PIXEL;i++) // Pixel für Pixel
                window.setTimeout(function() { IMAGE.style.width = IMAGE.offsetWidth - 1 + 'px'; IMAGE.style.height = IMAGE.offsetHeight - 1 + 'px'; IMAGE.style.left = -PIXEL / 2 + ++n * 0.5 + 'px'; IMAGE.style.top = -PIXEL / 2 + n * 0.5 + 'px'; }, i * 5);
        }
        
        getAllImages();
    }
    
    window.onload = function()
    {
        zoomImages(20); // Aufruf der Funktion, Parameter: wie viel größer das Bild werden soll
    }
</script>


<img src="../../../image/picture1.jpg" alt="" class="zoom" style="width: 80px; height: 60px;" />
<img src="../../../image/picture2.jpg" alt="" class="zoom" style="width: 80px; height: 60px;" />
<img src="../../../image/picture3.jpg" alt="" class="zoom" style="width: 80px; height: 60px;" />
<img src="../../../image/picture4.jpg" alt="" class="zoom" style="width: 80px; height: 60px;" />

Natürlich könnte man das ganze noch so formatieren, dass es auf die anderen Bilder keinen einfluss hat.
Hier geht es aber nur um die Funktionsweise.

Über den Autor: Benutzer gelöscht
hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
Profilseite betrachten