CODEWITHSUNDEEP
htmlcss
JLearner
JLearner

Reputation: 1311

Replacing button with image

I have successfully replaced the button with the image. But it appears that the image is placed on top of the button. I don't wish to put inside my CSS as there are other styles overlapping it and I don't want to have any redirect pages.

<button type="reset"><img src="images/cancel.png" width="15"></button>

Upvotes: 5

Views: 46444

Answers (4)

Riddhi Doshi
Riddhi Doshi

Reputation: 186

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script>
        function change(thi) {
            debugger;
            thi.setAttribute("src", "guitar.jpg");
            thi.innerHTML = "";
            thi.outerHTML = thi.outerHTML.replace(/button/g, "img");
        }
    </script>
</head>
<body>
    <button onclick="change(this)">OUR BUTTON</button>
</body>
</html>

Upvotes: 2

osyan
osyan

Reputation: 1856

<button type="reset" width="15" style="background-image: url('images/cancel.png');"/>

Upvotes: 0

artlung
artlung

Reputation: 34013

Do this in CSS!

button {
  background-image: url(images/cancel.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  /* put the height and width of your image here */
  height: 50px;
  width: 200px;
  border: none;
}

button span {
  display: none;
}

Then your button is:

<button type="reset" title="In some browsers, this appears as a tooltip"> 
    <span>Cancel</span></button>

You may also add specifiers to override default button behaviors - for example -webkit-appearance: none; but I believe that's enough to do what you need.

Upvotes: 13

bigmoof
bigmoof

Reputation: 91

Why do you need the button?

You can try and remove the button tag and try either of these :

<img src="images/cancel.png" width="15" onClick="document.form1.reset();">

or

<a href="#" onClick="document.form1.reset();"><img src="images/cancel.png" width="15"></a>

Just replace "form1" with your form name.

Upvotes: 1

Related Questions