Question

我试图在链接到同一网站内另一个网页的图片上创建一个按钮...我对编码不是很有经验，但能够在网上找到一些有帮助的东西我创造了我需要的东西。主要的问题是我无法使按钮可以点击，并且不确定在何处插入链接到我试图指向的页面的代码。这是我到目前为止所拥有的 - HTML：

<div class="albumimagewrap">
<img src="https://static1.squarespace.com/static/55d3ad3ee4b0adc8c326fe3f/t/57967922e6f2e14eefb8c308/1469479203582/Artboard+1.png?format=1000w" width="100%" height="100%">

<input type="h1" class="albumtitleimg" value="INNER CIRCLE">
<input type="p" class="albumtextimg" value="Debut Album Available Now">
<input type="button" class="albumbutton1" value="LISTEN">
</div>

CSS：

.albumimagewrap {
position:relative;left:0;top:0;
width: 100%;
height: 100%;
padding-top:0%
}

.albumtitleimg {
display: block;
position:absolute;
margin: auto;
width: 250px;
top:20%;right:0%;left:0%;
text-align: center;
font-size: 25px;
color:#ffffff;
background-color:transparent;
border: 0px;
}

.albumtextimg {
display: block;
position:absolute;
margin:auto;
width: 250px;
top:40%;right:0%;left:0%;
text-align: center;
font-size: 14px;
color:#ffffff;
background-color:transparent;
border: 0px;
}

.albumbutton1 {
display: block;
position:absolute;
margin:auto;
top:60%;right:0%;left:0%;
width: 240px;
height: 50px;
text-align: center;
background-color:transparent;
color: #ffffff;
border: 2px solid #BD9F6C;
}

我是新来的，所以我无法上传图片，但您可以在此处看到图片/按钮：ZL Bandsite - Banner Img with Button

任何帮助都是非常感激的！

Answer 1

一般规则是，如果单击元素导致加载新页面，请使用锚点。所以，在你的情况下，我会使用以下内容：

<a href="new-page.html" class="albumbutton1">
  <span>LISTEN</span>
</a>

Anchor自然链接到新页面，因此无需创建其他JavaScript。

为了使锚文本水平和垂直居中，我添加了以下内容：

.albumbutton1 span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

以下是演示：https://jsfiddle.net/mkwmsd2d/

Answer 2

如果您想要用作输入按钮的图像，可以使用以下css

.button {
  background-image: url ('/image.png') no-repeat;
}

Answer 3

您应该使用input，h1和p标记，而不是使用a元素。

您可以使用a标记制作指向其他网页的“可点击”链接。

<div class="album">
  <h1>INNER CIRCLE</h1>
  <p>Debut Album Available Now</p>
  <a href="#">LISTEN</a>
</div>

您需要做的就是将＃替换为您想要的网址。

请参阅：https://jsfiddle.net/gosh95zb/

Answer 4

很容易。只需在按钮上添加一个触发器即可。

<input type="button" onclick="javascript:window.open('http://www.google.com.br');" class="albumbutton1" value="LISTEN">

示例：http://jsfiddle.net/xqc36Lht/

如何使用HTML / CSS制作按钮可点击？它需要与图像上的标题一起居中

4 个答案: