Het is mogelijk , met behulp van Javascript en Cascaded Style Sheet ( CSS ) , om de kleur van een kolom wijzigen met de mouseOver ( ) , en mouseOut ( ) , functies om de kolom - object aan te pakken in het Document Object Model ( DOM ) . CSS wordt gebruikt om tekst objecten nauwkeurig te plaatsen binnen de pagina weergavegebied . Het heeft de html element vervangen in de meeste gevallen . De code steekproef omvatte hier illustreert dit en loopt in de meeste moderne browsers . Instructies
1 Verklaren pagina head :
Java Test <br> < /title > ; <p> <meta <br> content="text/html; charset=utf-8" http-equiv="Content-Type" /> kopen van 2 <p> verklaren paginastijlen : < br <p> <style type="text/css"> <p> # testen <br> <p> > <br> { <p> positie <br> : absolute ; <br> <p> z - index : 1 ; <p> zichtbaarheid <br> : zichtbaar ; <p> breedte <br> : 14.55em ; <p> hoogte <br> : 8.0em ; <br> <p> top : 0.8em ; <br> <p> links : 0.5.0em ; <p> grens <br> : 1px solid # ccc ; <br> <p> - moz - border - radius : 0.5em ; <p> - webkit - border - radius <br> : 0.5em ; <p> float <br> : left ; <p> margin <br> : 0 ; <p> <br> text-align : left ; <p> padding <br> : 1em ; <br> <p > background : # FFFFFF ; <p> } <p> p <br> <p> <br> { <p> font-size <br> : 0.9em ; <br> <p> font-weight : 400 ; <p> kleur <br> : # FFFFFF ; <br> <p> } <p> < /style > <br> 3 <p> verklaren script : < br <p> <script type="text/javascript"> <p> functie mouseOver > <br> ( ) op <p> { <p> document.getElementById <br> ( " test" ) . stijl. achtergrond = " # 345678 " <p> } <p> functie mouseOut ( ) <br> <p> { <p> document.getElementById <br> ( " test" ) . style.background = " # FFFFFF <br> <p> } <p> " <br> < /script > <br> <p> < /head > <br> 4 <p> verklaren lichaam : <br> <p > <body> <br> <p> <div id="test" onmouseover="mouseOver()" onmouseout="mouseOut()"> <p> <br> <p> <p > Hallo daar ! Je hebt me gevonden . <br> <p> < /P> <p> < /div > <p> < /body > <br> <p> < /html > < br > <br></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=90>
<tr>
<td bgColor=#e7edf4 align=middle><script language='javascript' src='/ad/201310/3.js'></script></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=90>
<tr>
<td align=left>Previous: <a class='LinkPrevArticle' href='/programmering/javascript-programming/201309/91053.html' >Hoe je tekst Blink verdienen met JavaScript </a></li> </td>
<td align=right>Next: <a class='LinkNextArticle' href='/programmering/javascript-programming/201309/91055.html' >Hoe te wijzigen Tabel Achtergrond Kleuren Met Javascript </a></li> </td>
</tr>
</table>
</td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=18>
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=246>
<tr>
<td height=246 vAlign=top width=199>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=199>
<tr>
<td height=244 vAlign=top width=197>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><STRONG>JavaScript Programmeren</STRONG></td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90774.html" title="JavaScript terugbellen Functies : isFunction " target="_self">JavaScript terugbellen Functie…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90864.html" title="JavaScript Bellen naar een functie van een functie " target="_self">JavaScript Bellen naar een fun…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90998.html" title="Hoe te Browser Breedte Get " target="_self">Hoe te Browser Breedte Get </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90955.html" title="Hoe maak je een Cookie Script " target="_self">Hoe maak je een Cookie Script </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90992.html" title="Hoe maak je een DIV Zichtbaar met een Scroll in JavaScript maken " target="_self">Hoe maak je een DIV Zichtbaar …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91036.html" title="Hoe maak je opnemen op een Webcam Van Chatroulette " target="_self">Hoe maak je opnemen op een Web…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90783.html" title="Code beautifiers voor JavaScript " target="_self">Code beautifiers voor JavaScri…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91093.html" title="Hoe je Javascript gebruiken Met Ole Automation " target="_self">Hoe je Javascript gebruiken Me…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90940.html" title="Hoe je tekst roteren van Degree in JavaScript " target="_self">Hoe je tekst roteren van Degre…</a></td></tr><tr></tr></table></td>
</tr>
</table>
</td>
<td vAlign=top width=12></td>
<td vAlign=top width=375>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=375>
<tr>
<td height=244 vAlign=top>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><STRONG>Related Articles</STRONG></td>
</tr>
</table>
<table border=0 cellSpacing=4 cellPadding=0 width="95%" align=center height=209>
<tr>
<td height=201 width="33%"><IMG src="/img_xby/n1.jpg" width=111 height=182></td>
<td width="67%"><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96568.html' target="_self">Hoe maak je een Combo Box Maak in Visual…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96567.html' target="_self">Hoe maak je een Check Box Maak in Visual…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96566.html' target="_self">Hoe maak je een tekstvak maken in Visual…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96565.html' target="_self">Hoe maak je een optie Box in Visual Basi…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96564.html' target="_self">Hoe maak je een schijf keuzelijst in Vis…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96563.html' target="_self">Hoe kan ik een keuzelijst maken in Visua…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96562.html' target="_self">Hoe kan ik een Picture Box Maak in Visua…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96561.html' target="_self">Hoe een bestand keuzelijst Maak in Visua…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96560.html' target="_self">Hoe kan ik een afbeelding Box Maak in Vi…</a><br></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td vAlign=top width=8></td>
<td vAlign=top width=376>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=375>
<tr>
<td height=244 vAlign=top>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><STRONG>Programmering Articles</STRONG></td>
</tr>
</table>
<table border=0 cellSpacing=4 cellPadding=0 width="95%" align=center height=207>
<tr>
<td height=199 width="33%"><IMG src="/img_xby/n2.jpg" width=111 height=182></td>
<td width="67%">
<table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/88118.html" title="Hoe een AWK Script " target="_self">Hoe een AWK Script </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/87001.html" title="PHP Array Sorteer Functie " target="_self">PHP Array Sorteer Functie </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/php-mysql-programming/201309/91953.html" title="Het laden van een URL in een DIV Met behulp van PHP Functie " target="_self">Het laden van een URL in een DIV Met beh…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/python-programming/201309/94048.html" title="Het verschil in Python en Django " target="_self">Het verschil in Python en Django </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/php-mysql-programming/201309/93079.html" title="PHP Tutorial : MySQL " target="_self">PHP Tutorial : MySQL </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/88594.html" title="Microsoft Certified Partner Eisen " target="_self">Microsoft Certified Partner Eisen </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/java-programming/201309/90363.html" title="Verf Methode in een Java-applet " target="_self">Verf Methode in een Java-applet </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/cc-programming/201309/85677.html" title="Hoe te Float converteren naar String in C + + " target="_self">Hoe te Float converteren naar String in …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/88391.html" title="Hoe te logisch ontwerp voor een stroomdiagram Dat drukt Numbers " target="_self">Hoe te logisch ontwerp voor een stroomdi…</a></td></tr><tr></tr></table></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=10>
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=57>
<tr>
<td class=bs background=/img_xby/di.jpg align=center>Copyright © Computer Kennis http://www.nldit.com <script language='javascript' src='/ad/201310/5.js'></script></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=10>
<tr>
<td></td>
</tr>
</table>
</div>
</body>
</html>
|
