OPGAVER TIL HTML & CSS – JS – SLIDING IMAGE
Opgave 7
Univers
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Opgave 7 – Del 1
- Lav en ny pen i codepen.io
- Gå op i HTML boksen og skriv dette ind:
Opgaven er sat op så man kan vælge at tilføje flere forskellige bokse.
Opgave 7 – Del 2
Nu skal vi ned i CSS’en. Her skal vi beskrive sidens(body) opsætning, porportion1, position1Slide og position1.
Opgave 7 – Del 3
Vi bliver i CSS boksen og skriver nu klasserne for firkanten og rammen – sq1 og bg1Border
Opgave 7 – Del 4
Vi bliver i vores CSS boks og skriver nu klasserne ind for baggrundsfarven i boksen. Grunden til at det er delt op i 2 er, hvis man ønsker at tilføje flere bokse. Så kan man ændre udseende på id og have en længere generel klasse for alle.
Opgave 7 – Del 5
Vi bliver i CSS boksen stadig. For nu skal vi lave klasserne for teksten og noget af billedet.
Opgave 7 – Del 6
Vi hopper videre til vore JS boks og går nu i gang med den første function. Dette vil først virke i del 8.
Opgave 7 – Del 7
Nu skal vi også sørge for at billedet kommer tilbage når vi klikker på tekstboksen. Dette vil først virke i del 8.
Opgave 6 – Del 8
Nu skal sørge for at når man klikker på billedet så flyttes der på billedet.
Her under er koden eksekveret uden JS linket.
Univers
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.