Change text box quantity, change picture upon hover with jQuery/Javascript

Question

I would like to do 2 things in jQuery or Javascript,

1. Change with quantity in a text box with up and down arrows. The default qty is 1, and I want to increment by 1 when a user clicks the up arrow, and vice versa.

2. Can I change the arrow to another picture (color) when the mouse hovers on it?

Thank you.

Answer 1

I would recommend using click() command for changing the value in a textbox and the hover() command for changing the arrow to another picture (color)

for example, for the incrementer

$('#myImg')
    .click( function() { 
                           var num = $('#myTextbox').text(); 
                           if (!isNaN(num))
                               $('#myTextbox').text(parseInt(num,10) + 1);
    .hover(
            function() { $(this).css('background-image','over.jpg'), //over 
            function() { $(this).css('background-image','out.jpg') // out
          )

Answer 2

1.)

<script>
function increase() {
  var textbox = document.getElementById('textbox');
  textbox.value = parseInt(textbox.value) + 1;
}
</script>

<input id="textbox" name="textbox" type="text" value="1">
<a href="#" onclick="increase()">up</a>

2.) Should be down with CSS :hover