Text with rollover

[cantfindausername]

Hi,

I would like to know if its possible to have a normal piece of text, but to have a rollover effect on it. Mainly for use in a navigation bar.

Anyone know how this would be done?

Thanks,
Ant

 

[Vragabond]

Basically, all kind of rollovers (that I can think of), can be done with the "normal piece of text". Would you care to explain in more detail and provide us with some code or a link to your page?

 

[cantfindausername]

Its ok. I didn't realise that the onMouseOver command would work with plain text.

i've done a few searches and got what I need now.

Thanks anyway.

 

[Vragabond]

That does not seem like a perfect solution though, knowing that css :hover class can help with a lot less code and a lot more flexibility.

 

[rpgfan3233]

LOL

And here I was thinking that something complicated was needed:

CSS-

div.rollover a {
color: #000;
text-decoration: none;
cursor: text; /* use the i-beam when the link is hovered over */
}
div.rollover a:hover {
color: #fff;
background-color: #000;
}

X/HTML-

<div class="rollover">

<!-- the following should appear as just text. the blur() method is so it doesn't receive focus (no dotted lines). the "return false" is to prevent navigation (remove it if navigation is required). -->

<a href="#" onclick="blur(); return false;">Your text</a>
</div>

The code above assumes that "normal text" refers to non-linking text. If it is supposed to link to another page, feel free to mess with the cursor part or remove it completely. Of course, the onclick attribute invokes scripting, which means if someone has scripting (usually JavaScript) disabled, not much can be done about the extra appearance of the link (the dotted lines around the link and the possibility of navigation away from the page).