Ako vytvoriť rolovací obrázok v jazyku JavaScript (s obrázkami)

JavaScript je najpopulárnejší ľahký skriptovací jazyk, ktorý funguje v hlavných prehliadačoch, ako sú Internet Explorer, Chrome, Safari, Firefox a Opera. Pomocou tohto nástroja je možné ľahko vytvoriť dynamickú a interaktívnu webovú stránku. Jednou z jeho užitočných funkcií je prevrátenie obrázka, ktoré spočíva v zmene obrázka na iný obrázok, keď myš prejde nad pôvodný obrázok. Potom sa nový obrázok zmení späť na pôvodný, keď sa myš vzdiali. Tento článok vám ukáže, ako to urobiť krok za krokom; preto je potrebná znalosť základov HTML a JavaScriptu.

Príklad webovej stránky

Kroky


Pripravte si dva obrázky pre efekt prevrátenia.
Vyberte dva rôzne obrázky na vytvorenie rolovacieho obrázka a uložte ich do rovnakého priečinka, do ktorého uložíte súbor HTML zobrazujúci rolovací obrázok.


Otvorte ľubovoľný textový editor podľa vlastného výberu.
Ako textový editor sa v tomto článku použije Dreamweaver. V opačnom prípade, ak je váš textový editor po otvorení prázdny, musíte zadať prvky HTML na vytvorenie webovej stránky.


Nájdite <head></head> sekcia.
Kód JavaScriptu bude vložený do <head></head> tag. Na zmenu obrázkov sa vytvoria dve funkcie JavaScript. Dve funkcie majú názvy MouseRollover a MouseOut v nasledujúcom kóde. Vlastnosť src obrázka sa použije na zmenu zdroja obrázka, keď sa zavolajú tieto dve funkcie.

Skopírujte nasledujúci kód JavaScript:

<script language="javascript">
funkcia MouseRollover(MyImage) {
MyImage.src = "MyPicture2.jpg";
funkcia MouseOut(MyImage) {
MyImage.src = "MyPicture1.jpg";
</script>


Vložte kód JavaScript medzi <hlavička></head> časť na textový editor.
Stránka MyPicture2.jpg vo funkcii MouseRollover by mal byť nahradený názvom vášho rollover obrázka a MyPicture1.jpg vo funkcii s názvom MouseOut by mal byť nahradený názvom pôvodného obrázka.[1]


Nájdite <body></body> časť.
Značka obrázka <image src="FileName" Alt="Title" boarder="0px" width="650px" height="550px"/> bude použitá na zobrazenie rolovacieho obrázka.[2]
V tomto príklade Alt="Title" ktorý odkazuje na názov názvu snímky, je vynechaný.

Skopírujte nasledujúci kód:

<div align="center">
<!--Obrázok pri prevrátení sa zobrazí tu.-->
<img src="MyPicture1.jpg" border="0px"
width="650px" height="550px"
onMouseOver="MouseRollover(this)"
onMouseOut="MouseOut(this)" />
</div>


Vložte kód medzi <telo></body> časť.
Stránka onmouseover vlastnosť sa pridá do vyššie uvedenej značky obrázka a bude priradená na volanie funkcie JavaScript Prevrátenie obrázka zmeniť pôvodný obrázok na nový obrázok rollover. Nahradiť MyPicture1.jpg s názvom pôvodného obrázka. Okrem toho je potrebné pridať ďalšiu vlastnosť, tzv onMouseOut sa pridáva, aby sa obrázok zmenil späť na pôvodný, keď presuniete myš z rolovacieho obrázka. [3]


Prezrite si celý kód.
Váš kód by mal vyzerať podobne ako kód uvedený nižšie. Môžete si pohrať s kódom z tohto príkladu a zistiť, ako sa veci zmenia.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ako vytvoriť rolovací obrázok v jazyku JavaScript</title>
<!--Kód JavaScriptu je tu.-->
<script language="javascript">
funkcia MouseRollover(MyImage) {
MyImage".src = "MyPicture2.jpg";
funkcia MouseOut(MyImage) {
MyImage.src = "MyPicture1.jpg";
</script>
</head>
<body>
<div align="center">
<!--Rolovací obrázok sa zobrazí tu.-->
<img src="MyPicture1.jpg" boarder="0px" width="650px" height="550px"
onMouseOver="MouseRollover(this)"
onMouseOut="MouseOut(this)" />
</div>
</body>
</html>


Kliknite na položku „File“ (Súbor) a vyberte položku „Save.


Zadajte názov pre uloženie dokumentu HTML.
„index.html“ sa použije na testovanie súboru. Vyberte „Uložiť ako typ“ do dokumentov HTML.


Kliknite na tlačidlo „Uložiť“.


  • Náhľad hotovej webovej stránky v prehliadači.
    Kliknite na „Súbor“ a potom prejdite na „Náhľad v prehliadači.“ Kliknite na „Firefox“ alebo akýkoľvek webový prehliadač, ktorý je nainštalovaný v textovom editore.
  • Odkazy