WinFuture-Forum.de: [Erledigt]Mouseover Effekt JS - WinFuture-Forum.de

Zum Inhalt wechseln

Nachrichten zum Thema: Entwicklung
Seite 1 von 1

[Erledigt]Mouseover Effekt JS Zoom Effekt für Bilder


#1 Mitglied ist offline   J000S 

  • Gruppe: aktive Mitglieder
  • Beiträge: 2.051
  • Beigetreten: 13. Juni 09
  • Reputation: 38
  • Geschlecht:Männlich
  • Wohnort:C:\Home
  • Interessen:Computer, Feuerwehr, Sport

geschrieben 17. November 2011 - 08:06

Hallo alle zusammen,



ich hab ein ärgerliches Problem mit einem Javascript Zoom-Effekt. Vorweg gleich mal: Ich hab das Script nicht selber geschrieben und bin auch nicht gerade der Experte für JS.


Wie dem auch sei... das Script an sich funktioniert :) Auch mit 2 oder mehr Bildern. Nur hab ich jetzt eigentlich das Problem, dass wenn ich ein Bild im Hochformat habe, dieses wie ein Querformatiges gezoomt wird.

Ich habe schon versucht, das Script zwei mal einzubinden, sodass das eine script für quer und das andere für hoch ist. Dummerweise funktioniert immer nur eines :( Also nur ein Bild wird gezoomt.


Hoffe mir kann jemand zeigen, wie ich das hinbekomme, dass die unterschiedlichen Bilder gezoomt werden können.



// JavaScript Bilder Zoom
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 + 3 + 'px'; IMAGE.style.height = IMAGE.offsetHeight + 2 + 'px'; IMAGE.style.left = 0 - ++n * 0.5 + 'px'; IMAGE.style.top = 0 - n * 0.5 + 'px'; }, i * 3);
        }
  
        function zoomOut(IMAGE)
        {
            n = 0;
            for(i = 1;i <= PIXEL;i++) // Pixel für Pixel
                window.setTimeout(function() { IMAGE.style.width = IMAGE.offsetWidth - 3 + 'px'; IMAGE.style.height = IMAGE.offsetHeight - 2 + 'px'; IMAGE.style.left = -PIXEL / 2 + ++n * 0.5 + 'px'; IMAGE.style.top = -PIXEL / 2 + n * 0.5 + 'px'; }, i * 4);
        }
        getAllImages();
    }
    window.onload = function()
    {
        zoomImages(100); // Aufruf der Funktion, Parameter: wie viel größer das Bild werden soll
 }

Dieser Beitrag wurde von J000S bearbeitet: 21. November 2011 - 09:10

0

Anzeige



#2 Mitglied ist offline   Ludacris 

  • Gruppe: Moderation
  • Beiträge: 4.666
  • Beigetreten: 28. Mai 06
  • Reputation: 218
  • Geschlecht:Männlich

geschrieben 17. November 2011 - 08:25

Wenn du ein bisschen (ca ne Stunde) warten kannst dann schau ich mal was ich machen kann ;)
0

#3 Mitglied ist offline   J000S 

  • Gruppe: aktive Mitglieder
  • Beiträge: 2.051
  • Beigetreten: 13. Juni 09
  • Reputation: 38
  • Geschlecht:Männlich
  • Wohnort:C:\Home
  • Interessen:Computer, Feuerwehr, Sport

geschrieben 17. November 2011 - 08:29

hm ja, dass sollte gehen :D





wenn du keine zeit zur Verfügung hast, ist das natürlich OK. Vielleicht hat ja schon jemand anderes ne Idee? :)

Dieser Beitrag wurde von J000S bearbeitet: 17. November 2011 - 11:32

0

#4 Mitglied ist offline   Ludacris 

  • Gruppe: Moderation
  • Beiträge: 4.666
  • Beigetreten: 28. Mai 06
  • Reputation: 218
  • Geschlecht:Männlich

geschrieben 18. November 2011 - 09:24

:blush: ich hab total auf dich vergessen :blush: sobald ich hier Strom hab werd ich's mir anschaun :)

Sooo... mein erster Ansatz wäre jetzt mal einfach per if-else Verzweigung zu überprüfen ob das breite größer ist als die höhe und umgekehrt. Wenn das schon klappt dann bin ich happy, versuch das einfach mal :)

// JavaScript Document

// JavaScript Bilder Zoom
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;
			if(IMAGE.style.width > IMAGE.style.height){
				for(i = 1;i <= PIXEL;i++) // Pixel für Pixel
                window.setTimeout(function() { IMAGE.style.width = IMAGE.offsetWidth + 3 + 'px'; IMAGE.style.height = IMAGE.offsetHeight + 2 + 'px'; IMAGE.style.left = 0 - ++n * 0.5 + 'px'; IMAGE.style.top = 0 - n * 0.5 + 'px'; }, i * 3);
			}
			else if (IMAGE.style.width < IMAGE.style.height){
				for(i = 1;i <= PIXEL;i++) // Pixel für Pixel
                window.setTimeout(function() { IMAGE.style.height = IMAGE.offsetWidth + 3 + 'px'; IMAGE.style.width = IMAGE.offsetHeight + 2 + 'px'; IMAGE.style.left = 0 - ++n * 0.5 + 'px'; IMAGE.style.top = 0 - n * 0.5 + 'px'; }, i * 3);
			}
			else{
				for(i = 1;i <= PIXEL;i++) // Pixel für Pixel
                window.setTimeout(function() { IMAGE.style.width = IMAGE.offsetWidth + 3 + 'px'; IMAGE.style.height = IMAGE.offsetHeight + 3 + 'px'; IMAGE.style.left = 0 - ++n * 0.5 + 'px'; IMAGE.style.top = 0 - n * 0.5 + 'px'; }, i * 3);
			}
            
        }
  
        function zoomOut(IMAGE)
        {
            n = 0;
			if(IMAGE.style.width > IMAGE.style.height){
				 for(i = 1;i <= PIXEL;i++) // Pixel für Pixel
                window.setTimeout(function() { IMAGE.style.width = IMAGE.offsetWidth - 3 + 'px'; IMAGE.style.height = IMAGE.offsetHeight - 2 + 'px'; IMAGE.style.left = -PIXEL / 2 + ++n * 0.5 + 'px'; IMAGE.style.top = -PIXEL / 2 + n * 0.5 + 'px'; }, i * 4);
 
			}
			else if(IMAGE.style.width > IMAGE.style.height){
				 for(i = 1;i <= PIXEL;i++) // Pixel für Pixel
                window.setTimeout(function() { IMAGE.style.height = IMAGE.offsetWidth - 3 + 'px'; IMAGE.style.width = IMAGE.offsetHeight - 2 + 'px'; IMAGE.style.left = -PIXEL / 2 + ++n * 0.5 + 'px'; IMAGE.style.top = -PIXEL / 2 + n * 0.5 + 'px'; }, i * 4);
 
			}
			else
			{
				 for(i = 1;i <= PIXEL;i++) // Pixel für Pixel
                window.setTimeout(function() { IMAGE.style.height = IMAGE.offsetWidth - 3 + 'px'; IMAGE.style.width = IMAGE.offsetHeight - 2 + 'px'; IMAGE.style.left = -PIXEL / 2 + ++n * 0.5 + 'px'; IMAGE.style.top = -PIXEL / 2 + n * 0.5 + 'px'; }, i * 4);
			}
        }
        getAllImages();
    }
    window.onload = function()
    {
        zoomImages(100); // Aufruf der Funktion, Parameter: wie viel größer das Bild werden soll
 }


1

#5 Mitglied ist offline   J000S 

  • Gruppe: aktive Mitglieder
  • Beiträge: 2.051
  • Beigetreten: 13. Juni 09
  • Reputation: 38
  • Geschlecht:Männlich
  • Wohnort:C:\Home
  • Interessen:Computer, Feuerwehr, Sport

geschrieben 18. November 2011 - 10:45

