Turn an image into a clickable button

Question

I am trying to create an image button, but my code isn't working as expected. Here is the code I have:

<input type="image" name"lvl1_1" style="border:1px dotted #000000;" class="main" width="50" src="images/main/lvl1/1.png">

When I change the input type from 'image' to 'submit', it works but the image and effects disappear. I can't seem to find any issues with the code :/

Answer 1

Answer №1

Here are three different methods to achieve this:

Include an OnClick="desired action for the image button" attribute within the input type image tag.
Instead of using the input type as image, switch it to button and utilize the background="image source" attribute on it.
Opt for the image-set type and specify the coordinates of the clickable area.

Answer 2

Here are three different methods to achieve this:

Include an OnClick="desired action for the image button" attribute within the input type image tag.
Instead of using the input type as image, switch it to button and utilize the background="image source" attribute on it.
Opt for the image-set type and specify the coordinates of the clickable area.

Answer 3

To effectively submit a form, one method is to create a submit button and then assign an image as the button's background using CSS.

Here is an example in HTML:

<input type="submit" name"lvl1_1" style="border:1px dotted #000000;" class="main" width="50" >

And here is the corresponding CSS code:

.main {
background-image: url("images/main/lvl1/1.png");
background-position:  0px 0px;
background-repeat: no-repeat;
}

Answer 4

To effectively submit a form, one method is to create a submit button and then assign an image as the button's background using CSS.

Here is an example in HTML:

<input type="submit" name"lvl1_1" style="border:1px dotted #000000;" class="main" width="50" >

And here is the corresponding CSS code:

.main {
background-image: url("images/main/lvl1/1.png");
background-position:  0px 0px;
background-repeat: no-repeat;
}