PDA

View Full Version : What's this "rollover" thing?

SangoNo
07-25-2004, 08:08 AM
Okay. I really hope I posted this in the right forum! Could someone PLEASE go to www.mugglenet.com and tell me what that effect is called on the left. If you go to that page, look on the left, there's about 20+ links. Whenever you roll your mouse over it it turns white. Now, I know how to make my text links change colors when I hover the mouse over them. But this is different. It's like the whole "block" changes colors. I looked in the "view source" and tried to find the code...but it didn't work. Everything showed up but the hovering wasn't affective. Maybe I need to download some "hover" file? Any help here is greatly appreciated. Even if you can just tell me what the affect is called so I can search for it on Google would help alot!

Thanks!!
JustOneSyllable
07-25-2004, 11:42 AM
You could try http://www.dynamicdrive.com. They usually have codes for that.
smartie5602
07-25-2004, 02:15 PM
I studied their code for a but and they have done the following for their links:

They only wanted some of their links to have the white background. The links they wanted to be like this, the ones in the menu, have been given the class="menulink" attribute. This is specified in the style section of their header (it could also be put in a stylesheet). They have used the following style:
<STYLE type="text/css">
<!--
A:link {color: #99ccff; text-decoration: none;}
A:visited {color: #99ccff; text-decoration: none;}
A:active {color: gray; text-decoration: none;}
A:hover {color: #023868; text-decoration: none;}
A.menulink {display: block; width: 138px; font-family:verdana; font-size:11px; BORDER: none;}
A.menulink:hover {background-color:#F7F7F7;}
-->
</STYLE>

The specifications under the a:menulink style will only show if the <a> tag contains class="menulink". For example:

<a href-"blah.html">blah</a> would show as the regular specified link colours.
<a href="blah.html class="menulink"> would show with the attributes including the block, which is the display block part and the background hover part, i think.

xxLiz
SangoNo
07-26-2004, 03:05 AM
Hey thanks so much for the help! I put everything you posted Smartie for my own site and when I hoved my cursor nothing lights up. Am I to download a file in order to enable this "hovering" thing? If so, do you know where I could get it...or atleast know what it is called so it will make searching for it easier? I tried that dynamicdrive site but I couldn't find it there. Thanks for all the information and any other help you're able to give!
smartie5602
07-31-2004, 06:52 PM
I created this simpler version of the code. Remember to put class="menulink" in the <a> tag of all the links you wish to look like this. Basically, the style cose states that all links are blue (0000ff), and turn green (00ff00) when hovered.

When the menulink class is added, these links will also have a red (ff0000) background on them, which is 138px wide and will be in verdana size 11.
In your code you can replace the word menulink with anything you want, and change the attributes of it too.

<html><head>
<STYLE type="text/css">
<!--
A:link {color: #0000ff; text-decoration: none;}
A:visited {color: #0000ff; text-decoration: none;}
A:hover {color: #00ff00; text-decoration: none;}
A.menulink {display: block; width: 138px; font-family:verdana; font-size:11px; BORDER: none;}
A.menulink:hover {background-color:#ff0000;}
-->
</STYLE>
</head><body bgcolor="ffffff" text="000000">

<a href="test.shtml" class="menulink">This link has the class properties</a>
<a href="test.shtml">This link does not.</a>
</body></html>

xxLiz