How to use an HTC file to encapsulate CSS styles

Source: Internet
Author: User

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>
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.