Changing the Colour of Text Links (Full Version)

All Forums >> [Web Development] >> Microsoft FrontPage Help



Message

Andy Towner -> Changing the Colour of Text Links (12/19/2001 6:16:49)

I am designing a site and want to use simple text links to move between pages. However, I would like these text links to change colour when the mouse is passed over them. I know I can do this using the Mighty Mouseover Machine and using graphics with the same colour background as used on the site but I am wondering whether I am making things too complicated. Is there an easier way of doing this?

I have discovered a javascript which will create this effect but it only works on Internet Explorer.

I would be grateful for any help please.





abbeyvet -> RE: Changing the Colour of Text Links (12/19/2001 6:46:07)

If you absolutely must have the hover effect in Netscape you have no alternatve other than using graphics of your text since Netscape does not support mouseover effects on text.

The best way to do it without using images is to use CSS

Put this in the head of your page:

<style type="text/css">
A:link {color: #000000; text-decoration: none;}
A:visited {color: #808080; text-decoration: none;}
A:hover {color: #990000; text-decoration: underline;}
</style>

You can change the colour and underline styles to suit yourself. The above is an embedded style sheet - it will need to be in the head section of any page you want the effect on.

If you only want the effect on some links - rather than all the links - on a page you will need to use a 'class' for the above. So it would be amended to:

<style type="text/css">
A.classname:link {color: #000000; text-decoration: none;}
A.classname:visited {color: #808080; text-decoration: none;}
A.classname:hover {color: #990000; text-decoration: underline;}
</style>

and you would need to amend the links where you want the effect accordingly, eg:

<a href="thepage.htm">Link Text</a>

would become

<a class=classname href="thepage.htm">Link Text</a>


If you are using this effect throughout your site you may want to look at using an external style sheet instead. More here: http://www.outfront.net/articles/css1.htm




Katherine

++++++++++++++++++++++++
www.inkkdesign.com

"Dogs have owners, cats have staff"
Meeeooow!



Andy Towner -> RE: Changing the Colour of Text Links (12/19/2001 11:42:39)

Many thanks. That is just what I wanted.

I had a look at your link and have managed to change the background colour on each hyperlink when the mouse is passed over. However the colour change is limited to the length of the text of the hyperlink. Is there a way of extending the background color change to include the whole of the cell which contains the hyperlink? This would enable me to create a table of say 10 rows, each of which would change colour when the mouse was passed over it.




abbeyvet -> RE: Changing the Colour of Text Links (12/19/2001 11:52:06)

Wouldn't it be nice? But sadly no, not possible.

You can do this (sort of) by changing the cell background colour on mouseover using DHTML but it will only work in NN6, not earlier versions of NN. I ahve not tried it out to see what actually appears in early version of NN but I have a feeling it might be baaaad, but perhaps not.

Here is how it is done anyway if you want to give it a whirl:

http://www.dhtmlshock.com/text-effects/CellBackground/default.asp




Katherine

++++++++++++++++++++++++
www.inkkdesign.com

"Dogs have owners, cats have staff"
Meeeooow!



Andy Towner -> RE: Changing the Colour of Text Links (12/20/2001 8:09:28)

Thanks Katherine. I have created a simple menu using DHTML which appears not to have any adverse effects in older versions of Netscape. Will now transfer into my main site.

Thanks for your help and Merry Christmas




Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625