ªð¦^¦Cªí ¤W¤@¥DÃD µo©«

[±Ð¾Ç] (±Ð¾Ç²Ä34½g) Dynamic HTML ¤U½g

[±Ð¾Ç] (±Ð¾Ç²Ä34½g) Dynamic HTML ¤U½g

¦A½Í¨Æ¥ó³B²z¾¹
¤p»x»¡¹L¡G·í§A²¾°Ê·Æ¹«©Î¬O«ö¤U·Æ¹««öÁä®É¡A³o­Ó¡u²¾°Ê¡v¡B¡u«ö¤U¡vªº°Ê§@´N¬O¤@­Ó¨Æ¥ó¡I¨Ò¦p§Ú­Ì¤§«e¤w¸g¥Î¹L¤F·Æ¹«ªº¡uonClick¡]ºVÀ»¡^¡v¨Æ¥ó¡A§Ú­Ì²{¦b¦A¨ÓÁ@Á@·Æ¹«ªº¡uonMouseMove¡]·Æ¹«²¾°Ê¡^¡v¨Æ¥ó¡A¤p»x¥ý±N·Æ¹«»PÁä½Lªº¤@¨Ç¬ÛÃö¨Æ¥ó±±¨î¾¹¦Cªí¦p¤U¡G

¨Æ¥ó±±¨î¾¹

¤Þµo®É¾÷

onClick

§Q¥Î·Æ¹«ÂI¿ï¤¸¥ó

onDrogDrop

§Q¥Î·Æ¹«©ì¦²ª«¥ó

onMouseDown

«ö¤U·Æ¹««ö¶s

onMouseUp

©ñ¶}·Æ¹««ö¶s

onMouseOver

±N·Æ¹««ü¼Ð²¾¨ì¬Y­Ó¤¸¥ó¤W®É

onMouseOut

·í·Æ¹««ü¼Ð²¾¶}¬Y­Ó¤¸¥ó®É

onMouseMove

·í·Æ¹««ü¼ÐÅÜ´«¦ì¸m®É

OnKeyDown

·í«ö¤UÁä½L«öÁä¡A¦ý¨Ã¥¼©ñ¶}«öÁä®É

onKeyUp

·í«ö¤UÁä½L«öÁä¨Ã©ñ¶}«öÁä®É

onKeyPress

·í«ö¤UÁä½L«öÁä®É

¤ß¦w¡A¥­¦w   
µoªí¥ô¦óµL·N¸qªº·PÁ©ÎÄé¤ô¤å³¹¤@«ß¬å,¬Ã±¤±b¸¹,½Ð¸Ô¾\ª©³W!!

eventª«¥ó
Dynamic HTML¤¤¦³¤@­Ó¬Û·í¯S§Oªºª«¥ó¡uevent¡v¡A·í§Ú­Ì«ö¤U·Æ¹««öÁä¡BÅÜ´«·Æ¹««ü¼Ð¦ì¸m¡Kµ¥¡A³o¨Ç¨Æ¥óªº°T®§³£·|³Q¦s©ñ¨ìeventª«¥ó¤¤¡A¨Ò¦p¡G«ö¤U·Æ¹««öÁä®ÉªºonClickºVÀ»¨Æ¥ó®É¡Aeventª«¥ó´N·|°O¿ý¨Æ¥óµo¥Í®É·Æ¹«´å¼Ðªº©Ò¦b¦ì¸m¡A¤S¦p¡G§Ú­Ì«ö¤U¤FÁä½L¤Wªº¬Y­Ó«öÁä¡Aeventª«¥ó´N·|°O¿ý©Ò«ö¤Uªº«öÁ䥦ªºASCII½X¡C¯÷±Neventª«¥ó¥i°O¿ýªº¨Æ¥ó°T®§¦Cªí¦p¤U¡G

eventª«¥óÄÝ©Ê

ÄÝ©Ê°T®§

x

·Æ¹«¨Æ¥óµo¥Í®É©Ò¹ïÀ³ªºµøµ¡¹³¯À¤ô¥­¦ì¸m

y

