使用图像作为按钮答案

【问题标题】：Using images as buttons使用图像作为按钮
【发布时间】：2018-03-08 22:00:12
【问题描述】：

我正在编写一个运行良好的计算器脚本。（从教程中得到它）。现在我希望按钮是图像。例如 1.jpg 2.jpg 等

<html>
<form name="calculator">
<input type="button" value="1" onClick="document.calculator.ans.value+='1'">
<input type="button" value="2" onClick="document.calculator.ans.value+='2'">
<input type="button" value="3" onClick="document.calculator.ans.value+='3'">
<input type="button" value="4" onClick="document.calculator.ans.value+='4'">
<input type="button" value="5" onClick="document.calculator.ans.value+='5'">
<input type="button" value="6" onClick="document.calculator.ans.value+='6'">
<input type="button" value="7" onClick="document.calculator.ans.value+='7'">
<input type="button" value="8" onClick="document.calculator.ans.value+='8'">
<input type="button" value="9" onClick="document.calculator.ans.value+='9'">
<input type="button" value="-" onClick="document.calculator.ans.value+='-'">
<input type="button" value="+" onClick="document.calculator.ans.value+='+'">
<input type="button" value="*" onClick="document.calculator.ans.value+='*'">
<input type="button" value="/" onClick="document.calculator.ans.value+='/'">
 
<input type="button" value="0" onClick="document.calculator.ans.value+='0'">
<input type="reset" value="Reset">
<input type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
<br>Solution is <input type="textfield" name="ans" value="">
</form>
</html>

【问题讨论】：

我想在这篇文章中你可以找到答案link
Put icon inside input element in a form的可能重复

标签： html

【解决方案1】：

您可以简单地将图像用作表单元素的输入类型。我认为这应该对你有用。 :)

【讨论】：

【解决方案2】：

如果您使用<button> 标签而不是<input type="button"，您可以这样做：

<button>
<img src="example.jpg" />
</button>

Moshiach 现在！

【讨论】：

谢谢你的帮助，当我这样说时它将我的地址 file:///D:/Games/Calculator/calc.html 更改为 file:///D:/Games/Calculator/calc.html?ans=0
试试<button onclick="ans.value=eval(ans.value)+2"><img src="2.png" /></button>。另外，为了约定，你应该写不带大写字母的“onclick”（除了在 JavaScript 中你必须使用“onClick”）

【解决方案3】：

你应该使用<img src="image.jpg">标签，比如：

<html>
    <form name="calculator">
        <img src="1.jpg" onClick="document.calculator.ans.value+='1'">
        <img src="2.jpg" onClick="document.calculator.ans.value+='2'">
        <img src="3.jpg" onClick="document.calculator.ans.value+='3'">
        <img src="4.jpg" onClick="document.calculator.ans.value+='4'">
        <img src="5.jpg" onClick="document.calculator.ans.value+='5'">
        <img src="6.jpg" onClick="document.calculator.ans.value+='6'">
        <img src="7.jpg" onClick="document.calculator.ans.value+='7'">
        <img src="8.jpg" onClick="document.calculator.ans.value+='8'">
        <img src="9.jpg" onClick="document.calculator.ans.value+='9'">
        <img src="minus.jpg" onClick="document.calculator.ans.value+='-'">
        <img src="plus.jpg" onClick="document.calculator.ans.value+='+'">
        <img src="mult.jpg" onClick="document.calculator.ans.value+='*'">
        <img src="div.jpg" onClick="document.calculator.ans.value+='/'">
        <img src="0.jpg" onClick="document.calculator.ans.value+='0'">
        <input type="reset" value="Reset">
        <input type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
        <br>Solution is <input type="textfield" name="ans" value="">
    </form>
</html>

请注意，这假定您的图像与您的 .html 文件位于同一文件夹中。如果它们位于子文件夹中，例如“images”，您可以使用<img src="images/image.jpg">。

【讨论】：

感谢您的快速响应，但是当我将 onclick 添加到图像时，图像无法点击。亲切的问候，乔里克
在我的答案上单击“运行代码 sn-p”，看看它是否在那里工作。它适用于我的浏览器 Chrome。

【解决方案4】：

如果您想使用该代码并且只想将图像添加到按钮，您可以使用 CSS：

<style>
  Form input[type=button]:first-child {background: url(/image/btn1.png) no-repeat;}
  Form input[type=button]:nth-child(2) {background: url(/image/btn2.png) no-repeat;}
</style>

您可以在此处阅读有关 CSS 伪类的更多信息： https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

另外，也许这些老问题（和答案）会有所帮助：

How to add background image for input type="button"?

html input with background image

顺便说一句-我认为您应该编写自己的计算器脚本-这是基本的必须...

祝你好运！

【讨论】：