下面通過建立一個滑鼠滑過加亮顯示的 HTC 來示範一下建立 HTC 的過程。
1、建立 HTC 檔案的架構。
一個標準的 HTC 檔案含有一個 SCRIPT 塊和一對可選的 COMPONENT 標記。
<PUBLIC:COMPONENT>
<SCRIPT>
</SCRIPT>
</PUBLIC:COMPONENT>
2、寫一個可執行檔指令碼。
在下面的代碼中，ATTACH 被用於設定 HTC 接收元素在 onmouseover 和 onmouseout 事件被觸發的訊息。它通知 HTC 通過切換顏色來體現滑鼠滑過元素時的加亮效果。
<PUBLIC:COMPONENT> <PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="Hilite()" /> <PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="Restore()" /> <SCRIPT LANGUAGE="JScript"> var normalColor, normalSpacing; function Hilite() { // save original values normalColor = runtimeStyle.color; normalSpacing= runtimeStyle.letterSpacing; runtimeStyle.color = "red"; runtimeStyle.letterSpacing = 2; } function Restore() { // restore original values runtimeStyle.color = normalColor; runtimeStyle.letterSpacing = normalSpacing; } </SCRIPT> </PUBLIC:COMPONENT>
將上面儲存為hilite.htc檔案。
注意：您可以直接使用屬性、方法或者是事件的名稱來訪問它們，並不需要在前面加上 element 的首碼。
在前面的例子中我們注意到在切換顏色時我們直接調用了 runtimeStyle ，而不是使用 element.runtimeStyle。
3、一旦執行，這個 HTC 就能在網頁中應用來達到滑鼠滑過加亮的效果
<HEAD> <STYLE> LI {behavior:url(hilite.htc)} </STYLE> </HEAD><P>Mouse over the two list items below to see this effect. <UL> <LI>小賀的博兒</LI> <LI>netsos.cnblogs.com</LI> </UL> Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
