Member Avatar for heels

Hi,

Is it possible to use images for a button instead of the normal button?
I am not trying to link it to another page over here but, getting it to trigger some event like a normal button.
Thanks alot.

Regards,
heels

  • 3 Contributors
  • 4 Replies
  • 92 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by heels

Dani AI

Generated

Yes — you can use images as buttons. 's input-image example is a quick solution and pointed to a page that surveys options, but there are a few important trade-offs and modern best practices to keep in mind.

A recommended, accessible pattern is to use a semantic button and either put an img inside it or apply a CSS background-image. This keeps keyboard focus, works with screen readers, and avoids accidental form submits when you explicitly set type="button":

<button id="calendarBtn" type="button" aria-label="Open calendar">
  <img src="calendar.png" alt="">
</button>

<script>
document.getElementById('calendarBtn').addEventListener('click', function () {
  alert('Welcome!');
});
</script>

Notes and troubleshooting:

  • input type="image" behaves like a submit control and sends click coordinates when used inside a form; see the MDN docs for details (input type="image").
  • Always set type="button" on a <button> if you do not want it to submit a form (button element).
  • Accessibility: if the image is decorative use alt="" and give the button an aria-label; if the image conveys the label, use meaningful alt text instead.
  • For touch, keep the hit area large enough and test keyboard behavior (Tab / Enter / Space).

This approach keeps behavior predictable and accessible while letting you trigger JavaScript events just like a normal button.

Recommended Answers

All 4 Replies

Member Avatar for R0bb0b

This explains many options for submit buttons

Member Avatar for nav33n 
<html>
<head>
<script type="text/javascript">
function showmsg() {
	alert("welcome!");
}
</script>
</head>
<body>
<input type="image" src="calendar.jpg" onclick="javascript: showmsg();" />
</body>
</html>

Like this..

Member Avatar for nav33n

This explains many options for submit buttons

:'( I am lil too late to reply !

Member Avatar for heels

:'( I am lil too late to reply !

hahaha, so cute. Thanks guys. Will check out the website and try out nav33n's method too :). You're not too late but you gave me another idea to try too.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.