CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

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??

Synes godt om

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.

Synes godt om

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();
}
}

Synes godt om

runberg Nybegynder

24. oktober 2007 - 14:53 #3

Ahh crap .. mig der er en torsk. Er rettet nu.

Synes godt om

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?

Synes godt om

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.

Synes godt om

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??

Synes godt om

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.

Synes godt om

soerenlyn Nybegynder

24. oktober 2007 - 15:17 #8

w13 -> Ja, det var også såden jeg troede den så ud da billedet ikke virkede :)

Synes godt om

w13 Novice

24. oktober 2007 - 15:30 #9

Ja, det var også min overbevisning, Hr. Lyn.

Synes godt om

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?

Synes godt om

w13 Novice

24. oktober 2007 - 15:42 #11

Jup. Så kan Sørens kode sagtens bruges/udbygges.

Synes godt om

runberg Nybegynder

24. oktober 2007 - 15:54 #12

Tror at det må blive løsningen så ;)

Synes godt om

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??

Synes godt om

w13 Novice

25. oktober 2007 - 01:30 #14

Bruger du slet ikke JavaScript?

Synes godt om

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 ...

Synes godt om

w13 Novice

25. oktober 2007 - 13:20 #16

Ok. Tak for point. =)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11
includere i HTML Af slein55 i HTML	3	15/09/202313:47	16/09/202309:40

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS