Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Image swap on Form Submit button

Reply
Thread Tools

Image swap on Form Submit button

 
 
KiwiBrian
Guest
Posts: n/a
 
      05-20-2006
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


 
Reply With Quote
 
 
 
 
Edwin van der Vaart
Guest
Posts: n/a
 
      05-20-2006
KiwiBrian wrote:
> 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.
 
Reply With Quote
 
 
 
 
KiwiBrian
Guest
Posts: n/a
 
      05-20-2006

"Edwin van der Vaart" <(E-Mail Removed)> wrote in message
news:NGHbg.670$YI3.498@amstwist00...
> KiwiBrian wrote:
>> 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">


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


 
Reply With Quote
 
Toby Inkster
Guest
Posts: n/a
 
      05-21-2006
KiwiBrian wrote:

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

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

 
Reply With Quote
 
KiwiBrian
Guest
Posts: n/a
 
      05-21-2006

"Toby Inkster" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)5n.co.uk...
> KiwiBrian wrote:
>
>> 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.


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


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Convert form to submit on load instead of clicking submit button? Network-Man HTML 5 07-07-2012 12:06 PM
HTTP::Request::Form - Can't submit a form with input type=image button fochie Perl Misc 0 02-01-2005 06:42 AM
submit the form data to the popup window without a submit button jrefactors@hotmail.com Javascript 2 01-01-2005 06:07 AM
submit the form data to the popup window without a submit button jrefactors@hotmail.com HTML 2 01-01-2005 06:07 AM
Form submit - hitting enter does not trigger Submit button ASP General 2 10-25-2004 03:37 PM



Advertisments