I want to insert a clickable image, that is, if any part of the image is clicked, it will either act like a button element, or more preferably, run a Javascript script.

I was thinking of inserting an image into a button element, but as far as I can tell, that would NOT just make the whole image into a button, but rather insert it into a button box.

How do I make a clickable image, that pulls up a script?

I want to insert a clickable image, that is, if any part of the image is clicked, it will either act like a button element, or more preferably, run a Javascript script.

I was thinking of inserting an image into a button element, but as far as I can tell, that would NOT just make the whole image into a button, but rather insert it into a button box.

How do I make a clickable image, that pulls up a script?

• javascript
• html
• css

2 Answers 2

There are lots of ways to do this.

<img id="Img" src="img.jpg" />

Adding an onclick attribute:

<img id="Img" src="img.jpg" onclick="myFunction()" />

Adding onclick event listener from script:

document.getElementById( "Img" ).onclick = function() {
    // img clicked
};

Put image as button background

<input type="button" style="background: url( img.jpg )" />

the best way would be to use an onClick attribute or add an event listener, but i personally like to use the anchor tag:

<a href = "#" ><img src = "#" ></a>