Image swap on Form Submit button

[KiwiBrian]

On a web page I have a graphic for a Shopping Cart Submit button.
It is within a form.
I would like to perform an image swap to an identical graphic of a different
colour when I hover over the button.
Can anyone show me how to do this, or point me to an implementation.
My present code is:-
<input type="image" name="submit" src="images/addtocart1.gif">
This changes the cursor to a hand, and operates the button when clicked.
I just want to add the image swap on hover. Must work identically on IE6 and
Firefox.
Thanks
Brian Tozer

 

[Edwin van der Vaart]

On a web page I have a graphic for a Shopping Cart Submit button.
It is within a form.
I would like to perform an image swap to an identical graphic of a different
colour when I hover over the button.
Can anyone show me how to do this, or point me to an implementation.
My present code is:-
<input type="image" name="submit" src="images/addtocart1.gif">
This changes the cursor to a hand, and operates the button when clicked.
I just want to add the image swap on hover. Must work identically on IE6 and
Firefox.

You can use stylesheet for the hover effect for the button e.g.
input.button {
background-color: url(images/addtocart1.gif) #ff6666;
color: #ffffff;}

input.button:hover {
color : #000000;
background: images/addtocart2.gif) #ffcc99;}

<input class="button" type="submit" name="submit">
--
Edwin van der Vaart
http://www.semi-conductor.nl/ Links to Semiconductors sites
http://www.evandervaart.nl/ Edwin's persoonlijke web site
Explicitly no permission given to Forum4Designers, onlinemarketingtoday,
24help.info, issociate.de and software-help1.org to duplicate this post.

 

[KiwiBrian]

You can use stylesheet for the hover effect for the button e.g.
input.button {
background-color: url(images/addtocart1.gif) #ff6666;
color: #ffffff;}

input.button:hover {
color : #000000;
background: images/addtocart2.gif) #ffcc99;}

<input class="button" type="submit" name="submit">

Thankyou Edwin for your help.
I have been unable to get this functioning in IE6, even trying many
permutations.
I suspect that there are typos involved.
I welcome further comment and input on this subject.
Thanks
Brian

 

[Toby Inkster]

I have been unable to get this functioning in IE6, even trying many
permutations.

IE 6 doesn't support ":hover" on anything other than links. This bug is
fixed in the IE 7 betas.

 

[KiwiBrian]

IE 6 doesn't support ":hover" on anything other than links. This bug is
fixed in the IE 7 betas.

Thanks Toby.
I wondered if that might be at the root of my difficulty, but hoped that
someone may be able to point me at a work-around.
The Form Submit button that I want to do the image swap on is a link.....of
sorts.
I have been able to achieve it in an E-commerce package that I was
trialling, but not in the one that I have to use, where several values are
being transferred.
I can give a URL if anyone thinks it should be possible.
Brian Tozer