How to Make Your Links Change Colour When the Mouse Hovers Over It Using Dreamweaver

Creating Mouseover / Rollover Effects


How to Make Your Links Change Colour When the Mouse Hovers Over It Using Dreamweaver: Creating Mouseover / Rollover Effects

by Christopher Heng, thesitewizard.com

I'm often asked by visitors how I create the mouseover or rollover effects for the links on thesitewizard.com. For those who don't know what I'm talking about, move your mouse so that the pointer hovers over this link to the Dreamweaver Rollover / Mouseover tutorial. Notice that the link changes colour ("color" in US English) with the words becoming black and the background taking on a shade of green (or at least it does at the time I wrote this tutorial).

This article describes how you can create such an effect for the links on your website.

Preliminary Matters

How to Change the Mouse-Over Colour of All Links

The following procedure creates the highlighting effect when your visitor's mouse hovers over any link on your web page.

  1. Using Dreamweaver, open the web page containing the link you want to modify.

  2. Click "Format | CSS Styles | New..." from the menu. That is, click the "Format" menu at the top of the Dreamweaver window. When a menu appears, click the "CSS Styles" line. This will expand a submenu. Click the "New..." item in that submenu.

  3. A dialog box entitled "New CSS Rule" will appear. Click the arrow beside the drop down box under "Selector Type". A drop down box will appear. Click the line "Compound (based on your selection)".

  4. Click the drop down box under "Selector Name" to expand it. Click the "a:hover" line in the list that appears. If you don't see it, scroll down till you find it. Dreamweaver will fill the field with the words "a:hover". (If it doesn't, it means you didn't click the correct spot in the drop down box. Try again.)

  5. In the "Rule Definition" section, you are given a few choices. If you want the rollover effects you are creating here to apply only to one web page, that is, the page you're modifying, select "(This document only)" from the drop down menu. If you want it to apply to all the web pages on your website, and you've used my main Dreamweaver tutorial series to create your site, you should be able to see a line that says "twoColLiqLtHdr.css" in the drop down menu. This is the main CSS style sheet for your entire site that Dreamweaver created for you in the first chapter. Select it.

    (A CSS style sheet contains the rules governing the appearance of your website. It is created behind-the-scenes for you by Dreamweaver. If you want more information, see the article "What is HTML, CSS, JavaScript, PHP and Perl?".)

  6. Click the "OK" button.

  7. A new dialog box, entitled either "CSS Rule Definition for a:hover" or "CSS Rule Definition for a:hover in twoColLiqLtHdr.css" (the exact title is different depending on whether you chose to apply to rule to your entire site or just the web page you're changing), will appear.

    The dialog box will give you the appearance of links when a mouse is hovering over them. In particular, you can change the font (the "Font-family" field), the font size (the "Font-size" field), whether you want the link to appear in bold (the "Font-weight" field) or italics (the "Font-style" field), have an underline (the "underline" checkbox), etc. You can also change the colour of the text itself, using the "Color" box (just click the square box beside "Color" to open the colour picker, from which you can choose a different colour for the text).

    To change the background colour of the link, that is, the colour that appears underneath the text, click the "Background" line in the leftmost column of the dialog box. When you do that, you should be able to see a "Background-color" square box which you can click to reveal the colour picker.

  8. When you've finished changing the hover colours, click the "OK" button. The dialog box will disappear. Remember to save your changes by clicking "File | Save All" from the menu. Notice I said to use the "Save All" item from the File menu and not the usual "Save". That is because when you made those colour changes, Dreamweaver modified your CSS file as well, so simply clicking "File | Save" will not preserve all your changes.

How to Change the Default Colour of Your Links

The above procedure changed only the "hover" or "mouseover" colours. If you want to change the default colour of your links, that is, from the default underlined blue text, take the same steps as you did previously. However, instead of clicking "a:hover" from the "Selector Name" menu, click "a:link". The rest of the procedure is the same.

How to Change the Default Colour of Visited Links

The selector a:visited governs the appearance of a link that has been clicked. Contrast, for example, a link that has not been clicked before, such as this one to thesitewizard.com's site map (unless you've already been there before), to another that you've already visited, such as this one. Notice that the colours are different.

To change the colour of a visited link, once again use the same procedure as before, except that you should choose "a:visited" instead of "a:hover" from the Selector Name drop down box.

Link Colours and Usability

Although it's very easy to change the colours of your links, be aware that the default appearance of underlined blue text for normal links and underlined purple text for visited links has many advantages because it is well understood by all web surfers.

When your visitors can easily recognize links, both in their unused state as well as in their clicked state, it improves the usability of your website. Whenever they come across text decorated in such a way on your site, they immediately know that it is a clickable link that they can use to get more information. If they see underlined purple text, they will also know that they have already checked out that page. Your visitors can thus use your website efficiently and effectively to accomplish whatever it is they want to do there.

When you change the default colours to some non-standard colour scheme, you automatically reduce the usability of your website. Some of your visitors may not realize that some of the text on your web page are actually links they can click for more information (they may think that you're using colours for emphasis or to make your page look nice). If you remove the purple indicator that accompany clicked links, you also increase your users' frustration and irritation at your site, since they won't be able to know which pages they've already visited.

I'm not saying that you cannot ever change the colour scheme for links on your site. There are obviously situations where it may be necessary, particularly if your site's design is such that underlined blue text sticks out like a sore thumb or is invisible due to the colour of the background. However, bear in mind what you lose when you change those default colours. My recommendation is to only change them if you really need to. That is, just because Dreamweaver gives you the power to do it, doesn't mean that you must do it. Balance your instinct for a beautiful design with the need for usability.

Here are things that you can do to improve the usability of your links if you really have to change the default colours:

This article can be found at http://www.thesitewizard.com/dreamweaver/mouseover-rollover-effect-dreamweaver.shtml

Copyright © 2009-2014 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.

Related Pages

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Make Your Links Change Colour When the Mouse Hovers Over It Using Dreamweaver: Creating Mouseover / Rollover Effects





Home
Donate
Contact Us
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.