Hm... jetzt hab ich gerade wenig Zeit dfür :(



werde das wohl erst heute Nachmittag testen können.
0

#6 Mitglied ist offline   Ludacris 

  • Gruppe: Moderation
  • Beiträge: 4.666
  • Beigetreten: 28. Mai 06
  • Reputation: 218
  • Geschlecht:Männlich

geschrieben 18. November 2011 - 11:13

Kein Problem, teste es wann du zeit hast, mich drängts nicht :D
0

#7 Mitglied ist offline   J000S 

  • Gruppe: aktive Mitglieder
  • Beiträge: 2.051
  • Beigetreten: 13. Juni 09
  • Reputation: 38
  • Geschlecht:Männlich
  • Wohnort:C:\Home
  • Interessen:Computer, Feuerwehr, Sport

geschrieben 18. November 2011 - 12:40

Naja... beide Bilder werden gezoomt.... aber das Hochformatige wird total unproportional vergrößert :(
0

#8 Mitglied ist offline   Ludacris 

  • Gruppe: Moderation
  • Beiträge: 4.666
  • Beigetreten: 28. Mai 06
  • Reputation: 218
  • Geschlecht:Männlich

geschrieben 18. November 2011 - 12:44

Hm...

mach mal nen screenshot
0

#9 Mitglied ist offline   J000S 

  • Gruppe: aktive Mitglieder
  • Beiträge: 2.051
  • Beigetreten: 13. Juni 09
  • Reputation: 38
  • Geschlecht:Männlich
  • Wohnort:C:\Home
  • Interessen:Computer, Feuerwehr, Sport

geschrieben 18. November 2011 - 12:48

also hier ist das wenn er wieder raus gezoomt hat...



Angehängtes Bild: ssm.jpg





PS: Hab gleich um 1 frei. Wäre um 3 erst wieder zu Hause um weiter zu gucken ;)



EDIT: Das Bild wird beim 1. mal so klein und danach wird das dann immer größer. Also es zoomt mehr rein als raus. und dieses unproportionale bleibt so.

Dieser Beitrag wurde von J000S bearbeitet: 18. November 2011 - 12:50

0

#10 Mitglied ist offline   Ludacris 

  • Gruppe: Moderation
  • Beiträge: 4.666
  • Beigetreten: 28. Mai 06
  • Reputation: 218
  • Geschlecht:Männlich

geschrieben 18. November 2011 - 17:46

Hm.. pack mal den HTML und JavaScript Code in eine Datei und schick mir die.
0

#11 Mitglied ist offline   J000S 

  • Gruppe: aktive Mitglieder
  • Beiträge: 2.051
  • Beigetreten: 13. Juni 09
  • Reputation: 38
  • Geschlecht:Männlich
  • Wohnort:C:\Home
  • Interessen:Computer, Feuerwehr, Sport

geschrieben 18. November 2011 - 23:47

Ja... das müsste allerdings bis Sonn- oder evtl bis Montag warten. :(

Hab momentan sehr viel um die Ohren
0

#12 Mitglied ist offline   J000S 

  • Gruppe: aktive Mitglieder
  • Beiträge: 2.051
  • Beigetreten: 13. Juni 09
  • Reputation: 38
  • Geschlecht:Männlich
  • Wohnort:C:\Home
  • Interessen:Computer, Feuerwehr, Sport

geschrieben 21. November 2011 - 08:12

Fehler gefunden!!! :imao:



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;
     if(IMAGE.style.width > IMAGE.style.height){
      for(i = 1;i <= PIXEL;i++) // Pixel für Pixel
    window.setTimeout(function() { IMAGE.style.width = IMAGE.offsetWidth + 3 + 'px'; IMAGE.style.height = IMAGE.offsetHeight + 2 + 'px'; IMAGE.style.left = 0 - ++n * 0.5 + 'px'; IMAGE.style.top = 0 - n * 0.5 + 'px'; }, i * 3);
     }
     else if (IMAGE.style.width < IMAGE.style.height){
      for(i = 1;i <= PIXEL;i++) // Pixel für Pixel
    window.setTimeout(function() { IMAGE.style.width = IMAGE.offsetWidth + 2 + 'px'; IMAGE.style.height = IMAGE.offsetHeight + 3 + 'px'; IMAGE.style.left = 0 - ++n * 0.5 + 'px'; IMAGE.style.top = 0 - n * 0.5 + 'px'; }, i * 3);                        
     }
     else{
      for(i = 1;i <= PIXEL;i++) // Pixel für Pixel
    window.setTimeout(function() { IMAGE.style.width = IMAGE.offsetWidth + 3 + 'px'; IMAGE.style.height = IMAGE.offsetHeight + 3 + 'px'; IMAGE.style.left = 0 - ++n * 0.5 + 'px'; IMAGE.style.top = 0 - n * 0.5 + 'px'; }, i * 3);                        
     }
   }
   
   function zoomOut(IMAGE)
   {
    n = 0;
     if(IMAGE.style.width > IMAGE.style.height){
      for(i = 1;i <= PIXEL;i++) // Pixel für Pixel
    window.setTimeout(function() { IMAGE.style.width = IMAGE.offsetWidth - 3 + 'px'; IMAGE.style.height = IMAGE.offsetHeight - 2 + 'px'; IMAGE.style.left = -PIXEL / 2 + ++n * 0.5 + 'px'; IMAGE.style.top = -PIXEL / 2 + n * 0.5 + 'px'; }, i * 4);                         
     }
     else if(IMAGE.style.width < IMAGE.style.height){
      for(i = 1;i <= PIXEL;i++) // Pixel für Pixel
    //window.setTimeout(function() { IMAGE.style.width = IMAGE.offsetWidth - 2 + 'px'; IMAGE.style.height = IMAGE.offsetHeight - 3 + 'px'; IMAGE.style.left = -PIXEL / 2 + ++n * 0.5 + 'px'; IMAGE.style.top = -PIXEL / 2 + n * 0.5 + 'px'; }, i * 4);                         
    window.setTimeout(function() { IMAGE.style.width = IMAGE.offsetWidth - 2 + 'px'; IMAGE.style.height = IMAGE.offsetHeight - 3 + 'px'; IMAGE.style.left = 0 + ++n * 0.5 + 'px'; IMAGE.style.top = 0 + n * 0.5 + 'px'; }, i * 4);
     }
     else{
      for(i = 1;i <= PIXEL;i++) // Pixel für Pixel
     window.setTimeout(function() { IMAGE.style.height = IMAGE.offsetWidth - 3 + 'px'; IMAGE.style.width = IMAGE.offsetHeight - 3 + 'px'; IMAGE.style.left = -PIXEL / 2 + ++n * 0.5 + 'px'; IMAGE.style.top = -PIXEL / 2 + n * 0.5 + 'px'; }, i * 4);                        
     }
   }
   getAllImages();
 }
 window.onload = function()
 {
  zoomImages(100);
 }
      


Du hattest bei else if stehen:

    window.setTimeout(function() { IMAGE.style.height = IMAGE.offsetWidth + 2 + 'px'; IMAGE.style.width = IMAGE.offsetHeight + 3 + 'px'; IMAGE.style.left = 0 - ++n * 0.5 + 'px'; IMAGE.style.top = 0 - n * 0.5 + 'px'; }, i * 3);                        
     }



es muss aber Image.style.height = IMAGE.offsetHeight sein :) Bei width natürlich auch.



Außerdem beim verkleinern der Hochformatigen Bilder:


else if(IMAGE.style.width > IMAGE.style.height){


naja passt bei Hochformat nicht so ganz.... einmal ein < eingesetzt und es läuft.

Achja bei offsetWidth und offsetHeight natürlich die Ziffern 2 + 3 vertauscht, damit er proportional vergrößert und verkleinert.



Ich hoffe ich habs einigermaßen verständlich erklären können :blush:

Dieser Beitrag wurde von J000S bearbeitet: 21. November 2011 - 09:23

0

Thema verteilen:


Seite 1 von 1

1 Besucher lesen dieses Thema
Mitglieder: 0, Gäste: 1, unsichtbare Mitglieder: 0