varying hyperlink effects on one page

  • Thread starter Thread starter Guest
  • Start date Start date
G

Guest

I have several types of text hyperlinks on one page, all
on differing backgrounds. I would like their behaviour
(alink, vlink etc) to be different aacording to their
background. eg blue link on white background and white
link on blue background.
I have an external css for the page in which the
underlining (text decoration) is switched off.
I am using FP 2003.
Can anybody help please?
 
Create a pseudo link style for each color as a class, and apply the class to you links

a.white {color: white; text-decoration: none}
a.white:link {color: white; text-decoration: none}
a.white:visited {color: white; text-decoration: none}
a.white:hover {color: white; text-decoration: underline}
a.white:active {color: white; text-decoration: none}

And apply the class to the links
<a href="yourlink.htm" class="white">


--




| I have several types of text hyperlinks on one page, all
| on differing backgrounds. I would like their behaviour
| (alink, vlink etc) to be different aacording to their
| background. eg blue link on white background and white
| link on blue background.
| I have an external css for the page in which the
| underlining (text decoration) is switched off.
| I am using FP 2003.
| Can anybody help please?
 
How are the links placed on the page?
Are they in separate tables or divs??

If so assign the tables or divs a class name:
class="name1"
and then set the classes in your style sheet.

..name1
{
background-color: white;
}
name1 a:link{
text-decoration: none;
color blue;
}
name1 a:visited{
text-decoration: none
color: red;
}
name1 a:hover{
text decoration: underline;
color: blue
}

and so on.

hth
 
Hi,
assuming you have a table cell/div etc create an id with link styles
defined,eg

#blueDiv{
background-color:blue;
}
#blueDiv a{
text-decoration:none;
color:white
}
#blueDiv a:hover, #blueDiv a:active,#blueDiv a:focus{
color:red;
}

You could add a visited style if you wanted. Then id the table cell
<td id="blueDiv">blue background white links</td>
repeat the above for the white background. From an accessibility standpoint
if you make hover active and focus styles the same your hover effects will
work for people that can't use a mouse - ie use the tab key to go from link
to link
 
Back
Top