Question

我正在创建一个浮动侧边栏，它会显示Facebook徽标，并在点击时打开div。此div将包含类似Facebook的框。当用户再次点击徽标时，div会关闭。

我设法让它工作，但我需要用图像替换按钮（Facebook徽标，就像我说的那样），并且仍然具有此脚本的功能。

我怎么能实现这个目标？

Answer 1

您的Javascript设置为根据id的点击进行切换，因此您需要做的就是替换它：

<button id="show1" data-href="curtir">Click ME!</button>

有了这个：

<img id="show1" src="whatever.jpg" data-href="curtir" />

以下是其中的一个小提琴：http://jsfiddle.net/LrTqG/

Answer 2

您可以使用以下css代码在按钮上应用图像。

button {
  border: none;
  background: url("http://lorempixel.com/100/50") 0 0;
  width: 100px;
  height:50px;
}

这是 Demo

Answer 3

你可以用几种方式做到这一点，一种是将背景图像放到按钮上：

<button id="show1" data-href="curtir" style="width:100px; height:100px; background-image: url(http://th07.deviantart.net/fs70/150/i/2013/012/c/6/rock_01_png___by_alzstock-d5r84up.png); background-size: 100% 100%;"></button>

或使用img元素代替按钮

或使用带有背景图像的div对点击做出反应...（我最喜欢的是因为它可以是透明的，没有边框等...）

当然，对于img和div，您可能希望将光标更改为指针

style="cursor: pointer;"

Answer 4

只需修改按钮即可删除内部文本<button id="show1" data-href="curtir"></button>并添加类似以下CSS代码的内容

#show1 {
    background: url('http://placehold.it/100x50') no-repeat;
    width: 100px;
    height: 50px;
}

您也可以为悬停添加边框！

#show1:hover {
    border: 2px solid cyan;
}

对于按下按钮的一些效果：

#show1:active {
    background-position: 1px 1px;
}

更新了JSFiddle

Answer 5

如何使用＆＃34;图像＆＃34;输入类型？

<input type="image" src="http://epicshowdowns.com/wp-content/uploads/2013/12/facebook-icon.png" id="show1" data-href="curtir" value="Click ME!" />
<div id="curtir" class="demo">Lorem ipsum.</div>

http://jsfiddle.net/h8CNP/11/

如何用图像替换按钮？

5 个答案: