Posts Tagged ‘link’

Link Pseudo-Classes

Sunday, September 13th, 2009

There are 4 “states” of links that you need to worry about when creating pseudo-classes: link, active, hover and visited.

That being said, take some time to think about how you actually want your links to behave in a given div before you define the pseudo classes. Do you actually want the links to get darker when visited, or do you want them all to remain the same color? If you are working with your primary navigation, you probably don’t want the links to have a “visited” style.

Because I’m a huge fan of making things simpler, I almost never define all four pseudo-classes.

Writing a pseudo class is easy, you simply add a “colon” and the pseudo class state directly after the “a” tag in a selector. For instance, for links in a content div, I would start with a rule for:

#content a

The above rule will define how all four states behave, because I defined the “a” tag, and did not specify a pseudo-class. If I want a rollover for the link, I can also define

#content a:hover

and change any attributes that change when the mouse hovers over the link. Adding rules for “a:visited” or “a:active” will (respectively) define link states that activate when the browser can see a page in the user’s history, or when the mouse button is down.

Tags: , ,
Posted in Web Design |

Buttons that link to URLs

Tuesday, October 14th, 2008

For your assignment to create Flash navigation for an otherwise standard HTML/CSS site, you’ll need buttons that link to various pages. The following example is for a button with the instance name “menuBtn” that will link the user to the index.html (home page).  This example assumes all of the files are in the same folder: the swf; index.html; and all additional HTML pages.

Basically, you create a function called handleMenuLink (and for additional buttons, you need to rename the function for each button). The function detects if the menuBtn is pressed, creates a variable called “request” that holds the link, and then opens the link in the same window.

Additionally, there is an event listener for menuBtn that listens for the click, and calls the handleMenuLink function.

Things you need to customize for additional buttons: all references to the instance name (menuBtn); the URL; and function names in the function and event listener.

function handleMenuLink(pEvent:MouseEvent):void
{
if (pEvent.target == menuBtn)
{
var request:URLRequest = new URLRequest("index.html");
navigateToURL(request, "_top");
}
}
menuBtn.addEventListener(MouseEvent.CLICK, handleMenuLink);

Tags: , , , , ,
Posted in Interactive Design |