Kuidas JavaScripti kujutist ümber pöörata

JavaScript on kõige populaarsem kerge skriptikeel, mis töötab suuremates brauserites, nagu Internet Explorer, Chrome, Safari, Firefox ja Opera. Seda on lihtne kasutada ka dünaamilise ja interaktiivse veebisaidi loomiseks. Üks selle kasulikke funktsioone on pildi ümberminek, mis muudab pildi teiseks pildiks, kui hiir liigub algse pildi kohal. Seejärel muutub uus pilt hiire eemaldumisel tagasi algseks. See artikkel näitab teile, kuidas seda samm-sammult teha; seetõttu on vaja osata põhilist HTML-i ja JavaScripti.

1
Valmistage ümbermineku efekti jaoks ette kaks pilti. Valige ümberlülituspildi tegemiseks kaks erinevat pilti ja salvestage need samasse kausta, kuhu salvestate oma HTML-faili, kus kuvatakse üleminek.

2
Avage mis tahes valitud tekstiredaktor. Dreamweaverit kasutatakse selles artiklis tekstiredaktorina. Vastasel juhul, kui teie tekstiredaktor on selle avamisel tühi, peate veebilehe koostamiseks sisestama HTML-i elemendid.

3
Otsige üles jaotis. JavaScripti kood sisestatakse märgendisse. Piltide muutmiseks luuakse kaks JavaScripti funktsiooni. Need kaks funktsiooni on allolevas koodis nimed MouseRollover ja MouseOut. Kujutise src atribuuti kasutatakse pildi allika muutmiseks, kui need kaks funktsiooni kutsutakse.

4
Kopeerige järgmine JavaScripti kood:

5
Kleepige JavaScripti kood jaotise vahele oma tekstiredaktorisse. Funktsiooni MouseRollover fail MyPicture2.jpg tuleks asendada teie ümberlülituspildi nimega ja MyPicture1.jpg funktsioonis MouseOut tuleks asendada teie algse pildi nimega.

6
Otsige üles jaotis. Üleminekupildi kuvamiseks rakendatakse pildimärgendit . Selles näites on Alt=â€Titleâ€, mis viitab pildi pealkirja nimele, välja jäetud.

7
Kopeerige järgmine kood:

8
Kleepige kood jaotise vahele. Atribuut onmouseover lisatakse ülalolevasse pildimärgendisse ja see määratakse JavaScripti funktsiooni Image Rollover kutsumiseks, et muuta teie algne pilt uueks ümberlülituspildiks. Asendage MyPicture1.jpg oma algse pildi nimega. Lisaks lisatakse veel üks omadus nimega onMouseOut, et muuta pilt tagasi algseks, kui liigutate hiirt ümberminekupildist eemale.

9
Vaadake kogu kood üle. Teie kood peaks välja nägema sarnane allolevale koodile. Saate selle näite koodiga mängida ja vaadata, kuidas asjad muutuvad. function MouseRollover(MyImage) { MyImage.src = “MinuPilt2.jpg”; } function MouseOut(MyImage) { MyImage.src = “MinuPilt1.jpg”; }

10
Klõpsake “Fail” ja valige “Salvesta”.

11
Sisestage oma HTML-dokumendi salvestamiseks nimi. Faili testimiseks kasutatakse “index.html—. Valige HTML-dokumentidesse “Salvesta tüübina”.

12
Klõpsake nuppu “Salvesta”.

13
Valmis veebilehe eelvaade brauseris. Klõpsake “Fail” ja seejärel “Eelvaade brauseris”. Klõpsake “Firefox” või mis tahes teie tekstiredaktorisse installitud veebibrauserit.