Starte og stoppe animerte gif bilder?

AlecTBM · 22. juni 2006

Har skrevet det samme på php forumet, men ble rådet hit.

Hei. Jeg har en webside der jeg selger animerte bilder til forskjelige folk på Nordicmafia, der har jeg også noen ekempler på bilder. Bare det at siden med bildene går veldig sakte fordi alle bildene går samtidig. Har noen en kode som kan stoppe et gif bilde slik at bare den første framesen vises, men når musa er over så starter den igjen. Har prøvd css, men den krevde at jeg hadde fysisk det første bildet som lå over animasjonen. det hjalp lite siden animasjone gikk fremdeles bak det statiske bildet og siden var enda treg.

Takker for alle svar altvitende folk:D

Endret 22. juni 2006 av AlecTBM

Kagee · 22. juni 2006

Når siden lastes vises det statiske bildet og ani-gif'ene lastes i bakgrunnen (men de vises/kjøres ikke)

Når brukeren klikker på bildet byttes src og animasjonen vises i stedet for.

Ved et nytt klikk skiftes det tilbake.

<script type="text/javscript">

     image_url = new Array();
     image_url[0] = "http://mydomain.com/animated/image_1.gif";
     image_url[1] = "http://mydomain.com/animated/image_2.gif";
     image_url[2] = "http://mydomain.com/animated/image_3.gif";
     image_url[3] = "http://mydomain.com/animated/image_4.gif";

function preload(img_url) {
   if (document.images)
   {
     preload_image_object = new Image();
     for ( var i = 0; i < img_url.length; i++ ) 
        preload_image_object.src = img_url[i];
   }
}

function swap(static, animated, t) {
   if (t.src == static) {
       t.src = animated;
   } else {
       t.src = static;
   }
}
</script>

<body onload="preload(image_url);">

<img src="static/non_static_1.gif" id="animasjon1" onclick="swap('static/image_1.gif','animated/image_1.gif', this)" />

Edit: Jeg har ikke testet dette selv, men siden koden er så enkel regner jeg med at det vil funke.

Endret 2. juli 2006 av Kagee

AlecTBM · 27. juni 2006

Takkar, skal prøve det når jeg kommer hjem fra ferie

AlecTBM · 29. juni 2006

Den funka ikke den.

Fikk opp en feil melding om at det var en feil i body tagen og i selve img tagen.

Hva betyr den ID atributen?

Drømmemannen · 30. juni 2006

Den funka ikke den.
Fikk opp en feil melding om at det var en feil i body tagen og i selve img tagen.

Hva betyr den ID atributen?

6407321[/snapback]

Ser ut som om det er en liten '/" feil i begynnelsen av img-taggen.

<img src='static/non_static_1.gif" ...>

burder vært

<img src="static/non_static_1.gif" ...>

AlecTBM · 30. juni 2006

Den har jeg fiksa for leng sia. Men jeg trur det er noe anna som e galt.

Men ka e den ID atributen til?

Dessuten så står det ulr noen steder

Mvh AlecTBM

Drømmemannen · 1. juli 2006

Den har jeg fiksa for leng sia. Men jeg trur det er noe anna som e galt.
Men ka e den ID atributen til?

Dessuten så står det ulr noen steder

Mvh AlecTBM

6415622[/snapback]

Id-attributtet har ingen funksjon i dette tilfellet og kan fjernes.

Det at det står ulr spiller ingen rolle siden det bare er en vanlig variabel. Så lenge man bruker samme navn hele tiden kan variabelen hete hva som helst.

Ser ut som om det manger et likhetstegn i if-testen i swap-funksjonen, men det har du kanskje også allerede fikset?

Edit: Static er forresten er reservert ord i ECMAScript v3 og bør byttes ut med et annet passende variabelnavn.

Endret 1. juli 2006 av balletryne

Kagee · 1. juli 2006

Har oppdatert koden min - burde funke nå.

Her legger du inn dine egne bilder - du forsto det?

image_url[0] = "http://mydomain.com/animated/image_1.gif";

Og disse må tilpasses så de passer din filstruktur/filer:

<img src="static/non_static_1.gif" id="animasjon1" onclick="swap('static/image_1.gif','animated/image_1.gif', this)" />

AlecTBM · 1. juli 2006

greit det men det er flere feil som jeg har funnet, men jeg er usikker på om det er feil.

Bla. url noen steder og ulr andre steder. Dessuten så er det en feil med preload koden i body. Skal jeg gjøre ulr til url??

Drømmemannen · 1. juli 2006

greit det men det er flere feil som jeg har funnet, men jeg er usikker på om det er feil.

Bla. url noen steder og ulr andre steder. Dessuten så er det en feil med preload koden i body. Skal jeg gjøre ulr til url??

6416765[/snapback]

Så lenge det er likt over alt spiller det ingen rolle om variabelen heter url eller ulr.

