rollover image with buttons

Question

Is there a way to make a form input of type image to have a rollover image?

martincarlin87 · Accepted Answer · 2011-04-22T16:49:57.673

3

Try this?

<input type="image" value="someValue" src="yourImage.gif" width="widthInPixels" height="heightInPixels" onmouseover="this.src='yourImageRollover.gif';" onmouseout="this.src='yourImage.gif';">

edited Apr 22 '11 at 16:49

answered Apr 22 '11 at 16:44

martincarlin87

10,848
24
98
145

Get rid of the `javascript:` bit. That is a label (used for breaking out of loops (and since there isn't a loop, it is a waste of bytes)), not a language declaration. – Quentin Apr 22 '11 at 16:47
removed the `javascript:` parts – martincarlin87 Apr 22 '11 at 16:53

score 2 · Answer 2 · answered Apr 22 '11 at 16:46

2

The same way as any other image. Change the src property when the mouseover event fires.

answered Apr 22 '11 at 16:46

Quentin

914,110
126
1,211
1,335

score 1 · Answer 3 · answered Apr 22 '11 at 16:44

1

I would just use a normal submit input and use css sprites on it.

http://www.alistapart.com/articles/sprites

answered Apr 22 '11 at 16:44

Galen

29,976
9
71
89

rollover image with buttons

3 Answers3

Linked