·Æ¹«¨Æ¥óµo¥Í®É©Ò¹ïÀ³ªºµøµ¡¹³¯À««ª½¦ì¸m

keyCode

Áä½L¨Æ¥óµo¥Í®Éªº«öÁäASCII½X

srcElement

¨Æ¥ó§@¥Î¹ï¶Hªººô­¶¤¸¥ó





·Æ¹«¨Æ¥óÀ³¥Î
¦³¨S¦³¦b°ÑÆ[§O¤Hºô­¶®É¡Aµo²{§Aªº·Æ¹««ü¼Ð·|±a³o¤@±i¹Ï¤ù¶]£«¡H¥u­n§Q¥ÎeventªºÄÝ©Ê¥[¤W¨Æ¥ó±±¨î¾¹ªº¨Ï¥Î¡A´N¥i¥H¹F¨ì³oºØ®ÄªGÅo¡A¿é¤H¤£¿é°}¡A§Ú­Ì°¨¤W¨Ó§¹¦¨³o­Ó¯S®Ä¡I

13-13.png
2010-5-19 10:08


¹ê¨Ò¾Ç²ß¡G
  1. <HTML>
  2. <HEAD><TITLE>²©ö´å¼Ð±a¹Ï</TITLE></HEAD>
  3. <!--·í·Æ¹««ü¼Ð¦ì¸m§ïÅÜ©I¥s¨ç¦¡Åܧ󤸥ó¦ì¸m-->
  4. <BODY onMouseMove="document.all.map.style.pixelLeft=event.x;
  5. document.all.map.style.pixelTop=event.y">

  6. <img src="test.gif" alt="´å²¾ªº¹Ï¤ù" id="map" style="position: absolute">

  7. </BODY>
  8. </HTML>
½Æ»s¥N½X

  • «ö¤U·Æ¹««öÁä®ÉªºonClickºVÀ»¨Æ¥ó®É¡Aeventª«¥ó·|°O¿ý¨Æ¥óµo¥Í®É·Æ¹«´å¼Ðªº©Ò¦b¦ì¸m¡A¦P¼Ëªº¡A·í·Æ¹««ü¼ÐÅܰʦì¸m®É¡Aeventª«¥ó·|°O¿ý·Æ¹««ü¼ÐÅܰʦì¸m«áªº¤ô¥­»P««ª½®y¼Ð¹³¯À¦ì¸m¡C
  • ·í·Æ¹««ü¼Ð¦ì¸mÅÜ°Ê«á¡A§Ú­Ìª½±µ´N§âeventª«¥ó°O¿ýªº·Æ¹«¦ì¸m¡A«ü©w¬°¹Ï¤ùªº©w¦ìÂI¦ì¸m¡A¨º»ò¹Ï¤ù¤£´N¸òµÛ·Æ¹««ü¼Ð¶]¤F¶Ü¡H
  • ¦b¥»¨Ò¤¤¡A·Æ¹««ü¼Ð·|»P¸òÀHªº¹Ï¤ù­«Å|¡A³o¼Ë¥i¯à·|³y¦¨¤@¨Ç°ÝÃD¡A¨Ò¦p¡GÂI¿ïºô­¶¤¤ªº¶WÃìµ²®É¡A§A«ö¤U·Æ¹««öÁäÂIªº¬O¹Ï¤ùÁÙ¬Oºô­¶¤¤ªº¶WÃìµ²£«¡H¬°¤F§ïµ½³o¯ÊÂI¡A§Ú­Ì¥i¥HÅý¹Ï¤ù¤£­n¸òÀH«ü¼Ð¨º»òªñ¡A¼W¥[¤@¨Ç°¾²¾¶q¡AÅý¨âªÌ¦³¨Ç¶ZÂ÷¡G
  1. <HTML>
  2. <HEAD><TITLE>°¾²¾¸òÀH¹Ï¤ù</TITLE></HEAD>

  3. <SCRIPT language="JavaScript">
  4. //³]©w¤ô¥­°¾²¾¶q
  5. offx=20
  6. //³]©w««ª½°¾²¾¶q
  7. offy=20
  8. //Åܧ󤸥ó¦ì¸m¨ç¦¡
  9. function move()
  10. //§Q¥ÎeventªºÄݩʧïÅܤ¸¥ó¦ì¸m
  11. {
  12. document.all.map.style.pixelLeft=event.x+offx
  13. document.all.map.style.pixelTop=event.y+offy
  14. }
  15. </SCRIPT>

  16. <!--·í·Æ¹««ü¼Ð¦ì¸m§ïÅÜ©I¥s¨ç¦¡Åܧ󤸥ó¦ì¸m-->
  17. <BODY onMouseMove="move()">

  18. <img src="test.gif" alt="´å²¾ªº¹Ï¤ù" id="map" style="position: absolute">

  19. </BODY>
  20. </HTML>
½Æ»s¥N½X
13-14.png
2010-5-19 10:09
¤ß¦w¡A¥­¦w   
µoªí¥ô¦óµL·N¸qªº·PÁ©ÎÄé¤ô¤å³¹¤@«ß¬å,¬Ã±¤±b¸¹,½Ð¸Ô¾\ª©³W!!

TOP

Áä½L¨Æ¥ó¨Ï¥Î
¨ä¹êÁä½L¨Æ¥ó¦n¹³¤ñ¸û¤£±`¥Î¡A¤£ªG¤p»xÁÙ¬O´£¨Ñ¤p¤pªº½d¨Ò¨Ó¨Ñ¤j®a°Ñ¦Ò»PÀ³¥Î¡AÁÙ°O±o¤§«eeventª«¥óªºkeyCodeÄݩʧa¡H³o­ÓÄݩʤº®e´N¬O°O¿ýÁä½L¨Æ¥ó©Ò¨Ï¥Îªº«öÁäASCII½X¡A¨Ò¦p«ö¤U¡¨c¡¨¡A´N·|±o¨ì¤@­ÓASCII½X¡¨67¡¨¡C

¦]¬°Áä½L¨Æ¥óªº¨Ï¥Î´X¥G³£¬Û¦P¡A¤p»x´N¥HonKeyUp¨Æ¥ó±±¨î¾¹¬°¨Ò»¡©ú¦n¤F¡C

¹ê¨Ò¾Ç²ß¡G
  1. <HTML>
  2. <HEAD><TITLE>«öÁäASCII½X</TITLE></HEAD>

  3. <SCRIPT language="JavaScript">
  4. function showkeycode()
  5. {
  6. alert(event.keyCode)
  7. }
  8. </SCRIPT>

  9. <BODY onKeyUp="showkeycode()">
  10. </BODY>
  11. </HTML>
½Æ»s¥N½X

  • ­º¥ý¡A§Ú­Ì¦b<BODY>¼ÐÅÒ¤º©ñ¸m¤F¤@­ÓonKeyUp¨Æ¥ó³B²z¾¹¡]­ì©l½X²Ä11¦æ¡^¡A·í¨Æ¥ó¤Þµo®É´N©I¥sshowkeycod()¨ç¦¡¡C
  • ·íshowkeycod()¨ç¦¡³Q©I¥s®É¡A´N¨ú¥Xeventª«¥óªºceyCodeÄÝ©Ê­È(¹ïÀ³«öÁ䪺ASCII½X)¡AµM«á§â¨ú±oªºÄݩʭȪ½±µ§Q¥Îalert()°T®§µøµ¡¨ç¦¡Åã¥Ü¥X¨Ó¡C

13-15.png
2010-5-19 10:11
¤ß¦w¡A¥­¦w   
µoªí¥ô¦óµL·N¸qªº·PÁ©ÎÄé¤ô¤å³¹¤@«ß¬å,¬Ã±¤±b¸¹,½Ð¸Ô¾\ª©³W!!

TOP

ºPÅ|
13-16.png
2010-5-19 10:14


¤°»ò¬OºPÅ|£«¡HºPÅ|´N¦p¦P§A¦b¾Þ§@ÀÉ®×Á`ºÞªº¨ººØ®ÄªG¡A¬Ý¤@¤U¤W¹Ï§A´N©ú¥Õ¤F¡I³oºØºPÅ|ªº®ÄªG¡A¤]¦³¤HºÙ¤§¬°¡u¾ðªK§§¥Ø¿ý¡v¡A³oºØ¿ï³æ¤§¤UÁÙ¦³¤l¿ï³æªº¬[ºc´NºÙ¤§¬°ºPÅ|¡A­n¨M©wºô­¶¤¸¥ó¥X²{»P§_ªºÄݩʬO­þ¤@­Ó£«¡H¬O¡uvisiblity¡v¹ï§a¡I¡uvisiblity¡vÄݩʽT¹ê¯à¨M©w¤¸¥óªº¥i¨£»P§_¡A¦ý¬O¡A¦b¤¸¥óªº­ì©l¦ì¸m¤W·|¯d¤UªÅ¥Õ¡A¦p¤U¨Ò¡G§Ú¦bºô­¶¤¤¦w´¡¤T±i¹Ï¤ù¡A·í§ÚÂIÀ»¥ô¤@±i¹Ï¤ù¡A¥¦­Ì³£·|ÁôÂð_¨Ó¡A¦ý¥u¬O§A¡¨¬Ý¤£¨£¡¨ ¦Ó¤w¡A¨Æ¹ê¤W¡A¥¦ÁÙ¦b­ì¨Óªº¦ì¸m¤W¡Aºô­¶¤¤ªºªÅ¶¡¨Ã¨S¦³¦]¬°§A¬Ý¤£¨£¹Ï¤ù¦ÓÄÀ©ñ¡I
  1. <html>
  2. <head><title>visibilityÄÝ©Ê®i¥Ü</title></head>
  3. <body>
  4. <p><img border="0" src="ada.gif" onClick="this.style.visibility='hidden'"></p>
  5. <p><img border="0" src="test.gif" onClick="this.style.visibility='hidden'"></p>
  6. <p><img border="0" src="adb.gif" onClick="this.style.visibility='hidden'"></p>
  7. </body>
  8. </html>
½Æ»s¥N½X
13-17.png
2010-5-19 10:14


«z¡I¨º¨Ï¥Î¡uvisiblity¡vÄÝ©Ê´N°µ¤£¥XºPÅ|®ÄªG¤F¹À¡A¨S¿ù¡I¦ý¬OÁÙ¦³¤@­ÓÁôÂ严óªºÄÝ©Ê¥i¥Î³á¡I

­nÁôÂúô­¶¤¸¥ó¡A¦P±N¤¸¥ó©Ò¦û¥Îªººô­¶ªÅ¶¡ÄÀ©ñ¥X¨Ó¡A§Ú­Ì¥i¥H¨Ï¥Î¡ydisplay¡zÄÝ©Ê¡I

13-18.png
2010-5-19 10:15
  1. <html>
  2. <head><title>displayÄÝ©Ê®i¥Ü</title></head>
  3. <body>
  4. <p><img border="0" src="ada.gif" onClick="this.style.display='none'"></p>
  5. <p><img border="0" src="test.gif" onClick="this.style.display='none'"></p>
  6. <p><img border="0" src="adb.gif" onClick="this.style.display='none'"></p>
  7. </body>
  8. </html>
½Æ»s¥N½X
¡ydisplay¡zÄÝ©Ê­È­Y³]©w¬°¡unone¡v¡A«h·|ÁôÂúô­¶¤¸¥ó¨Ã±Nºô­¶ªÅ¶¡ÄÀ©ñ¥X¨Ó¡A¦pªGµ¹¥¦¤@­ÓªÅ­È¡A«hºô­¶·|¨q¥X¨Ó¡A¨ÃÀ½¤Jºô­¶¤¤¡A·íµM¡A¡ydisplay¡zÄÝ©ÊÁÙ¦³¨ä¥Lªº³]©w­È¡A¦ý¤£¦b¥»±Ð¾Ç±´°Q½d³ò¡A¦³¿³½ì½Ð°Ñ¦Ò¬ÛÃöªºCSS®ÑÄy¡C

