How to use HTC files to encapsulate CSS styles

Source: Internet
Author: User
css|htc| Package

The following is a demonstration of the creation of HTC by creating a mouse over the highlighted HTC. 1, the creation of HTC file architecture. A standard HTC file contains a SCRIPT block and a pair of optional COMPONENT tags.

<PUBLIC:COMPONENT>
<SCRIPT>
</SCRIPT>
</PUBLIC:COMPONENT>

2, write an executable script.
In the following code, ATTACH is used to set the message that HTC receives elements that are triggered in the onmouseover and onmouseout events. It tells HTC to toggle colors to reflect the highlighted effect of the mouse over the element.

<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 a HILITE.HTC file.

Note: You can access them directly using properties, methods, or the names of the events, and you do not need to precede the prefix of the element. In the previous example we noticed that we called Runtimestyle directly when we switched colors instead of using Element.runtimestyle.

3. Once implemented, this HTC can be used in Web pages to achieve the effect of the mouse sliding over highlight.

<HEAD>
<STYLE>
LI {Behavior:url (HILITE.HTC)}
</STYLE>
</HEAD>

<p>mouse over the two list of items below to the effect.
<UL>
<LI> Web Teaching Network </LI>
<LI>www.webjx.com</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.