CSS Image rollover using inline CSS

[CygnetGames]

I have a button on my website that pushes down when you roll over the image - very simple, it's implemented like this:

p.random-game-button a 
  { background-image : url('images/random-button-up.jpg'); }
p.random-game-button a:hover 
  { background-image : url('images/random-button-down.jpg'); }

The problem is, I want to put this button on a Squidoo lens.

But Squidoo only lets you use inline CSS, so things get implemented like this:

<b style="font-weight:normal;color:#ff0000">red<\b>

So it's obvious how to style the hyperlink with the "up" image:

<a style="background-image:url(images/random-button-up.jpg)"><\a>

But does anyone know how to access the :hover pseudo class of the hyperlink using inline CSS? (To style the "down" image.)

Or is there an alternative way to implement an image rollover in Squidoo? (Sadly, javascript isn't supported.)

[Jordan]

I think that this may work:

onmouseover="this.style='background-image : url('images/random-button-down.jpg');'

So your code would look like this:

<a style="background-image:url(images/random-button-up.jpg)"  onmouseover="this.style='background-image : url('images/random-button-down.jpg')'"><\a>

Let me know if this works. I didn't test it.

[CygnetGames]

Originally Posted by Jordan

Let me know if this works. I didn't test it.

Thanks for the idea, but unfortunately it doesn't work.
Squidoo removes the "onmouseover" attribute as the contents of it are javascript, and they don't let people use javascript for security reasons.

I cross-posted this question on the squidoo forums but have only got a reply of "Hmm... I don't think so." so far.

This might be a bit of a puzzle...