Cum se fac imagini cu rollover cu cod HTML

Video: How to create image rollover using HTML 5 and Javascript

Conţinut

instrucțiuni de ghidare
Ce ai nevoie

Cu milioane de site-uri care există pe internet, este esențial ca a ta să fie unică. O tehnică folosită pentru a adăuga un efect dinamic site-urilor web este "imaginile cu rollover", cunoscute și sub numele de "butoane de răsturnare". În esență, atunci când vizitatorul se deplasează peste o imagine, se schimbă și revine la normal când mouse-ul este eliminat. Aceasta poate fi utilizată pentru anumite efecte subtile, cum ar fi schimbarea culorii imaginii sau a literei. Puteți crea o imagine de rollover proprie cu formate HTML de bază în diferite programe de design.

instrucțiuni de ghidare

Creați site-uri dinamice cu ajutorul imaginilor cu rollover (Jupiterimages / Photos.com / Getty Images)

Creați un document nou cu dimensiunea dorită (în pixeli) utilizând un software de editare a imaginilor, cum ar fi Photoshop. Creați imaginile normale și "rollover", care trebuie să aibă aceeași dimensiune.
Salvați ambele imagini în mod individual, accesând meniul "Fișier" și selectând "Salvare". Utilizați formate JPEG, GIF sau PNG. Deși primele două sunt cele mai frecvent utilizate, PNG-urile păstrează transparența. Asigurați-vă că ați salvat imaginea în directorul rădăcină locală al site-ului dvs.
Deschideți software-ul de design corespunzător, cum ar fi Adobe Dreamweaver. Faceți clic pe butonul "Actualizare" din bibliotecă pentru a actualiza biblioteca și folderul rădăcină local pentru site-ul dvs. Găsiți imaginile în dosarul rădăcină.
Treceți la vizualizarea de cod a paginii Web.
Tip "
"În cod, fără citate de start.
Înlocuiți "http://yoursite.com" cu adresa site-ului dvs. web. De asemenea, înlocuiți "IMAGE1" și "IMAGE2" cu numele imaginilor normale și "rollover", respectiv.