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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I need help making text rollover

    my site is

    http://www.extremebodybuilding.net/index.php

    and the navagation bar on the left i want the text to rollover like this one

    http://www.infernofx.net/community/portal.php?

    here is the HTML i am using for the links right now

    <div class="smallfont"><a STYLE="text-decoration:none" href="http://www.extremebodybuilding.net/index.php" ><b>» Home</b></a></div>

    What can i add to make the text rollover when the mouse is over it like that forum?

    thanks

  • #2
    Regular Coder
    Join Date
    Nov 2006
    Posts
    246
    Thanks
    13
    Thanked 26 Times in 24 Posts
    <div class="smallfont" onMouseOver="this.style.backgroundColor='#FF0000';" onMouseOut="this.style.backgroundColor='transparent';"><a style="display:block; text-decoration:none" href="http://www.extremebodybuilding.net/index.php" ><b>» Home</b></a></div>

    Change #FF0000 (red) to whatever color you want the background to change to when they rollover.

    Hope that helps.
    Last edited by Majoracle; 12-13-2006 at 07:46 AM.

  • #3
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Majoracle View Post
    <div class="smallfont" onMouseOver="this.style.backgroundColor='#FF0000';" onMouseOut="this.style.backgroundColor='transparent';"><a style="display:block; text-decoration:none" href="http://www.extremebodybuilding.net/index.php" ><b>» Home</b></a></div>

    Change #FF0000 (red) to whatever color you want the background to change to when they rollover.

    Hope that helps.
    worked perfect

    thanks alot

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hover?

    Did you people ever hear about the :hover pseudoclass? It's unnecessary, overly complicated and ugly to use JavaScript for this.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #5
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    Yes, using CSS for this would be more appropriate.

    If you would like to do this, here is how you can:

    Create a class for your the links that you use in the menu in your CSS file.


    Code:
    a.menu
    {
    display:block;
    text-decoration:none;
    }
    
    a.menu:hover
    {
    background-color:#FF0000;
    }
    Then, all you need in your page to create the effect is

    Code:
    <div class="smallfont">
     <a class="menu" href="xxx">
     </a>
    </div>
    As you can see, a much nicer result, considering that you can cut out all that extra code on each link,which really can add up....

    In a perfect world, you could code it like this:

    Code:
    div:hover
    {
    background-color:#FF0000;
    }
    But IE doesn't support the :hover pseudo class on anything except <a>....

    Dan
    Last edited by whizard; 12-13-2006 at 12:07 PM.
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION


  •  

    Posting Permissions

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