Menu
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>
688
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.
171
<!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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
