The following describes how to create an HTC instance by creating an HTC instance with the mouse sliding over and highlighted.
1. Create the HTC file architecture. A standard HTC file contains a SCRIPT block and a pair of optional COMPONENT tags.
| The code is as follows: | Copy code |
| <PUBLIC: COMPONENT> <SCRIPT> </SCRIPT> </PUBLIC: COMPONENT> |
|
2. Write an executable script.
In the following code, ATTACH is used to set the messages of HTC receiving elements triggered by onmouseover and onmouseout events. It notifies HTC to highlight the mouse over the element by switching the color.
| The code is as follows: | Copy code |
| <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> |
|
Save the above as the hilite. htc file.
Note: you can directly access the attributes, methods, or event names without adding the element prefix. In the previous example, we noticed that we directly called runtimeStyle when switching colors, instead of using element. runtimeStyle.
3. Once executed, HTC will be able to apply the app on the webpage to achieve the effect of swiping and brightening the mouse.
| The code is as follows: | Copy code |
| <HEAD> <STYLE> LI {behavior: url (hilite. htc )} </STYLE> </HEAD> <P> Mouse over the two list items below to see this effect. <UL> <LI> Webpage Tutorial network </LI> <LI> </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
