"KiwiBrian" <br******@ihug.co.nz> wrote in message
news:e4**********@lust.ihug.co.nz...
On a web page I have a graphic for a Shopping Cart Submit button.
It is within a form and working fine.
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 for the submit button 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.
I have Googled for hours, and tried many options, all unsuccessfully so
far.
TIA for any advice
Brian Tozer
The only way to do this in CSS _AND_ to have it work in IE6 is to replace
your submit buttons with links. Something like:
<form id="MyForm" name="MyForm" method="post"
action="theServerSideScriptLocation">
<!-- The rest of the form stuff -->
<a class="addToCart" href="javascript
:document.MyForm.submit();">Add To
Cart</a>
</form>
and then use CSS to style the link. Something like:
a.addToCart {margin-left: -5000px; display: block; width: 150px; height:
50px; background: url('add.gif')}
a.addToCart:hover {background: url('addHover.gif')}
It is rough, but should give some idea. You might want to search for "Image
Replacement" to refine the CSS a bit, and for form, submit and javascript to
refine the HTML.
HTH,
Martin