Question

我正在使用javascript来控制3d旋转木马的按钮并尝试使用图像而不是按钮。我的HTML看起来像：

<button id="previous" data-increment="-1" >Previous</button>
  <button id="next" data-increment="1">Next</button>

我通过添加img标签尝试了显而易见的事情＆＃34; Next＆＃34;和＆＃34;以前＆＃34;是：

<button id="previous" data-increment="-1" ><img src="URL" /></button>

这使图像显示，但点击时它们什么都不做。我也尝试用CSS改变它并且可以改变按钮的样式，但是两个按钮都不会出现相同的图像。我需要单独的图像用于下一个和上一个：

button {
background-image: url(images/myimage.png);
background-repeat: no-repeat;
height: 50px;
width: 200px;
border: none;
}

button span {
display: none;
}

关于为什么这不起作用的任何想法？

Answer 1

这里有很多问题。

按钮中没有span元素。 button span风格并不适合你做任何事情。如果您想隐藏文字，建议您使用color: transparent;。
您需要为每个按钮应用不同的图像，这意味着您需要不同的选择器。

按钮#previous { background-image：url（＆＃39; prev.jpg＆＃39;）; }

按钮#next { background-image：url（＆＃39; next.jpg＆＃39;）; }
通常，将样式应用于按钮不会影响js中添加的侦听器。如果按钮不再工作，你的js肯定有问题。如果您对此有所帮助，请发布相关代码。

用图像替换javascript控制的按钮

1 个答案: