Text Rollover and Link Rollover help

[runicaldeva]

I am designing a website with a bear/classic horror movie theme and there are a couple things that I would like to do to make it different and unique.

First thing is, when the mouse rolls over some text, I'd like it to turn from gray to red.

Second thing is, when the mouse rolls over a link, I want it to look like a bear has slashed over it. Simply put I want a graphic to appear over or at least behind the text when my mouse cursor is over it.

Any help with either of these things would be grand!

Thank you
West

[Twey]

The first can be achieved like this:


<!-- In the head: -->
<style type="text/css">
.red2grey {
color: grey;
}
.red2grey:hover {
color: red;
}
</style>



<!-- In the body: -->
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <span class="red2grey">Pellentesque urna.</span> Nulla facilisi...


For the background image, try:


<style type="text/css">
a:hover {
background-image: url('bearslash.png');
}
</style>
Note that I'm not sure if this will work.
Are we talking about an inline link or a navmenu where the link is in its own block-level element?

[runicaldeva]

It's an inline link...and as far as the text hover goes...I couldn't get it to work :(

[Twey]

I do beg your pardon... apparently IE doesn't support :hover except on <a>. Try this:

<span style="color:gray;" onmouseover="this.style.color='red';" onmouseout="this.style.color='gray';">MONKEYS!!!</span>

For the slash, this works (at least for Firefox):


<span onmouseover="this.style.backgroundImage='url(\'bearslash.png\')';" onmouseout="this.style.backgroundImage='none';">MONKEYS!!!</span>

[runicaldeva]

Hey! That first one worked great! The second one didn't work in IE but I'm sure I can figure something out, you've definitely helped alot! Thank you!

West.

[Twey]

This works:

<p>Hello there, <a href="blah.htm" onmouseover="this.innerHTML='<a href=\'blah.htm\'><img align=\'absmiddle\' src=\'bearslash.png\'/></a>';" onmouseout="this.innerHTML='bear';">bear</a> fans!</p>
Make sure the image is more or less the same size as the text, or odd things happen when onmouseout is called as soon as onmouseover happens.