Avatar billede runberg Nybegynder
24. oktober 2007 - 14:45 Der er 15 kommentarer og
1 løsning

Hjælp til at få en snegl til at gå forbi teksten på hjemmeside

Hej alle

Okay - indrømmet. Dette er et underligt spørgsmål, men jeg prøver alligevel.

Jeg vil gerne på en hjemmeside, hvor der er en overskrift, have et "gif"-ting, med en snegl, der går forbi. Sneglen skal altså gå hele vejen hen forbi teksten.

Jeg har fundet en GIF-fil, som måske kan bruges, men kan dels ikke få den lagt ind over min overskrift, og dels kan jeg ikke få sneglen til at fortsætte sin gang hele vejen hen over siden, og over overskriften.

Se evt.: http://www.runberg.dk/snail.htm

Nogle der kan hjælpe??
Avatar billede w13 Novice
24. oktober 2007 - 14:49 #1
Jeg kan se, billedet har en adresse på din computer. Så jeg kan ikke se det. :) Det kan kun du, da jeg ikke har adgang til billedet på din computer.

Læg det ud på din server, ret stien og prøv igen.

Billedet skal have noget css-style:

<img style="position:absolute;top:0;left:0;" ...

Så ligger det over alt andet. Javascripten kan vi se på, når du har fået billedet lagt ud.

Se evt. din hjemmeside på en anden computer, så vil du se, hvad jeg mener.
Avatar billede soerenlyn Nybegynder
24. oktober 2007 - 14:49 #2
Du skal angive billedets koordinater med css, style="position:absolute;top=0;left:0;", hvis billedet fx skal starte helt oppe i hjørnet.
Så laver du en javascript-funktione der rykker den:

var img=document.getElementById("idtilsnegl");
var slutplacering=100;
function Move(){
  if(img.style.left!=slutplacering){
    img.style.left+=img.style.left;
    Move();
  }
}
Avatar billede runberg Nybegynder
24. oktober 2007 - 14:53 #3
Ahh crap .. mig der er en torsk. Er rettet nu.
Avatar billede runberg Nybegynder
24. oktober 2007 - 14:54 #4
soerenlyn>> Men hvordan får jeg det så timet således at det ser ud som om at sneglen fortsætter sing gang?
Avatar billede soerenlyn Nybegynder
24. oktober 2007 - 14:56 #5
INde i funktionen kalder den sig selv. Hvis du vil time det kan du erstarte
  Move();
med
  setTimeout("Move()",1000);
hvor 1000 svarer til 1 sekund.
Avatar billede runberg Nybegynder
24. oktober 2007 - 15:13 #6
Hvis du kigger på den gif jeg har nu, så bevæger den sig fra højre mod venstre, og skal jo have det lavet sådan at det virker som en glidende overgang fra billede til billede. Det betyder at der i princippet skal være 2 billeder aktive samtidig, dog startet forskudt ....

Hmm ... Tror det bliver noget rod. Måske det er nemmere blot at lave en ny lang gif animation, hvor jeg klipper fra den nuværrende, og så efterfølgende sætter den ind over??
Avatar billede w13 Novice
24. oktober 2007 - 15:15 #7
Det ville nok være endnu lettere, hvis sneglen ikke bevægede sig, men bare var animeret til at kravle på stedet. Så kunne den flyttes med Javascript.
Avatar billede soerenlyn Nybegynder
24. oktober 2007 - 15:17 #8
w13 -> Ja, det var også såden jeg troede den så ud da billedet ikke virkede :)
Avatar billede w13 Novice
24. oktober 2007 - 15:30 #9
Ja, det var også min overbevisning, Hr. Lyn.
Avatar billede runberg Nybegynder
24. oktober 2007 - 15:33 #10
Men hvis jeg nu korter den gif jeg har nu ned til kun at bevæge sig på stedet, så kan det vel "nemt" løses - Right?
Avatar billede w13 Novice
24. oktober 2007 - 15:42 #11
Jup. Så kan Sørens kode sagtens bruges/udbygges.
Avatar billede runberg Nybegynder
24. oktober 2007 - 15:54 #12
Tror at det må blive løsningen så ;)
Avatar billede runberg Nybegynder
24. oktober 2007 - 16:30 #13
Og dog .. Fandt et program hvor det var nemt at redigere GIF'en
(http://www.freewindows.dk/fw/modules/mydownloads/viewcat.php?cid=55)

Herefter var det nemt bare at sætte en posistion på billedet. Tak til alle der har bidraget!!

w13>> Du var først med den kode jeg endte med at bruge, så smider du et svar??
Avatar billede w13 Novice
25. oktober 2007 - 01:30 #14
Bruger du slet ikke JavaScript?
Avatar billede runberg Nybegynder
25. oktober 2007 - 09:34 #15
Nope ... Valgte den (i mine øjne) lette løsning blot at lave GIF-billedet længere, og så så bare i midten gentage de billeder, hvor sneglen "går". På den måde fik jeg en lang gif-animation, hvor sneglen går fra den ene side af skærmen til den anden.

Herefter var det blot at placere gif'en hen over teksten ...
Avatar billede w13 Novice
25. oktober 2007 - 13:20 #16
Ok. Tak for point. =)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester