Jak změnit obrázek na Mouse Přesunout

March 14 by admin

Jak změnit obrázek na Mouse Přesunout


Změna obrazu na převrácení myši je populární způsob, jak přidat interaktivitu na webovou stránku. Web designéři změnit obrázek na překlopení, aby byl obraz se pohybují, jako je například tlačítka střídání, až se objeví stisku, kdy se ukazatel myši pohybuje nad ním. Další využití tohoto postupu zahrnují zábavu, jako když kočka je obraz psa nebo panenka obrazu se změní na vlkodlaka a vzdělávání, například když odpověď na otázku skrývá pod jiným obrázkem. Rollovery vyžadují 2 JavaScript zpracování událostí a 2 nebo více obrazů na funkčnost změna image pracovat správně.

Instrukce

1

Vyberte si 2 obrázky použít pro převrácení. Pro profesionální funkce, snímky by měly mít stejné rozměry. Pro účely zábavy, rozměry obrázků závisí na požadovaném výsledku hry. Poznámka jejich názvy souborů. Název 2 obrázky "img_1.jpg" a "img_2.jpg" pro účely tohoto cvičení. Uložit obrázky do stejného adresáře, kde je umístěn dokument HTML.

2

Otevřete HTML dokument v textovém editoru, jako je například Poznámkový blok nebo TextEdit. Kód pro převrácení myši vyžaduje 2 JavaScript obslužné rutiny událostí, které se přidávají na stránku. Jedním z nich je onmouseover, který zachycuje pohyb myši, jak to prochází obrazu. Na druhé straně je onmouseout, který detekuje, když se myš se vzdálil z obrázku.

3

Construct značku HTML obrazu. Vypadá to takhle:

<Img width = "143" height = "39" border = "0"

alt = "přesuňte kurzor myši na mě," id = "button_but" />

"Src" atribut přináší první snímek na stránku. Ostatní atributy jsou volitelné: šířka a výška prohlásit rozměry obrázku. "Border" umístí ohraničení kolem obrazu. To může být pixelů na hranici. Nechte to na 0, když se žádné hranice chtěl. "Alt" atribut je nezbytné pro nevidomé nebo vidění postižené uživatele. Text uvnitř tohoto atributu je číst text na mluvené pořady, stejně jako prohlížeče, když myši nad ním. Zpracovávání událostí odkazují na obrázky, které "id" atribut, a proto je důležité používat dobré jméno.

4

Přidat tag kotevní kolem značky obrazu. Tato značka se bude držet rutiny událostí. "Javascript: void (0)" zastaví prohlížeč z pokusu načíst další webové stránky.

<a href="javascript: void(0)">

<Img width = "143" height = "39" border = "0" alt = "Stiskněte tlačítko" name = "button_but" />

</a>

5

Předpětí obrázky pomocí více JavaScript v <head> dokumentu. Snímky budou volána funkce a "id" atribut říká scénář kam dát nové obrázky.

<Head>

<Script type = "text / javascript">

Funkce mouseOver ()

{

document.getElementById ("button_but"). src = "img_1.jpg"

}

funkci mouseOut ()

{

document.getElementById ("button_but"). src = "img_2.jpg"

}

</ Script>

</ Head>

Dávejte pozor, aby uzavřít i scénář a značky hlavy.

6

Přidejte rutiny událostí JavaScript do tagu kotvy, jak je uvedeno níže. Všimněte si, že "img_1.jpg" se používá v onmouseover rutině události, stejně jako obraz tag zdroj majetku. "Img_2.jpg" je skrytý uvnitř onMouseOut psovod a budou vidět pouze tehdy, když se myš pohybuje od "img_1.jpg".

<A href = "javascript: void (0)" onmouseover = "mouseover ()" onmouseout = "mouseOut ()"

<Img width = "143" height = "39" border = "0" alt = "Stiskněte tlačítko" name = "button_but" />

</a>

Tento kód říká prohlížeči, změnit obraz, když se ukazatel myši nad obrázkem.

7

Uložit stránku a otevřete jej v prohlížeči to vyzkoušet. Povolit JavaScript pokud je to nutné, a ujistěte se, že kód funguje.

8

Nahrát soubor a obrázky do adresáře na vašem webovém serveru.

Tipy:

  • Snímky jsou snadno přepínat z přidáním nových obrázků do adresáře a mění jejich jména současných názvech souborů.
  • Uživatelé bez povolený JavaScript nebudou moci používat tuto funkci.