²{¦b¤p»x²³æªº¨Ó¥Ü½d¤@­ÓºPÅ|ªº¾ðªK¥Ø¿ý¿ï³æ¡G
13-19.png
2010-5-19 10:16

­º¥ý§Ú­Ì§Q¥Î<DIV>°Ï¶ô¼ÐÅÒ°µ¤@­Ó¸Á±_¦¡ªº²Õ¦X¡]´N¬O°Ï¶ô¤¤ÁÙ¥]§t¥t¤@­Ó°Ï°Õ¡I¡^¡A¨£¤W¹Ï¡AÂŦâ±Ô­zªº<DIV>°Ï¶ô¬O³Ì¥~¼hªº°Ï¶ô¡A§Ú­Ì¨S¦³³]©w¥¦ªºdisplayÄÝ©Ê¡A©Ò¥H¦bºô­¶¤¤§Ú­Ì¥i¥H¬Ý¨ì°Ï¶ôªº¤º®e¡u³Â»¶®a±Ú¡v³o¥|­Ó¦r¡F¬õ¦â±Ô­zªº<DIV>°Ï¶ô¬O¤º¼hªº°Ï¶ô¡A§Ú­Ì³]©w¥¦ªºdisplayÄݩʬ°¡¦none¡¦¡A©Ò¥H¦bºô­¶¤¤§Ú­Ì¨£¤£¨ì°Ï¶ôªº¤º®e¡A¦P§Ú­Ì±N³o¤º¼h°Ï¶ôªºIDÄݩʳ]¬°¡umyhome¡v¡C

·í¥~¼hªº°Ï¶ô²£¥ÍºVÀ»¨Æ¥ó®É·|©I¥s expcontrol()¨ç¦¡¡A¸Ó¨ç¦¡ªº¤º®e¦p¤U¡G
  1. function expcontrol()
  2. {
  3.       if (document.all.myhome.style.display=='none')
  4.        {
  5.        document.all.myhome.style.display=''
  6.        }
  7.      else
  8.        {
  9.        document.all.myhome.style.display='none'
  10.        }
  11. }
½Æ»s¥N½X
·íexpcontrol()¨ç¦¡³Q©I¥s®É¡A§Ú­Ì¥ý§PÂ_¤º¼h°Ï¶ô¡]myhome¡^¥Ø«eªºª¬ºA¡A¦pªG¥¦¬OÁôÂ꺡A§Ú­Ì´N±N¥¦Åã¥Ü¥X¨Ó¡A¤Ï¤§«h±N¨äÁôÂð_¨Ó¡A¦p¦¹´N²£¥Í¤FºPÅ|®ÄªG¡I

13-20.png
2010-5-19 10:17


«Ü²³æ¡A¹ï§a¡I¨Ì¦¹Ãþ±À¡A§A´N¥i¥H«Ø¥ß§ó¦h¼h¦¸ªº°ïÅ|¤F¡I¦n¡A¤p»x¦Aµ¹¤@­Ó½d¨Ò¡A¦ý¬O¤£°µ¸ÑÄÀ¤F³á¡IÅý§A¸£¤O¿EÀú¤@¤U¡A¦pªG§A¯à°µ¥X¤@­Óµ{¦¡½X²¼ä¤S¬O¦h¼h¥B¦h¶µ¥Ø¦¡ªººPÅ|¥Ø¿ý¡A¼gE-Mailµ¹¤p»x¡A¨Ã¤¶²Ð§Aªº³]­p­ì²z¡A¤p»x±N·|¥H±MÄ檺¤è¦¡±N§Aªº«H¥óµoªí¦bºô¯¸¤W¡A¨Ã°e§A¤@¥÷¤p§ª«¡I
¤ß¦w¡A¥­¦w   
µoªí¥ô¦óµL·N¸qªº·PÁ©ÎÄé¤ô¤å³¹¤@«ß¬å,¬Ã±¤±b¸¹,½Ð¸Ô¾\ª©³W!!

TOP

        ÀR«ä¦Û¦b : ¤£­n¤p¬Ý¦Û¤v¡A¦]¬°¤H¦³µL­­ªº¥i¯à¡C
ªð¦^¦Cªí ¤W¤@¥DÃD