Kagee: Du hoppet over den ene ulr-en.

AlecTBM · 3. juli 2006

Jeg får det ikke til å funke.

Er det noen som vet hva som er feil og kan poste den riktige eller en annen som funker?

Drømmemannen · 3. juli 2006

Kan du forklare hva som (ikke) skjer i forhold til hva som burde skje og eventuell feilmeldinger? Evt. poste din egen kode?

Edit: Fant en detalj som gjorde at det ikke funka hos meg: Det mangler en 'a' i type="text/javascript" i script-elementet.

Hvis det fortsatt ikke funker kan du jo prøve dette, som egentlig bare er en omskrivning av Kagees forslag:

<script type="text/javascript">

   var staticImg1 = new Image(); staticImg1.src = "img/static1.gif";
   var staticImg2 = new Image(); staticImg2.src = "img/static2.gif";
   var staticImg3 = new Image(); staticImg3.src = "img/static3.gif";
   var staticImg4 = new Image(); staticImg4.src = "img/static4.gif";

   var animatedImg1 = new Image(); animatedImg1.src = "img/animated1.gif";
   var animatedImg2 = new Image(); animatedImg2.src = "img/animated2.gif";
   var animatedImg3 = new Image(); animatedImg3.src = "img/animated3.gif";
   var animatedImg4 = new Image(); animatedImg4.src = "img/animated4.gif";

   function swap( staticImg, animatedImg, tag )
   {
       if ( tag.src == staticImg.src )
       {
           tag.src = animatedImg.src;
       }
       else
       {
           tag.src = staticImg.src;
       }
   }

</script>

------------------

<img src="img/static1.gif" onclick="swap( staticImg1, animatedImg1, this )">
<img src="img/static2.gif" onclick="swap( staticImg2, animatedImg2, this )">
<img src="img/static3.gif" onclick="swap( staticImg3, animatedImg3, this )">
<img src="img/static4.gif" onclick="swap( staticImg4, animatedImg4, this )">

Endret 3. juli 2006 av balletryne

AlecTBM · 6. juli 2006

Jeg har ikke prøvd den siste koden enda, men jeg spurte egentlig om en kode som tok det første bilde i en gif animasjon.

Skal prøve den koden nå.

Drømmemannen · 6. juli 2006

Du baserer deg på PHP, ikke sant? Ta en titt på denne kommentaren i PHP-dokumentasjonen:

I created a small php script (around 25KB) which lets you load a GIF from a file (you even can specify the image index on animated GIFs) and then convert it to a PNG or BMP file.

Link: http://us2.php.net/manual/en/function.imag...omgif.php#29433

Endret 6. juli 2006 av balletryne

AlecTBM · 6. juli 2006

Kan du forklare hva som (ikke) skjer i forhold til hva som burde skje og eventuell feilmeldinger? Evt. poste din egen kode?

Edit: Fant en detalj som gjorde at det ikke funka hos meg: Det mangler en 'a' i type="text/javascript" i script-elementet.

Hvis det fortsatt ikke funker kan du jo prøve dette, som egentlig bare er en omskrivning av Kagees forslag:

Skjult tekst: (Marker innholdet i feltet for å se teksten):

<script type="text/javascript">

   var staticImg1 = new Image(); staticImg1.src = "img/static1.gif";
   var staticImg2 = new Image(); staticImg2.src = "img/static2.gif";
   var staticImg3 = new Image(); staticImg3.src = "img/static3.gif";
   var staticImg4 = new Image(); staticImg4.src = "img/static4.gif";

   var animatedImg1 = new Image(); animatedImg1.src = "img/animated1.gif";
   var animatedImg2 = new Image(); animatedImg2.src = "img/animated2.gif";
   var animatedImg3 = new Image(); animatedImg3.src = "img/animated3.gif";
   var animatedImg4 = new Image(); animatedImg4.src = "img/animated4.gif";

   function swap( staticImg, animatedImg, tag )
   {
       if ( tag.src == staticImg.src )
       {
           tag.src = animatedImg.src;
       }
       else
       {
           tag.src = staticImg.src;
       }
   }

</script>

------------------

<img src="img/static1.gif" onclick="swap( staticImg1, animatedImg1, this )">
<img src="img/static2.gif" onclick="swap( staticImg2, animatedImg2, this )">
<img src="img/static3.gif" onclick="swap( staticImg3, animatedImg3, this )">
<img src="img/static4.gif" onclick="swap( staticImg4, animatedImg4, this )">

6426727[/snapback]

Denne funka helt fint.

Og jeg har funnet ut at jeg ikke trengte den første framen i animasjonen.

Men jeg kommer med en annen ting istedet, hehe.

Du skjønner det at jeg har et statisk bilde som det står en forklaring på.

Den er på 100x100 px.

Dette bildet er det statiske bilde i koden over.

