How can I remove the 'button' from my input field and replace it with an image? Even after trying different methods, the box still appears.
Thank you.
<!DOCTYPE html PUBLIC "">
<head>
<style>
#PlusMinus{background:url('images/sprites.gif') 0px -391px;left:0px;width:13px;}
#PlusMinus a:hover{background: url('images/sprites.gif') 0px -406px;}
</style>
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type='text/javascript'>
var fontSizes = [14, 16]
$(function(){
$('#PlusMinus').click(function() {
if($(this).val() == "+") {
$('#OurText').css('fontSize', fontSizes[1] + 'px');
$(this).val("-");
}
else {
$('#OurText').css('fontSize', fontSizes[0]+ 'px');
$(this).val("+");
}
$("body .h6").toggle();
});
});
</script>
</head>
<body>
<h6 class="noSpan">
<!--HERE'S THE INPUT-->
<input 'submit' id='PlusMinus' />
<span class="h6">Larger</span>
<span class="h6" style="display: none">Smaller</span>
</h6>
<h5 id="OurText" class="p">TEXT</h5>
</body>
</html>
I've tried using input 'submit, image, and button', but that persistent box keeps showing up.
input 'submit' id='PlusMinus'