What is an Active Element? Cascading Style Sheets allow any element with an Anchor <A> tag to change as it is acted on (by clicking or by tabbing). Don't confuse a hover (red glow) with an active (brown italics) element however. Active links indicate a successful click and are useful when the connection is delayed or slow. On the links below, you can tell whether you clicked the link correctly because the link has changed its state. As soon as you see italicized text, you can assume you clicked the link properly, so you should wait. Let's face it, how many of you have re-clicked a link because of a slow connection. Active links provide an extra visual cue that you have clicked correctly the first time. Click the popup links below and note how the link changes "after" the link is clicked. You can also press the Tab key to advance to each link and press Enter.
Popup to test active link
Popup to test active link
Popup to test active link
Popup to test active link
The safest way to practice implementing CSS elements is in a test project, but because the CSS editors in RoboHTML Version 8 and Version 9 are vastly different we will change all the elements directly in the style sheet file using Notepad. Let's begin.
Open an existing RoboHTML project or create a new test project.
Create
a few links on one of your topics.
Right click the topic and choose Topic Properties.
Click the Appearance
tab and note which Style Sheet is selected. In the example below, the
HtmlHelp.css file is currently
assigned to the topic. In
the next step you will open this file and modify it using Notepad.
Click OK and minimize RoboHTML.
In the next exercise you open the CSS file in Notepad. For a tip on how to add Notepad to the right click menu on Windows Explorer, see August 2000's tip.
Open Notepad by choosing Start Button: Programs: Accessories: Notepad.
Choose File: Open.
Under Files of type select All
files and navigate to your project folder.
Select the htmlhelp.css file and click Open.
Scroll through the document and make sure that A:Active does not already appear in the list
Scroll to
the end of the document and, on a new line type:
This is a pseudo-class so you must use a colon rather than a period
to define the Active rule. It's also good practice to separate each element
on a new line, although you can string all elements together on one line,
as in the following:
A:Active {color:brown;font-style:italic;}
Choose File: Save, but leave Notepad open.
Switch to
RoboHTML and preview the topic and click the links.
Note
RoboHELP 2000 (Version 8) users may have to reference the code like the
following:
In this example RoboHTML 2000 uses the MicroVision Development (mvd) elements
in all CSS code. Simply copy and paste the code and add .mvd-
in front of the second element
Next, Hover elements