I have this code. I would like to replace the "go" button in this line <input TYPE="button" VALUE="GO!" onclick="jump(this.form)">with an image http://www.perfumewa...ifyingglass.gif. Can someone rewrite my code for me plz? Thanks

Re: How to replace a "go" button by an image

Posted 11 October 2007 - 01:03 AM

clintmyster, on 10 Oct, 2007 - 08:49 PM, said:

I would like to replace the "go" button in this line <input TYPE="button" VALUE="GO!" onclick="jump(this.form)">with an image http://www.perfumewa...ifyingglass.gif. Can someone rewrite my code for me plz?

Edit: I read William_Wilson’s post more thoroughly after submitting this. His solution will probably produce something more aesthetically elegant with less verbose code. Note that users won’t have Tab key access to the button in browsers like Firefox if you merely use an img element with an onclick attribute though.

If you were using type="submit" within a form element, then a button element would be the solution, but that doesn’t seem to be the case here.

Re: How to replace a "go" button by an image

Posted 11 October 2007 - 03:54 AM

clintmyster, on 10 Oct, 2007 - 06:49 PM, said:

I have this code. I would like to replace the "go" button in this line <input TYPE="button" VALUE="GO!" onclick="jump(this.form)">with an image http://www.perfumewa...ifyingglass.gif. Can someone rewrite my code for me plz? Thanks

You should use <input type="image" src="PATH_TO_IMAGE" onclick="jump(this.form)" /> to use image as a submit button.

Re: How to replace a "go" button by an image

You should use <input type="image" src="PATH_TO_IMAGE" onclick="jump(this.form)" /> to use image as a submit button.

I wouldn’t use the input element in this case for two reasons:

type="image" is functionally equivalent to type="submit"; in other words, type="image" has a submission action tied to it whereas type="button" does not. If the element is contained within a form element, as it is in clyntmyster’s code, then you would have to cancel the default action (i.e., submission action) via scripting which would unnecessarily complicates things.

Notably, I’m not sure whether he should be using that form element at all since he filled in the action attribute with a “dummy” value; I’m not sure if the value is temporary or intended for production.

The input element has no width and height attributes. Admittedly, you can describe those via CSS, but I prefer to specify intrinsic dimensions via HTML instead of CSS since I don’t consider descriptions of the intrinsic dimensions of images to be part of the presentational layer.

Edit: I should mention that you used XML syntax for the input element. Considering that, onclick should be in lowercase (i.e., onclick) since XHTML element/tag names are written in case‐sensitive lowercase.