jQuery Hide Show problem

[wongadob]

Hello, I am trying to use jQuery's .show() and .hide() to show or hide a button attached to a text box (a submit button of sorts). Problem I am experienceing is that it works with the first show and hide, but from then on it never shows again. I believe the reason for this is that the img has been given a size of 0 x 0 pixels with the hide. Is there any way to JUST make it clear the display: none and not affect the size of the img. here is my code HTML then JS. HTML -

<textarea cols='50' rows = '1' class = 'updatetextbox' id = 'updatetext' name = 'updatetext' onclick = 'expandbox()' onblur = 'contractbox()'>enter textr</textarea><button id = 'enterbutton' type ='button' onclick="postMessage()" style="display:none"><img src = 'art/enter-button.png' onmouseover="this.src='art/enter-button-hover.png'" onmouseout="this.src='art/enter-button.png'" alt = 'Enter'/> </button>

Then the JS functions to show or hide the button

function expandbox(){  $('#enterbutton').show();  $('.updatetextbox').animate ({ height: 160 }, 100, function() {   $('#mainbody').animate ({ top: 108+160}, 100, function() {})   });}function contractbox(){  $('#enterbutton').hide();  $('.updatetextbox').animate ({ height: 32 }, 100, function() {   $('#mainbody').animate ({ top: 96}, 100, function() {})   });}

As I say it seems to clear the size of the img but not restore it with show. Better if it left the image size alone anyway and just clear style=display:none.

[dsonesuk]

The whole point of jquery is for it to be unobtrusive, it is not applied inline to html , I don't see anywhere that would affect the size of button? hide() = display: none; show() = display: inline; or display: block;

$(document).ready(function(){ $('.updatetextbox').click(function(){  $('#enterbutton').show();  $(this).animate ({ height: 160 }, 100, function() {   $('#mainbody').animate ({ top: 108+160}, 100, function() {})   });}); $('.updatetextbox').blur(function(){   $('#enterbutton').hide();  $(this).animate ({ height: 32 }, 100, function() {   $('#mainbody').animate ({ top: 96}, 100, function() {})   });});  });

for the mouseover effect for the image you would need to assign this to the button element itself and target the child img element, as the button only would trigger the mouseover/out

 <button id = 'enterbutton' type ='button' onclick="postMessage()" style="display:none" onmouseover="this.childNodes[0].src='art/enter-button-hover.png'" onmouseout="this.childNodes[0].src='art/enter-button.png'"><img src = 'art/enter-button.png'  alt = 'Enter'/> </button>

OR use remove these completely and again use unobtrusive jquery

$('#enterbutton').hover(function(){$(this).find("img").attr("src", "art/enter-button-hover.png");}, function(){$(this).find("img").attr("src", "art/enter-button.png");});