Link backround

I want to make a link, so that when you go over it with your mouse, it gets a
coloured backround box and the link itself changes to a different clolour. To
see what I mean, go to forums.invisionpower.com and hover your mouse on the
Help, Search, Members, Calendar, and the Live Chat links.

What code should I put in my html?

Thanks in advance,

Sam

Sam Granger wrote:

I want to make a link, so that when you go over it with your mouse,
it gets a coloured backround box and the link itself changes to a
different clolour. To see what I mean, go to
forums.invisionpower.com and hover your mouse on the Help, Search,
Members, Calendar, and the Live Chat links.

What code should I put in my html?

Not into the HTML. Into the CSS. Here is an example that I use:

a:hover { color: #FF0000; background: #FFEEEE; }

It makes hovered links use bright red text & a pink background. Here is a page
that uses this:
http://www.barry.pearson.name/articles_papers.htm

There are many variations on this, using images, etc. You have more options
than you can use! I'm sure that others here will help you out.

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/

You would put CSS.

Its kind of advanced stuff, but here is a skimmed down versio of how they did
that... I won't get too much into details because you can teach yourself all
the complex stuff. First add the following code to the head section of your
page, and read the comment tags carefully so you'll understand whats its doing.

<style type="text/css">

/* first lets make all of the links within our menu bold */
#menulist a { font-weight: bold; }

/* now we'll set the colors/decoration of those links within our menu */
#menulist a:link { color: #357AB5; text-decoration: none; }
#menulist a:visited { color: #357AB5; text-decoration: none; }
#menulist a:hover, a:active { color: #000000; text-decoration: underline; }

/* now lets make a litle box to conain the menu */
#menu {
height: 26px;
width: 542px;
background-color: #ffffff;
border: 1px solid #357AB5;
margin-left: 10px;
margin-top: 10px;
float: left;
}

/* and the menu itself */
#menulist {
border: 0;
margin: 0;
font-family:Arial, Helvetica, sans-serif;
color: #000000;
text-align: center;
}

/* additional stuff to make the links look kinda like blocks */
#menulist a {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 2px;
padding-right: 2px;
margin: 0;
border: 0;
width:50px;
white-space:nowrap;
background-color: #fff;
text-decoration: none;
text-align: center;
}

/* and thats it! below is the HTML, you'll need to add
two div tags around your links or they won't modifed by the CSS */
</style>

Here's the HTML:

<div id="menu">
<div id="menulist">

<a href="#">just</a>
<a href="#">a simple</a>
<a href="#">CSS</a>
<a href="#">navigation</a>
<a href="#">example!</a>

</div>
</div>