Jump to content

CSS Image rollover using inline CSS

- - - - -

This topic has been archived. This means that you cannot reply to this topic.
2 replies to this topic

#1
CygnetGames

CygnetGames

    Programmer

  • Members
  • PipPipPipPip
  • 119 posts
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.)

#2
Guest_Jordan_*

Guest_Jordan_*
  • Guests
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.

#3
CygnetGames

CygnetGames

    Programmer

  • Members
  • PipPipPipPip
  • 119 posts

Jordan said:

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...