1

在网站上查看其他地方后，在我看来，将 html 中的背景图像也作为链接有点棘手。在环顾四周时，我偶然发现有人建议使用 java 脚本应该可以解决问题。然而，在测试这个想法时，我没有运气。

如果有人能指出我哪里出错了，我将不胜感激。

我有以下 html 和 javascript 代码：

<html>

<head>
<link href = "style1.css" rel = "stylesheet" type = "text/css">
</head>

<div id = "header">
Header
</div>

<body>

<div id = "body">

<div class = "container">

</div>
</div>

</body>

</html>

<script>
document.getElementById('container').onclick = function() {
window.location = 'http://www.google.com/';
}
</script>

我还有以下 CSS：

#header{
width:100%;
height:50px;
background-color:black;
}

#body {
width:100%;
height:2000px;
background-image:url('uploads/1.jpg');
cursor:pointer;
}


.container{
 width: 1000px;
margin-right: auto;
margin-left: auto;
height: 1000px;
background-color:white;

}
4

3 回答 3

2

你有.getElementById('container')

当container实际上是一个类。

也可以<div class="container" onClick="goToWebsite()"></div>

<script>
 function goToWebsite() {
 window.location = 'http://google.com';
}
</script>
于 2013-02-04T23:38:51.093 回答
2

您是否尝试过使容器成为一个大链接？这里的诀窍是设置display:block。同样从 HTML5 开始，这是完全有效的。

HTML

<html>
<head>
   <link href = "style1.css" rel = "stylesheet" type = "text/css">
</head>

<div id = "header">
Header
</div>

<body>

    <div id = "body">

        <a class="container" href="http://www.google.com"></a>
    </div>

</body>

</html>

CSS 

.container{
   display: block; 
   width: 1000px;
   margin-right: auto;
   margin-left: auto;
   height: 1000px;
   background-color:white;
}
于 2013-02-04T23:41:20.623 回答
0

对于此示例，您也可以使用纯 HTML 来完成。

<a href="http://www.google.com"><div id="image-link"></div></a>

这样，您就有了该 div 的链接，然后在样式表中您可以添加背景图像以供点击。CSS 部分如下所示：

#image-link {
        background-image:url('untitled.jpg');
}

只需将背景图像的位置更改为当然。

于 2013-08-08T13:22:58.027 回答