Mouseovers/Rollovers

[Sheik]

Where can I get some mouseovers? You know, like the ones EoFF is using, when over a link, two bars show up.

I'd like to know how to get dotted lines as mouseovers. Where? Help, plz?

Thanks in advance.

[Loony BoB]

I think it's java, although I'm not really sure.

[Pancaek]

They're CSS. Either put this in the head tag of your site:

<b>&lt;style type="text/css">
&lt;!--

a:hover &#123; text-decoration: underline overline; }

-->
&lt;/style></b>

or put this in each link:

&lt;a href="http://eyesonff.com/forums" <b>style="text-decoration: underline overline;"</b>>

If underline overline doesn't work, try overline underline. It's been a long time since I've used CSS.

[Burtsplurt]

I don't think you can get a dotted line using CSS. I'm not sure that you can do it using Javascript either, but I don't know much about Javascript.

Edit: You can do the dashed underline thing by using the following CSS code:

a:hover {border: 1 dashed; border-top-width:0; border-left-width:0; border-right-width:0;}

[Sheik]

Oh right.. CSS, I've come across that before. Anyone know other CSS tricks?

Btw, thanks again.

[Pancaek]

http://lissaexplains.com is where I started learning CSS. http://htmlgoodies.com is better, though. http://w3.org is the leading authority on all things web design related, but it's very technical.

[Sheik]

Thank you so much Skye-chan! The sites you put up were very helpful.

[Advent Child]

(style type="text/css")
a:hover { border-top: 1; border-left: 1; border-right: 1; border-bottom: 1; border-style: dotted }
(/style)

<div style="border-top: 1; border-left: 1; border-right: 1; border-bottom: 1; border-style: dotted">it should look like this.</div>

You can just say "border-width: 1" instead of all of the "border-top" type things, but I made it that way so you could just ditch the border on certain sides, since i wasn't sure if you wanted just overline underline.

oh, and of course, change the brackets to triangle-brackets.

[chadmonkey]

You can javascript with css's for a very simple, effecient and powerful way to change looks on a web page. For instance, to change the links in a nav bar(like you mentioned), you would create two different classes in your style sheet, and they would be identical to each other, except that you would have the borders for the top and bottom set in one of the classes(and make sure you name the two classes different, like "navlink" and "navlinkhighlight"). Then in your html, create the table to hold the links, and make sure to name each nav cell individually. Then you would add the :bou::bou::bou::bou::bou::bou::bou:Over and :bou::bou::bou::bou::bou::bou::bou:Out attributes to your table cell. Then you would write two functions, like "highlightCell()" and "noHighlightCell()". In the "highlightCell()" you would change the cell's class to "navlinkHighlight", and do the opposite in the other method. Now, whenever the user puts their mouse over the table cell, it will change the stylesheet class to the highlighted version, and it will go back to normal when the mouse is moved away. You can also create images for all of these and swap images, but it's considered poor web design as the user has to keep downloading these images and there's really no need for it with css's and javascript.

If you need anymore help please let me know. This is the type of stuff I do for a living and I don't mind lending a hand. And if you need a good resource, check out www.webmonkey.com. They cover everything web related and have very easy to follow tutorials on just about everything web related.

Hope this helps.