gtemata.com

Cum se creează un rollover de imagini în jаvascript

jаvascript este limbajul de programare mondială ușoare cele mai populare și funcționează cu cele mai multe browsere majore, cum ar fi Internet Explorer, Chrome, Safari, Firefox și Opera. Utilizarea sa este, de asemenea, simplă pentru construirea de site-uri dinamice și interactive. Una dintre cele mai interesante caracteristici este rolloverul imaginii, adică schimbarea imaginii când mouse-ul se mișcă. Când mouse-ul este mutat, imaginea originală este afișată din nou. Articolul arată cum să facă acest lucru, pas pentru a passaggio- să urmeze, așa că trebuie să aibă deja cunoștințe de bază de HTML și jаvascript.

Exemplu de pagină web

paşi

1
Pregătiți două imagini pentru efectul de rollover. Selectați două imagini diferite pentru rollover și salvați-le în același folder unde veți salva fișierul HTML.
  • 2
    Deschideți editorul de text. Pentru acest articol vom folosi Dreamweaver. În orice caz, dacă editorul dvs. de la deschidere prezintă o pagină goală, trebuie să inserați etichetele HTML pentru a construi pagina web.
  • 3
    Introduceți etichetele secțiunii . Codul jаvascript trebuie plasat în interiorul etichetelor. Două funcții jаvascript vor fi scrise pentru a schimba imaginile. Funcțiile sunt MouseRollover și mouseout, după cum puteți vedea în codul de mai jos. Proprietatea src (sursă) a variabilei "MyImage" acesta va fi folosit pentru a schimba imaginile la apelul pentru funcții.
  • 4
    Copiați următorul cod jаvascript:
  • 5
     
    Lipiți codul în secțiune  în editorul de text. Numele fișieruluiMyPicture2.jpg, numit în funcție MouseRollover, acesta trebuie înlocuit cu numele imaginii originale MyPicture1.jpg, apelați în funcție mouseout.
  • 6
    Introduceți secțiunea . Eticheta imaginii ”Title” este introdus pentru a afișa imaginea rollover. În acest exemplu, eticheta Alt = "Titlu" care se referă la numele imaginii este goală.
  • 7
    Copiați următorul cod:


  • 8
    Lipiți codul în secțiune . Proprietatea onmouseover este introdus în eticheta imaginii, după cum puteți vedea mai sus și trebuie să apelați funcția jаvascript Rolloverul imaginii pentru a schimba imaginea originală cu imaginea rollover. înlocui MyPicture1.jpg cu numele imaginii tale. Apoi se va folosi o altă proprietate de apel onmouseout care este introdus pentru a reveni la imaginea anterioară atunci când mouse-ul se mișcă din imaginea rollover.
  • 9
    Verificați tot codul. Codul dvs. trebuie să fie aproximativ același cu cel de mai jos. Încercați să jucați un pic cu codul și urmăriți ce se întâmplă.
    Cum se face jаvascript Rollover Image
  • 10
    Faceți clic pe "Fișier" și pe "Salvați"."
  • 11
    Introduceți numele documentului dvs. HTML. De exemplu, "index.html". Alegeți "Salvați ca" HTML.
  • 12
    Faceți clic pe "Salvați".
  • 13
    Urmăriți previzualizarea paginii dvs. într-un browser. Faceți clic pe "Fișier" și apoi pe "Previzualizare în browser". Faceți clic pe "Firefox" sau pe orice alt browser disponibil.
    • Sfaturi
    • Nu uitați să salvați fișierul HTML în același folder ca și imaginile.
    • Încercați să salvați de mai multe ori în timpul lucrului.
    • Un alt mod de a previzualiza pagina este să faceți clic dreapta pe fișierul HTML "Deschideți cu" și alegeți ce browser să o deschidă. În captura de ecran, fișierul HTML este deschis în mod implicit în Dreamweaver, dar cu un clic dreapta pe pictograma îl puteți deschide cu browserul dvs. preferat.
    Lucruri de care ai nevoie
    • Un PC
    • Orice editor de text
    • Un browser
    • Două imagini diferite
    Afișați mai multe ... (1)
     
    Distribuiți pe rețelele sociale: 

     
    înrudit