Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Sep 2002
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Changing a:link CSS style using Javascript

    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.

  • #2
    umm
    umm is offline
    Regular Coder
    Join Date
    Sep 2002
    Location
    Antipodes
    Posts
    106
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    Sep 2002
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Yes I did... not what I need to do though...

    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.

  • #4
    New Coder
    Join Date
    Jun 2002
    Location
    Virginia
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts

    got it!

    LI {
    margin-left: -20px;
    }

  • #5
    umm
    umm is offline
    Regular Coder
    Join Date
    Sep 2002
    Location
    Antipodes
    Posts
    106
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #6
    Regular Coder
    Join Date
    Aug 2002
    Location
    Sacramento, California
    Posts
    132
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>
    Last edited by hairynugs6382; 09-10-2002 at 01:00 AM.
    Hairynugs


    Simple is best.

  • #7
    umm
    umm is offline
    Regular Coder
    Join Date
    Sep 2002
    Location
    Antipodes
    Posts
    106
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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)

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Location
    Beyond Lament
    Posts
    424
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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';
    Quíet Storm Designs ~ Art is not what you see, but what you make others see.
    · the Storms· || ·Ultraviolent Winter· || ·Was Einstein Wrong?· || ·It´s About Time!·


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •