Sådan oprettes billedtransformationer med JavaScript

i en anden tutorial kiggede vi på, hvordan man bruger CSS background-image ejendom og :hover vælgeren til at oprette et interaktivt billede, der ændrede sig, da en bruger flyttede musen over billedet. I det eksempel startede vi med et gråt hjemmeikon og omdannede det til et orange ikon.

i denne vejledning ser vi på en anden måde at opnå det samme ved hjælp af JavaScript.

Hvornår skal du bruge CSS vs JavaScript

CSS er det sprog, der bruges til at definere hjemmeside layout og skabe simple animationer. JavaScript bruges til at tilføje interaktivitet baseret på brugernes feedback og aktivitet på hjemmesiden. Der er steder, hvor mulighederne for css og JavaScript overlapper hinanden. Denne overlapning rejser spørgsmålet: Hvilken skal du bruge? Svaret på dette spørgsmål er ikke enkelt, og mange meninger er blevet udtrykt om emnet. Nogle siger, at du skal bruge CSS i stort set alle tilfælde og kun bruge JavaScript, når intet andet værktøj kan gøre jobbet. Andre tilbyder et helt modsat argument om, at JavaScript skal erstatte CSS helt. I praksis bruger de fleste udviklere simpelthen det sprog, de er mest fortrolige med, selvom det ikke er det bedste valg til den aktuelle opgave. Vi kommer ikke til at veje ind på debatten. Vi vil lade dig beslutte dig selv om sagen og i stedet fokusere på at vise dig, hvordan du bruger både CSS og JavaScript. En tidligere tutorial demonstrerede allerede, hvordan man opnår denne overgang ved hjælp af CSS. Du kan se det her. Resten af denne tutorial vil lære dig, hvordan du bruger JavaScript til denne fælles opgave.

koden bag transformationen

her er JavaScript-og HTML-koden, der bruges til at oprette transformationen.

<a href="home_url" onmouseover="rollover('home')" onmouseout="rollout('home')"> <img src="../path/original_image.file" name="home" alt="Home Page"> </a> <script type="text/javascript"> <!-- setrollover("../path/hover_image.file"); --> </script> 

lad os tage disse stykker kode en ad gangen, så vi kan forstå, hvad der foregår.

Ankerelementet

den første kodelinje, vi ser, er et ankerelement.

<a href="home_url" onmouseover="rollover('home')" onmouseout="rollout('home')" > 

da vores eksempel involverer at linke et hjemmeikon til hjemmesiden, vil attributten href pege på vores hjemmeside. Næste kommer onmouseover JavaScript begivenhed. Dette er den begivenhed, der vil opstå, når musen svæver over ankerelementet. I dette tilfælde kaldes en funktion med navnet rollover og påvirker elementet med navnet ‘hjem’. Endelig har vi onmouseout – begivenheden, der kalder rollout – funktionen, som igen påvirker elementet med navnet ‘hjem’.

billedelementet

indlejret i ankerelementet er vores billedelement.

<img src="../path/original_image.file" name="home" alt="Home Page"> 

vi bruger billedelementet til at indlæse det billede, der vises, når musen ikke svæver over ankerelementet. I tilfælde af vores eksempel indlæser vi det grå husikon. Næste kommer attributten name. Vi bruger denne attribut til at give JavaScript væk for at identificere det HTML-element, som vi vil ændre med scriptet. Se hurtigt tilbage på ankerelementet og læg mærke til, hvordan begge funktioner bruger parameteren ('home'). Attributten name="home" er, hvordan JavaScript-funktionerne identificerer billedelementet som det element, der skal handles på.

scriptet

endelig har vi et meget kort script.

<script type="text/javascript"> <!-- setrollover("../path/hover_image.file"); --> </script> 

dette script angiver en værdi for funktionen rollover, som kaldes af den onmouseover, der udløses, når en seers mus svæver over billedet.

sætte det hele sammen

hvis vi sætter anker, billede og script alle sammen her er hvad vi får.

forenkle koden med jforespørgsel

jforespørgsel er et JavaScript-bibliotek, der giver dig mulighed for at oprette næsten enhver form for JavaScript-animation eller transformation med mindre kode. Hvis vi ønskede at bruge JKR til at skabe den samme transformation, her er hvad koden ville se ud.

<a href="home_url"> <img src="../path/original_image.file" alt="Home Page"> </a> <script> jQuery.('#home').hover( function(){ $(this).attr( 'src' , 'hover-image.file' ) }, function(){ $(this).attr( 'src' , 'original-image.file' ) } ); </script> 

det gode ved at bruge jfor er, at vi ikke længere behøver at tilføje begivenhedshåndterere til selve HTML ‘ en (husk onmouseover og onmouseout begivenhederne fra den originale kode?). En af de bedste ting ved er, at det kan tilføje event handlere dynamisk. Dette giver mulighed for større adskillelse mellem scriptet og HTML-indholdet og er en bedre måde at kode på. Som du kan se, er HTML meget renere, hvis vi bruger biblioteket, og slutresultatet er det samme.

spørgsmål.(‘#hjem’).hover (funktion () {$(dette).attr (‘src’, ‘ home168-1.png’) }, funktion () { $(dette).attr (‘src’, ‘ orange_home.png’ ) } );

en ting at huske på, hvis du beslutter dig for at bruge denne kode på din egen hjemmeside, er at biblioteket skal indlæses på hver side, hvor et script bruges. JavaScript understøttes af alle moderne bro.ser. Det er vigtigt, at du er sikker på, at du kan få adgang til alle de oplysninger, du har brug for. Der er to måder at tilføje jfr til en hjemmeside.

1. Hent jfr fra jfr Foundation og upload det til din internetserver.
2. Link til et offentligt hostet bibliotek.

den nemmeste måde at tilføje en hjemmeside på er at linke til et bibliotek, der allerede er hostet på nettet. Du kan indlæse Google-biblioteket ved at indsætte følgende kodelinje i head – elementet på din hjemmeside.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 

Jon er freelance skribent, rejseentusiast, mand og far. Han skriver om internetteknologier som f.eks.