Question

所以我对网页设计还是比较陌生的，正如问题所说，我想把图像放到一个按钮上，当点击该图像时，它会切换到另一个图像。

所以我认为我会将其分解为任务，先购买按钮，放置图像，切换图像。

这听起来很傻但我甚至无法让图像出现在按钮中。

<button style="display:block; background: url(../images/blackk.jpg)) no-repeat center;">
    Push me!
</button>

你能告诉我该做什么吗？

Answer 1

完成这项工作非常容易！首先，您应该添加button标记，然后在其中插入img标记以展示图片。

另外，通过单击更改其图像，您可能希望使用jQuery库。如果您已经在使用它，则下面是一个用于更改其图像的代码段。

但是，如果您更喜欢使用纯JavaScript，只需一行简单的代码即可完成。

document.getElementById('foo').src = 'new srouce address';

<强>演示：

＆＃13;

$('#foo').click(function(){
  // another image
  $(this).find('img').attr('src', 'http://lorempixel.com/200/200');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="foo">
  <img src="http://lorempixel.com/100/100"/>
</button>

＆＃13;

Answer 2

您可以使用CSS设置初始图像，如

<style>
.button
   {
     background: url("img_tree.png") no-repeat;
     cursor:pointer;
 }
</style>

然后使用按钮上的点击功能：

<button id="imgButton" type="button" class="button" onclick="myFunction()">Set background image</button>

在函数中使用javascript来更改按钮的图像背景：

<script>
function myFunction() {
    document.getElementById("imgButton").style.backgroundColor = "#f3f3f3";
    document.getElementById("imgButton").style.backgroundImage = "url('html5.gif')";
}
</script>

将图像放在按钮中并在图像之间切换

2 个答案: