Hej
Jag har en bild som är inställd med en bredd på 3px. Jag vill låta animera bredden till 30 pixlar.
Använder man setTimeout() då eller?
Kan nån hjälpa mig med kodsnutten?
Tack :OO
Animera bredden på en bild med setTimeout?
14 svar · 324 visningar · startad av haider
<img src="http://www.webforum.nu/images/wfstandard/logo_webforum.gif" width="3" height="58" name="mypic" alt="..."/>
<script type="text/javascript">
var bredd=281;
function bredare(){
document.images['mypic'].width+=5;
if(document.images['mypic'].width<bredd){ setTimeout("bredare()",50); } else { document.images['mypic'].width=bredd; }
}
bredare();
</script>
...kanske.
För att det ska vara helt korrekt skall bredare() läggas i window.onload:
window.onload=function(){
bredare();
}
... eller ...
<body onload="annat(); bredare();" >
Menar du, att man inte ska skriva bredare(); i slutet av skriptet, och istället anropa det från ex. body?
Det Nitro menar är att för att vara säker på att bilden finns vid det tillfälle då scriptet exekveras bör man lägga det i ett event (vilken av varianterna spelar ingen roll). Detta gäller oavsett vad det är för script. Men både ny och gammal objektmodell i såväl Mozilla (Netscape), IE och Opera ger dig access till objektet så fort det är skapat. Exemplet funkar alltså som det är, om du däremot byter plats på script och bild kommer det inte att fungera eftersom bilden inte finns när scriptet körs.
Se sidan som en bok du läser. Du kan bara refferera till saker som du redan läst. Vad som kommer att hända på nästa sida vet du inte än - på samma sätt kan webbläsaren inte veta vad som kommer att komma senare i koden utan bara komma åt sådant som den redan "läst".
Min punkt är att man alltid ska göra det till en vana att lägga skript som kallar på ett DHTML-objekt i onload så att man är säker på att de är laddade. (Vissa nybörjare, inklusive jag en gång i tiden, förstår inte skillnaden mellan att placera koden föra eller efter en bild.)
En annan variant på Jojoxx:s script är att köra onload på <img> taggen, då kan man skicka med bildens namn o slutbredd till funktionen + att man kan använda funtionen på andra bilder.
<img src="http://www.webforum.nu/images/wfstandard/logo_webforum.gif" width="3" height="58" name="mypic" onload="bredare(this.name, 281)" alt="..."/>
<script type="text/javascript">
function bredare(name, bredd)
{
document.images[name].width+=5;
if(document.images[name].width<bredd) window.setTimeout("bredare(\"" + name + "\", " + bredd + ")",50);
else document.images[name].width=bredd;
}
</script>
Att använda onload i img-taggen är inte standard och funkar då antaligen inte så bra i andra webbläsare än Internet Explorer.
http://www.devguru.com/Technologies/html/quickref/html_img.html
Så vitt jag vet funkar det i Opera, Netscape (även version 3 & 4), IE, Mozilla och andra.
Att något inte är del av standarden betyder inte att man kan använda det eller att browsers inte implementerat det. Tex så har nya browsers stöd för innerHTML, scrollTop/Height, clientWidth etc...
Skall det inte var +'px' för att det skall vara crossbrowser?
Nej, scriptet sätter inte en css width (sträng), utan bildens width property som är en number.
Tack alla.
Nitro: Jo, detta nybörjarproblem som du nämner stöter jag på hela tiden. Troligen kommer jag att vara nybörjare resten av livet :-/
Hur som helst, så resulterar fel oftast felmeddelanden, då brukar jag ta till alert() för att få visuell feedback, för att se hur skript reagerar på olika ställen. Jag vet, det är mycket
nybörjaraktigt, men så är jag ju en extrem nybörjare.
Pepe: Tack för ditt inlägg. Även om jag använder jojoxx enkla bredare(), så sparar jag på din, eftersom den känns "renare" med möjligheten till att styra namn o bredd bredare(name,bredd)
För alla andra som är nyfikna på resultatet, så kan ni se det här: https://www.3d.stenebyskolan.se/haider/test/imgloader.htm
Själva slutresultatet är inte färdigt än, jag kommer att skapa en tråd senare om hur man kan köra slideit(), så att man har nr + bild i parantesen; slideit(nr,namn), så att jag via olika länkar kan
ersätta den befintliga slideshow med någon annan.
Dessutom kommer denna kod att bakas samman med ett annat ärende som finns att läsa på tråden:
http://www.webforum.nu/showthread.php?s=&threadid=90120&forumid=24
En sista sak: Om ni besöker sidan med image-loader-slideshowen, så kommer ni att notera att "bredaren", dvs funktionen för den lilla gråa slidern, inte är rätt timad. Kan man göra nåt åt det, eller
är timer-grejer ostabila?
Och har ni nån anmärkning, tillägg eller tips, så säg gärna till. :e
En anmärkning är att onload för img-taggar fortfarande inte är standard, och troligen inte funkar så bra crossbrowser.
En annan sak är att om du är nöjd med de svar du fått bör du välja ett svar och klicka "Acceptera som slutgiltigt svar"!
Eh, nitro2k01, angående din anmärkning om onload på img-taggen. Se ovan.