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.
I'm assuming that you already have a website. If this is not the case, please read the article How to Start / Make / Create a Website: The Beginner's A-Z Guide instead.
You should already know how to design a website using Dreamweaver and in fact, have already created one. This tutorial is intended to answer a specific question and does not replace the need for a systematic Dreamweaver tutorial like those on thesitewizard.com for CS6, CS5.5, CS5, CS4, or the earlier CS3. If you haven't created anything yet, please start with one of those tutorials before reading this article, otherwise you may have a difficult time following the steps given below.
For those not using Dreamweaver, please see one of the following tutorials instead:
Creating a Rollover or Mouseover Effect using KompoZer — for those using KompoZer or Nvu.
How to Make Your Links Change Colour When the Mouse Hovers Over It Using CSS — for those who know code directly in HTML and CSS.
This article deals with changing the appearance of normal links in the main body of your web page. If you are looking for information on how to create a button menu with rollover effects like what you see in the left column of thesitewizard.com, please read the main Dreamweaver tutorials instead. For example, if you use CS4, see the chapter on How to Add a Navigation Menu Bar to Your Website in Dreamweaver CS4. Dreamweaver CS5, CS5.5 and CS6 users will already have such a button menu built into the layout they select in the first chapter of those tutorials. An alternative method, if you don't want to follow the entire Dreamweaver tutorial just to insert a menu, you can also read the standalone tutorial How to Add a CSS Navigation Button Menu to Your Website with Dreamweaver which uses a different method to achieve approximately the same thing.
I should also mention that I only tested the procedure below with Dreamweaver CS4, since that was the latest version at the time I wrote the bulk of this tutorial. It should probably work the same way in the other versions of Dreamweaver.
The following procedure creates the highlighting effect when your visitor's mouse hovers over any link on your web page.
Using Dreamweaver, open the web page containing the link you want to modify.
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.
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)".
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.)
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?".)
Click the "OK" button.
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.
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.
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.
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.
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:
Try to make your links underlined. The underlining is a visual cue to your users that what they are seeing is a hyperlink. Not everyone will recognize this cue, though.
The hover or rollover colour changes can also help a bit to indicate that something is really a link. When your visitor moves his/her mouse over the text, highlight that piece of text by changing the background colour and making the text underlined.
Note that this will only work if your visitors happened to move their mouse over your links. Obviously, few people are going to be randomly flicking their mouse left and right across their monitor as they read your site, so this visual cue is not as effective as using the default hyperlink colour scheme. But every little bit helps.
This article can be found at https://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 https://www.thesitewizard.com/.
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 https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
