Syntaksi Hover Effect HTML

Syntaksi Hover Effect HTML
Kautta yhdistelmä HTML markup, Cascading Style Sheet ilmoitusten ja JavaScript-koodia, Web-sivuja voi toteuttaa vuorovaikutteisia vaikutuksia, muuttamalla ulkonäkö elementtien käyttäjä liikuttaa hiirtä ympäri ja leijuu tiettyjä osia. Kehittäjät voivat lisätä vuorovaikutteisia tehosteita tahansa HTML-elementtejä käyttäen tapahtuma attribuutteja tai ankkurielementtejä CSS valitsimet. Ominaisuuksia voidaan ohjata web-selain tunnistaa käyttäjä liikkuu suutaan tai pois jokin erityinen tekijä, muuttamalla elementin ulkonäkö, kun tämä tapahtuu.

HTML-elementit

Web-sivut voivat sisältää valintatehosteet tahansa HTML-elementti. Jokainen HTML-elementti koostuu avaaminen ja sulkeminen tageja, jotkut niiden välisen ja mahdollisesti attribuutteja. Seuraava esimerkki HTML-koodi osoittaa tyypillinen elementti: <Div id = "intelem"> Siirrä hiiri Tämä teksti </ div>

Tämä elementti on joitakin yksinkertaisia ​​tekstin sisältöä ja ID määrite. ID määrite tulee vain kerran saman sivun sisällä, koska tämä ominaisuus on ainutlaatuinen elementti tunnistamista. JavaScript hover-toiminto voi käyttää ID attribuutin muuttaa ulkonäköä elementin. Hover vaikutuksia voidaan soveltaa myös ankkurielementtejä CSS koodia. Seuraavat markup osoittaa HTML ankkuri: <a href="page.html"> Page </a>

Attribuutit

HTML-elementit voivat sisältää erilaisia ​​tapahtuma attribuutteja. Koska hover vaikutus tapahtuu, kun käyttäjät siirrät hiiren elementti, HTML-elementtejä täytyy tunnistaa hiiren tapahtumia. "Onmouseover" ja "onmouseout" tapahtumia tunnistaa käyttäjä liikkuvan hiiren päälle ja pois elementin. Seuraavat laaja otos markup osoittaa lisäämällä nämä kaksi tapahtumaa määritteet elementtiin: <Div id = "intelem" onmouseover = "onElem (this.id)" onmouseout = "offElem (this.id)"> Siirrä hiiri Tämä teksti </ div>

Tämä koodi ohjaa Web-selain tunnistaa käyttäjän liikkuvan hiiren päälle tai pois elementti, jossa määritellään Javascript-toimintoja, kun tämä tapahtuu. Jokainen toiminto soittaa kulkee elementin ID parametrina, joten JavaScript-koodi pystyy tunnistamaan elementti sivulle.

JavaScript

Web-sivujen toteuttaa vuorovaikutteisia vaikutuksia käyttäen JavaScript-koodia. Tämä koodi voidaan sisällyttää JavaScript-tiedostot tallennetaan "Js" laajennus, liittyy HTML sivun pään § seuraavasti: <Script type = "text / javascript" src = "pagefunctions.js"> </ script>

Tämä mahdollistaa pääsyn kaikkiin toimintoihin listattiin tiedosto nimeltä "pagefunctions.js", joka tallennetaan samaan hakemistoon kuin sivun. Vaihtoehtoisesti kehittäjät voivat sisältää JavaScript-koodia suoraan pään osioon seuraavasti: <Script type = "text / javascript"> // Toimintoja täällä </ Script>

Tässä osassa voi olla JavaScript toimintojen toteuttamiseksi hääriä vaikutus.

Tehtävät

JavaScript toiminnot toteuttaa valintatehosteet ensin tunnistaa elementtien ollessa vuorovaikutuksessa. Seuraava toiminto esitetään edustavat kahden tapahtuman määritteet kutsutaan kun hiiri liikkuu päälle ja pois elementin: toiminto onElem (elemID) { // Funktio täytäntöönpano täällä } toiminto offElem (elemID) { // Funktio täytäntöönpano täällä }

Sisällä nämä toiminnot elinten, kehittäjät voivat toteuttaa hääriä vaikutus. Seuraava koodi saa viitata elementtiin soittamalla menetelmä: var theElem = document.getElementById (elemID);

Toiminto voidaan sitten soveltaa muotoilutuotteet ominaisuudet elementille, seuraavasti: theElem.style.color = "# FF0000";

Toiminto kutsutaan kun käyttäjä rullaa hiirtä pois elementti voisi palauttaa sen alkuperäiseen ulkonäköön. Aina nämä toiminnot suorittaa, he voivat käyttää läpäissyt tunnus parametrin paikantaa oikea elementti ja muuttaa sen ulkonäköä tarvittaessa.

CSS valinta

CSS kannanotot sivusto voi style ankkuri elementtejä. CSS voi määritellä erityisesti ulkonäkö asetukset kun käyttäjä vie hiiren ankkuri. Seuraava CSS vakuutus osoittaa asettamalla ulkonäkö sivun ankkurit hääriä: : hover {color: # 333333;}

Tässä osassa voi sisältää muita CSS ilmoitukset sanella tyyliin ankkuri sisältöä. CSS voi myös vaihtoehtoisesti määritellä asetukset ankkurielementin normaalissa tilassa HTML linkkiä ja linkkejä käyttäjä on jo käynyt.

Aiheeseen liittyviä artikkeleita