...

View Full Version : I need help making text rollover



eXtreme_
12-13-2006, 07:26 AM
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

Majoracle
12-13-2006, 08:36 AM
<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.

eXtreme_
12-13-2006, 09:51 AM
<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 :)

ronaldb66
12-13-2006, 11:54 AM
Did you people ever hear about the :hover pseudoclass? It's unnecessary, overly complicated and ugly to use JavaScript for this.

whizard
12-13-2006, 12:53 PM
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.




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



<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:



div:hover
{
background-color:#FF0000;
}


But IE doesn't support the :hover pseudo class on anything except <a>....

Dan



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum