dreamweaver vs frontpage - Dreamweaver 8

Resolved · Low Priority · Version Standard

Thu 7 Dec 2006, 10:00 Delegate Kean said...

Kean has attended:
Dreamweaver 8 Intermediate course

Dreamweaver 8

Hi, I recently attended the Dreamweaver 8 course in London. On the course we

took a lot of information in, all in one day. I have been trying to remember
how to do something that I was taught on the course but cannot. Please can
you tell me the procedure to make a link in a menu change colour when the
mouse hovers over it. I have a table with 10 rows and I want the whole block

to change colour when I hover over it. Hope you can help me.
Regards, Kean

Thu 7 Dec 2006, 11:18 Trainer David said...

RE: Dreamweaver 8

Hi Kean

I will assume that you are using a CSS. If this is the case you will just need to place the following piece of code into the CSS and just change it to meet your needs, i.e. the colours and fonts that you want to use.

a:hover {
color: Your Colour here;
text-decoration: underline;
background: Your background here;}

The task of getting the whole table column to change colour when you hover the mouse over it, is slghtly more complex and has to be done in two stages. The first stage is to add some code into the CSS. The code that you need will define the mouseOver and mouseOut events, by this I mean when the mouse is over the table and when the mouse moves out of the table. The code is shown below:

.over
{ border-style: solid;
border-color: Your colour here;
border-width=thin
bgcolor: Your colour here }

.out
{ border-style: solid;
border-color: You colour here;
border-width=thin
bgcolor: Your colour here }

The next stage is to write the html code. Within the code for the table you are going to make calls to .over and .out and this should mean that when the mouse moves in and out of the table the columns will change colour. The code that you need is as follows:

<html>
<head>
<title>Your table colours</title>

</head>

<body bgcolor="Your colour">

<table width="150" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="set default colour" onMouseOver="this.className='over'" onMouseOut="this.className='out'">
</td>
</tr>
<tr>
<td bgcolor="set default colour" onMouseOver="this.className='over'" onMouseOut="this.className='out'">
</td>
</tr>
<tr>
<td bgcolor="set default colour" onMouseOver="this.className='over'" onMouseOut="this.className='out'">
</td>
</tr>
<tr>
<td bgcolor="set default colour" onMouseOver="this.className='over'" onMouseOut="this.className='out'">
</td>
</tr>
</table>

</body>
</html>

If you are not using a seperate CSS, you can put all of the CSS into <style></style> tags at the top of your HTML document, before you actually start writing any HTML.

I hope tis helps, if this does not quite match what you wanted, please get back to me and I will try and assist further.

David