input type=image , hover change 1

[1DMF]

hello,

I'm trying to apply a hover effect to an input button of type image.

I've tried

.classname:hover {
src:url('/images/imagename.gif');
}

but that doesn't work and i cant seem to find anything googling or searching W3.

is it possible and if so what is the correct syntax.

Thanks, 1DMF.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[feherke]

Hi

Nope. Just like you can not change the [tt]value[/tt], [tt]checked[/tt] or other property of an [tt]input[/tt] with CSS, you can not change neither the [tt]src[/tt].

Use [tt]input[/tt] [tt]type="submit"[/tt] with a [tt]background-image[/tt]. By the way, you know that Explorers prior 7 understand the [tt]:hover[/tt] only for [tt]a[/tt] tags.

Feherke.

http://rootshell.be/~feherke/

 

[1DMF]

hey feherke.

I came up with a brain wave, I made the src equal an image that was 1x1 transparent and then used BG images for normal state and hover, works a treat

Yes I know CSS hover states don't work < IE7 , but I am refusing to use JS for hover effects on this website, so anyone with a none CSS compliant browser will just have to put up with a static image or get a new browser



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[1DMF]

then I threw that idea away and went back to type=submit , non-css people need to see the button - d'oh!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[BillyRayPreachersSon]

You could have used an onmouseover in the input itself, which changed "this.src".

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[1DMF]

No I couldn't Dan , that JS! ;-)

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[BillyRayPreachersSon]

Indeed it is JS... but it's also a way of achieving what you want without the drawback of using background images.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[1DMF]

Do you think there is going to be any change to the input type=image to enable hover effects?

It seems odd that they have this input type to allow an image but not include a mechanism (without JS) to change hover state.

I ended up going for type=submit in the end so at least those with no CSS will see the button box-standard!


"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!