Javascript

OPGAVER TIL HTML & CSS – JS – MAGNIFYING GLASS

Opgave 7

Opgave 7 – Del 1

Først skal vi igennem disse trin

Lav en ny pen i codepen.io
Gå op i HTML boksen og skriv dette ind:

< div class=”img-magnifier-container” >

< img id=”myimage” src=” ” width=”768″ height=”400″ >

< /div >

Find et billede på Pixabay og sæt linket ind mellem ” ” ved src

Opgave 7 – Del 2

Vi går nu ned i CSS’en og styler vores billede container og glasset.

.img-magnifier-container {
position: relative;
}
.img-magnifier-glass {
position: absolute;
border: 3px solid #000;
border-radius: 50%;
cursor: none;
/*Set the size of the magnifier glass:*/
width: 100px;
height: 100px;
}

Opgave 7 – Del 3

Nu starter vi på at kode i JS delen. Vi starter med at lave den store funktion, som indeholder to andre funktioner. Start med at skrive dette

function magnify(imgID, zoom) {

}
/* Initierer forstørrelses funktionen med id’en for billedet, og bestemmer styrken på forstørrelsesglasset*/
magnify(“myimage”, 3);

Når du har skrevet dette ind, så stil dig på den tomme linje efter { og skriv nu del 4 ind her.

Hvis du skriver hele koden ind, med alle kommentarer og en tom linje før begge inder funktioner, vil du have 58 linjer kode.

Opgave 7 – Del 4

Nu skal vi i gang med vores magnify function. Følg koden på billedet, start fra linje 2.

Vi starter med at definere vores variabler og style hvordan det skal se ud. Dette kan vi ikke gøre i CSS’en, da vi skal tilføje positioner og funktioner til stylingen.

Opgave 7 – Del 5

Vi hopper videre til første af 2 funktioner inde i magnify functionen:

Vi skal nu lave funktionen der flytter på forstørrelsesglasset og samtidig zoomer ind på det den ser.

Opgave 7 – Del 6

Vi rykker videre til sidste funktion inde i magnify funktionen.

Husk at du har en } som vil være på efter dette er skrevet, så du slutter med 2 } til sidst, en på linje 55 og en på linje 56.