Det jeg vill ha er at det bilde har kanter med en rød (#FF0000) fyllfarge som fyller de stedene der de trengs. Altså som jeg har det nå blir det et firkanta bilde, men når man holder musa over bildet (gjorde om litt på koden ) så endres størrelsen. jeg vil at det statiske bildet skal ha samme størrelse som det animerte, men selve bildet som er statisk skal ikke forvrenges, det skal legges ut i kantene der det trengs.

Takker for alle svar.

Drømmemannen · 7. juli 2006

Da må du vel sette det statiske bildet som et ikke-repetert og senterert bakgrunnsbilde og med rød bakgrunnsfarge. Dette må vel også kanskje gjøres på en div som ligger under det animerte bildet, slik at du bare trenger å skjule og vise det animerte bildet?

Edit: Følgende ser ut til å funke:

- CSS ----------------------------------------------

.animation
{
   background-color: red;
   background-image: url( img/static.gif );
   background-repeat: no-repeat;
   background-position: center center;
}

.animation img
{
   display: none;
}

- JavaScript ----------------------------------------

var targetClassName = 'animation';

function attachShowHideEvents()
{
   var divs = document.getElementsByTagName( 'div' );

   for( var i = 0; i < divs.length; ++i )
   {
       if ( divs[i].className == targetClassName )
       {
           divs[i].onmouseover = function()
           {
               var imgs = this.getElementsByTagName( 'img' );

               if ( imgs[0] )
               {
                   imgs[0].style.display = 'block';
               }
           }

           var imgs = divs[i].getElementsByTagName( 'img' );

           if ( imgs[0] )
           {
               imgs[0].onmouseout = function()
               {
                   this.style.display = 'none';
               }
           }
       }
   }
}

window.onload = attachShowHideEvents;

- HTML --------------------------------------------

<div class="animation" style="width:150px; height:150px">
 <img src="img/animated1.gif" width="150" height="150">
</div>

<div class="animation" style="width:200px; height:150px">
 <img src="img/animated2.gif" width="200" height="150">
</div>

<div class="animation" style="width:200px; height:200px">
 <img src="img/animated3.gif" width="200" height="200">
</div>

Litt forklaring:

1) Hver div har class="animation" og er satt til å ha samme størrelse som det animerte bildet det inneholder.

2) CSS-en setter bakgrunnsfarge og bakgrunnsbildet på div-ene samt skjuler de animerte bildene.

3) JavaScriptet er generisk og setter tilhørende events og funksjonalitet på div-ene og de animerte bildene.

Endret 7. juli 2006 av balletryne

AlecTBM · 7. juli 2006

- CSS ----------------------------------------------

.animation
{
   background-color: red;
   background-image: url( img/static.gif );
   background-repeat: no-repeat;
   background-position: center center;
}

.animation img
{
   display: none;
}

6448897[/snapback]

Forstår ikke den siste koden der. Kan du forklar den litt nærmere??

Kan den javascript koden bakes inn i den andre?

Drømmemannen · 7. juli 2006

Koden jeg skrev i forrige innlegg er ment å erstatte de andre forslagene helt.

Den siste CSS-snutten skjuler alle bilder (tag: img) som ligger innenfor elementer med class="animation".

Men jeg er litt spent på om display:none er nok til å stoppe nettleseren fra å loope de animerte gif-ene...

Endret 7. juli 2006 av balletryne

AlecTBM · 7. juli 2006

men ligger ikke animasjonen under bildet og går hele tida da?

Drømmemannen · 7. juli 2006

Følgende endringer gjør at de animerte bildene blir byttet ut hver gang i steden for å bli skjult:

Lag et gjennomsiktig bilde, f.eks. transparent.gif.

Bytt ut CSS-en over med følgende (bare fjernet .animation img {...}):

.animation
{
   background-color: red;
   background-image: url( img/static1.gif );
   background-repeat: no-repeat;
   background-position: center center;
}

Bytt ut JavaScriptet over med:

var targetClassName = 'animation';
var transparentImageSrc = 'img/transparent.gif';

function attachShowHideEvents()
{
   var divs = document.getElementsByTagName( 'div' );

   for( var i = 0; i < divs.length; ++i )
   {
       if ( divs[i].className == targetClassName )
       {
           var imgs = divs[i].getElementsByTagName( 'img' );

           if ( imgs[0] )
           {
               imgs[0].onmouseover = new Function( "this.src = '" + imgs[0].src + "';" );

               imgs[0].onmouseout = function()
               {
                   this.src = transparentImageSrc;
               }

               imgs[0].src = transparentImageSrc;
           }
       }
   }
}

window.onload = attachShowHideEvents;

HTML-en skal være den samme.

Endret 7. juli 2006 av balletryne

Starte og stoppe animerte gif bilder?

Anbefalte innlegg

Lenke til kommentar

Videoannonse

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Hvem er aktive 0 medlemmer