Image swap on Form Submit button

Discussion in 'HTML' started by KiwiBrian, May 20, 2006.

  1. KiwiBrian

    KiwiBrian Guest

    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
    KiwiBrian, May 20, 2006
    #1
    1. Advertising

  2. 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.
    Edwin van der Vaart, May 20, 2006
    #2
    1. Advertising

  3. KiwiBrian

    KiwiBrian Guest

    "Edwin van der Vaart" <> 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
    KiwiBrian, May 20, 2006
    #3
  4. KiwiBrian

    Toby Inkster Guest

    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
    Toby Inkster, May 21, 2006
    #4
  5. KiwiBrian

    KiwiBrian Guest

    "Toby Inkster" <> wrote in message
    news: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
    KiwiBrian, May 21, 2006
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    2
    Views:
    6,188
  2. Network-Man
    Replies:
    5
    Views:
    78,357
    gaul1
    Jul 7, 2012
  3. Niels Dekker (no reply address)

    What swap is called when using std::swap?

    Niels Dekker (no reply address), Jul 19, 2006, in forum: C++
    Replies:
    4
    Views:
    985
    Niels Dekker (no reply address)
    Jul 20, 2006
  4. Replies:
    4
    Views:
    1,200
    Adrienne Boswell
    Mar 23, 2010
  5. fochie
    Replies:
    0
    Views:
    310
    fochie
    Feb 1, 2005
Loading...

Share This Page