1 / 7

Using Anchor Links with Hover Effects

User-Assistance Storyboard WRA 210, SS08. Using Anchor Links with Hover Effects. Rachael Hodder Dave Johnson Alyson Lowe. Introduction.

shira
Download Presentation

Using Anchor Links with Hover Effects

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. User-Assistance Storyboard WRA 210, SS08 Using Anchor Links with Hover Effects Rachael Hodder Dave Johnson Alyson Lowe

  2. Introduction As web authors, it is important that we design our sites efficiently. In so doing, we create websites that are faster and allow for more convenient browsing. With that goal in mind, there are many techniques available that an assist in streamlining a websites ease of use. One such tool that no decent website should ever be without is the page anchor. Used to refer a reader directly to specific locations on a web page, anchors speed up travel within the page by providing a quick and painless alternative to long scroll bars. Page anchors can be found on just about any website featuring lengthy pages. For example, Wikipedia entries following the single page per topic format can sometimes take on a life of their own, evolving into rather lengthy and complex data dumps. By adding page anchors that correspond with specific menu items that are contained within the document, Wikipedia users can quickly, and efficiently "pop" down to a select portion of the page document with a simple click. Page anchors are also useful in situations that require several large images to be displayed on the same page. The aim of this tutorial is to show you how to create and use internal anchor links, and at its conclusion, will explain additionally how you can jazz up those links with a hover effect.

  3. Identifying the most useful locations for anchors and anchor links Step One: • Approach the question of where to place links based on perceived user needs • Think semantics, this is very important • Understand the difference between anchor and link

  4. Step Two: Creating an anchor using semantic HTML • Place anchor using <a name="..."> • Replace the "..." with your preference of anchor name • If using multiple anchors on page, it becomes even more important to be aware of semantics This is a example of a site anchor. Notice how the web author has named the anchor according to the heading to which it is attached. Other ways to name the anchor refer to the location of the anchor.

  5. Step Three: Creating a hyperlink directing to your anchor • At your chosen link location use the code: <a href="#...“>This is an anchor link</a> • Name your link • Note: this operates same as a regular link would; the difference is that it is internal, linking within the page Here is the way that your link should look: notice how the link is part of a navigation list. Below, is the bare code used to make the link.

  6. Step Four: Jazz it up! • Now that you've created your anchor link, you can draw attention to it • Adding a "hover link" will make it more noticeable • Simply add the code: a:hover {background-color: [color]; color: [color];} • Choose your color and enjoy! Here is the link with the hover effect. The hover effect makes it so that the background color of the link changes with mouse-over. Below, is the CSS that makes the hover effect.

  7. FAQ / Troubleshooting • How you know you completed task • Alternative ways to do it • What could go wrong? • How might you fix it?

More Related