可点击的图像按钮 [英] Clickable Image Button

问题描述

我正在尝试使图像可点击，以便我可以将其用作下载 PDF 的按钮，尽管我觉得我想得太多了并且让自己感到困惑.

我使用过的代码示例:

<div id="name"><a href="file.pdf"></a></div>

然后将 div id 与 CSS 一起使用来显示图像，因为我还想要悬停效果，以便用户在按钮上时获得某种反馈.

#name {背景图片:url('standardimage.jpg');高度:51px；宽度:285px；保证金:自动；底边距:5px；}#名称:悬停{背景图片:url('hoverimage.jpg');高度:51px；宽度:285px；保证金:自动；底边距:5px；光标:指针；-o-transition: .5s;-ms-transition: .5s;-moz-transition: .5s;-webkit-transition: .5s;}

如有任何帮助，将不胜感激，谢谢！

解决方案

所以您面临的问题是链接(<a> 标签)是实际的按钮，但该按钮具有没有大小，因为它有点空.请参阅此代码片段.<a> 标签周围有一个红色边框，但没有任何东西可以填满它......

#name {背景图片:网址(http://lorempixel.com/400/200/sports/1/)；高度:51px；宽度:285px；保证金:自动；底边距:5px；}#名称:悬停{背景图片:网址(http://lorempixel.com/400/200/sports/2/)；高度:51px；宽度:285px；保证金:自动；底边距:5px；光标:指针；-o-transition: .5s;-ms-transition: .5s;-moz-transition: .5s;-webkit-transition: .5s;}#命名一个{边框:实心 1px 红色；背景颜色:橙色；z-索引:999；}

<div id="name"><a href="#/path/to/file.pdf"><<;/a>

因此，如果您将所有这些样式设置为 <a> 标记并添加 display: inline-block; 那么它会在这里工作:>

#name a {显示:内联块；/* 添加这一行 */背景图片:网址(http://lorempixel.com/400/200/sports/1/)；高度:51px；宽度:285px；保证金:自动；底边距:5px；}#name a:悬停{背景图片:网址(http://lorempixel.com/400/200/sports/2/)；高度:51px；宽度:285px；保证金:自动；底边距:5px；光标:指针；-o-transition: .5s;-ms-transition: .5s;-moz-transition: .5s;-webkit-transition: .5s;}#命名一个{边框:实心 1px 红色；背景颜色:橙色；z-索引:999；}

<div id="name"><a href="#/path/to/file.pdf"><<;/a>

I'm trying to make an image clickable so that I can use it as a button to download a PDF although I feel like I'm over-thinking this and confusing myself.

An example of the code I've used:

<div id="name"><a href="file.pdf"></a></div>

The div id is then used with CSS to display the image as I also wanted a hover effect so the user has some sort of feedback when on the button.

#name {
  background-image: url('standardimage.jpg');
  height: 51px;
  width: 285px;
  margin: auto;
  margin-bottom: 5px;
}

#name:hover {
  background-image: url('hoverimage.jpg');
  height: 51px;
  width: 285px;
  margin: auto;
  margin-bottom: 5px;
  cursor: pointer;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
}

Any help would be appreciated thank you!

解决方案

So the problem you are facing is the the link (the <a> tag) is the actual button but that one has no size cause it's kind of empty. See this code snippet. The <a> tag has a red border all around but there is nothing which fills it up ...

#name {
  background-image: url(http://lorempixel.com/400/200/sports/1/);
  height: 51px;
  width: 285px;
  margin: auto;
  margin-bottom: 5px;
}

#name:hover {
  background-image: url(http://lorempixel.com/400/200/sports/2/);
  height: 51px;
  width: 285px;
  margin: auto;
  margin-bottom: 5px;
  cursor: pointer;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
}

#name a {
    border:solid 1px red;
    background-color: orange;
    z-index: 999;
}

<div id="name"><a href="#/path/to/file.pdf"></a></div>

So if you set all those styles you had to the <a> tag and add display: inline-block; then it will work see here:

#name a {
  display: inline-block; /* add this line */
  background-image: url(http://lorempixel.com/400/200/sports/1/);
  height: 51px;
  width: 285px;
  margin: auto;
  margin-bottom: 5px;
}

#name a:hover {
  background-image: url(http://lorempixel.com/400/200/sports/2/);
  height: 51px;
  width: 285px;
  margin: auto;
  margin-bottom: 5px;
  cursor: pointer;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
}

#name a {
    border:solid 1px red;
    background-color: orange;
    z-index: 999;
}

<div id="name"><a href="#/path/to/file.pdf"></a></div>

这篇关于可点击的图像按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！