PDA

View Full Version : Changing a:link CSS style using Javascript

matej_ice
09-09-2002, 07:47 PM
Hi, I'm trying to change the a:link color of an element in a menu. I'm trying to use javascript to change the property, but I do not know the Javascript defiention for the a:link style... ie.

Css: font-size
JavaScript: fontSize

If anyone knows the correct definetion in Javascript, it would be graetly appreciated. Thank you in advance.
umm
09-09-2002, 08:54 PM
Have you tried the css hover property ?

a:link {
color: blue;
background-color:#ffffff;
}

a:hover{
color:red;
background-color:#fafafa;
text-decoration:none;
}

Even though you won't get the effect in all browsers, this is easier than javascript.
matej_ice
09-09-2002, 09:11 PM
Yes I tried it... I am already using a:hover, but what I need to do is change the properties of a:hover when someone rolls over a table cell. It's for a DHTML menu.. I figured out how to do it my replacing the class name of the CSS style, but I figure there must be a more elegant way to do this. Thank for your help anyway.
des55
09-09-2002, 09:19 PM
LI {
margin-left: -20px;
}
umm
09-09-2002, 09:26 PM
this works in IE5.5 and Moz1.0 but not for a link in Opera 6 and not at all in nn4.7.

<a href="foo.html" onmouseover="this.style.color = 'red';"
onmouseout="this.style.color = 'black';">Mouse over this text</a>

This works in IE5.5, Moz1.0 and Opera 6

<h3 onmouseover="this.style.color = 'red';"
onmouseout="this.style.color = 'black';">Mouse over this text</h3>

hth
hairynugs6382
09-09-2002, 11:53 PM
hey umm! would that work just like inline styles being able to put new statment after ; example:

<a href="blah.html" onmouseover="this.style.color='lime'; this.style.background-color='ivory'; this.style.font-size='14px'; ....">some link</a>

Can this be done? And could you also do it this way if u wanted to use classes? example:


<html>
<head>
<style>
.link_color{color:blue;}
.hover_color{color:red;}
</style>
<head>
<body>
<a href="blah.html" onmouseover="this.className='hover_color'" onmouseout="this.className='link_color'">some link</a>
</body>
</html>
umm
09-10-2002, 04:47 AM
I didn't offer much help. The only thing different was no need to explicitly declare a style sheet with classes and then replace them as you did. I think css is probably the easiest solution though (rather than using javascript functions etc)
Quiet Storm
09-10-2002, 05:13 AM
Originally posted by hairynugs6382
<a href="blah.html"
onmouseover="this.style.color='lime'; this.style.background-color='ivory'; this.style.font-size='14px'; ....">some link</a>


this.style.background='ivory';