I have created a rollover submit button using HTML and JavaScript:
<input type="image" id="join" name="join" src="images/join.png" value="join">
My JS code implements the rollover/hover effect:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#join').hover(
function(){
$(this).attr({ src : 'images/rollover/joinOver.png'});
},
function(){
$(this).attr({ src : 'images/join.png'}); }
);
});
</script>
However, this functionality works flawlessly in most browsers but encounters issues with Firefox and IE. Surprisingly, when I include a standard "submit" button (input type = "submit"), it performs well across all platforms.
I attempted to modify the HTML by changing the type attribute to "submit" and experimenting with CSS for hover image effects both inline and through class in external stylesheets, but unfortunately, that didn't resolve the problem.
Is there a reliable method to create a rollover button that operates consistently on every browser? (I've tested it on Chrome, FF, IE, Opera, Safari)
NOTE:
To clarify, my challenge lies not in designing a rollover image but in developing one that functions as a "submit" button for a form to trigger a PHP script.
While my code demonstrates the rollover effect in various browsers, it doesn't fulfill its purpose as a "submit" button specifically in FF and IE.