Changing button images (a:hover) with CSS.

[g.nencini]

I'd like to change the images of buttons (a:hover) using CSS instead of javascript.
I've seen times ago a thread about this problem, but i'm not able to find it again.
Thanks for help - Giovanni

[paulm]

Hi Giovanni,

I think the thread you've seen was the old (archived now) css-buttons support thread).

The problem with hovering buttons is that IE (<= 6.x, don't know about v7) does not support input button hovering.

A way around this problem is to wrap input buttons into <a>'s, and then, to prevent it to become a link that the browser will try to follow, set the href to "javascript:void(0);"

An example of the HTML code is:

<a href="javascript:void(0);"><input type="submit" /></a>

[paulm]

Obviously there is still some js left, but I assume that little piece of js is acceptable?

[paulm]

Hmmmm.... I read about this a javascript:void(0) wrapper idea somewhere, but I never got to testing it. Today I decided to run a little test, and although it allows styling the input buttons nicely, there is one "minor" problem I ran into:
the input buttons do not work anymore!

Gonna do some more testing, but I have doubt if I will find a better solution than the exisiting js (other than dropping IE support ;-) )

[g.nencini]

I think I must explain better because ... I'm making some confusion!

The target is to have a button that change shape in a:hover.

To show a button zc use the function zen_image_button(.......).
If I want use CSS (admin->configuration->layout settings->CSS buttons=yes) is called the function zenCssButton(....) that do not work well fo all the buttons, because work well only in the $type = 'submit', when it is inside a FORM block.

The button "Tell a friend" is inside a FORM block, but the ACTION is for "add to cart", and it is not possible to insert a FORM block inside another FORM block.

So I'd like to have simply a situation as

.myclass a:link{... img1.gif...}
.myclass a:hover{... img2.gif...}

and after... I go in confusion because I don't know how to substitute the zen_image_button(.......) function with something else.