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

コンテナを1つの大きなリンクにしようとしましたか？ここでの秘訣は設定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 に答える
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 に答える
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 に答える