HTML å endre Cell Color
Du trenger ikke å blinke animasjoner og dans farger for å lage en nettside arbeid. Et par subtile visuelle effekter, men kan ikke bare forbedre nettstedet, men også gi viktige ledetråder til dine besøkende. For eksempel HTML-tabeller viser organiserte tabelldata i celler og rader på en nettside. Ved å endre bakgrunnsfargen som en bruker musen svever over ulike celler, kan du opprette en engasjerende mus-over effekt som hjelper brukeren å identifisere den aktive cellen.
Bruksanvisning
1 Åpne Notisblokk. Legg til følgende kode i dokumentet:
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<title>Table Cell Color Change Test</title>
</ Head>
<Body>
</ Body>
</ Html>
Dette skaper en tom webside.
2 Legg denne koden under den første <body> -taggen:
<Table border = "2">
<Tr>
<Td onmouseover = "style.backgroundColor = '# ff0000"; " onmouseout = "style.backgroundColor = '# ffffff"; "> 1 </ td>
<Td onmouseover = "style.backgroundColor = '# ff0000"; " onmouseout = "style.backgroundColor = '# ffffff"; "> 2 </ td>
</ Tr>
<Tr>
<Td onmouseover = "style.backgroundColor = '# ff0000"; " onmouseout = "style.backgroundColor = '# ffffff"; "> 3 </ td>
<Td onmouseover = "style.backgroundColor = '# ff0000"; " onmouseout = "style.backgroundColor = '# ffffff"; "> 4 </ td>
</ Tr>
</ Table>
Dette skaper et bord med to rekker og to kolonner. Den "onmouseover" endrer arrangementet en celle farge til rød (# FF0000) og "onmouseout hendelsen skifter farge tilbake til hvitt.
3 Trykk "CTRL + S" for å åpne "File Save" vindu og skriv "xyz.html" i "File Name" tekstboksen. Klikk på "Lagre".
4 Naviger til filen ved hjelp av Windows Utforsker og dobbeltklikker på filen. Nettleseren vil åpne og vise web-siden. Hold musen over tabellcellene. De vil endre farger.
Hint
- Endre "onmouseover" og "onmouseout" farger til noen verdier som du liker. Gjør "onmouseout" farge det samme som tabellens bakgrunnsfarge. I dette eksempel er standard tabellbakgrunnsfarge hvit. HTML-koden angir fargene i heksadesimalt format. Lær mer om HTML farger på nettet (se Ressurser).