/    Sign up×
Community /Pin to ProfileBookmark

Images on buttons

Copy linkTweet thisAlerts:
Jul 23.2003

Hi. I would like to be able to replace a button with my own image.

<FORM>
<BUTTON><IMG src=”face.gif”></IMG></BUTTON>
</FORM>

That works, but the grey of the button is still there. I assume there is a way to use masking to lose the button image, but still keep the face image?

Thanks for any help.

P.S. I need to use a form element for this, so just using <img> with onClick won’t work. Need to use <BUTTON> or <INPUT> or something directly related to the form.

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@AdamGundryJul 23.2003 — You can use [b]<input type="image" src="face.gif">[/b].

Adam
Copy linkTweet thisAlerts:
@Developer101authorJul 23.2003 — Ok, that works, but it forces the form to submit. Is there any way to force this to NOT submit the form?

What I need it for is an editor page. I have a text area in the form as well, and I want to be able to click an image that will insert text at the cursor position in the text area. the reason I need it as a form element is that I need to access the text area from within the same form. So I need to go by way of this.form.txtMessage. When i put an image in the form and try to get to that path, I get a script error. I can only get to that path from form elements it seems. It's a real pain in the rear end, but I guess you have to do what you have to do sometimes.

The technique you posted does in fact allow me to use that path, but it also makes the form post for some reason. Is there am action or something I can add to it to make it not submit the form?
Copy linkTweet thisAlerts:
@Developer101authorJul 23.2003 — Nevermind. I figured it out. Just need to do a:

<INPUT TYPE="image" src="face.gif" onClick="javascript:YourFunctionHere();return false;"></INPUT>

Thanks for all the help. =)
×

Success!

Help @Developer101 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...