div に a href リンクを追加する方法を知る必要がありますか? 「buttonOne」div全体にhrefタグを配置しますか? それとも、「linkedinB」divの周りまたは内部にある必要がありますか?
ここに私のHTMLがあります:
<div id="buttonOne">
<div id="linkedinB">
<img src="img/linkedinB.png" width="40" height="40">
</div>
</div>
aタグで囲めませんか?
<a href="#"><div id="buttonOne">
<div id="linkedinB">
<img src="img/linkedinB.png" width="40" height="40">
</div>
</div></a>
これをjavascriptで実装してみてください:
<div id="mydiv" onclick="myhref('http://web.com');" >some stuff </div>
<script type="text/javascript">
function myhref(web){
window.location.href = web;}
</script>
この場合、2つの間にコンテンツがないため、問題ではありませんdiv
。
どちらかがブラウザを下にスクロールさせます。
要素は次のa
ようになります。
<a href="mypageName.html#buttonOne">buttonOne</a>
または:
<a href="mypageName.html#linkedinB">linkedinB</a>
という名前のクラスを作成してoverlay
、次の css を適用してみてください。
a.overlay { width: 100%; height:100%; position: absolute; }
配置された要素に配置されていることを確認してください。
<a>
次に、リンク可能にしたい div 内にそのクラスのタグを配置するだけです。
<div id="buttonOne">
<a class="overlay" href="......."></a>
<div id="linkedinB">
<img src="img/linkedinB.png" alt="never forget the alt tag" width="40" height="40"/>
</div>
</div>
div
PhilipK の提案は機能するかもしれませんが、ブロック要素 ( ) をインライン要素 ( ) 内に配置できないため、検証されませんa
。そして、あなたのウェブサイトが妥当性を確認していない場合、W3C Ninja があなたのためにやってきます!
別のアドバイスは、インライン スタイルを避けることです。
私は言います:
<a href="#"id="buttonOne">
<div id="linkedinB">
<img src="img/linkedinB.png" width="40" height="40">
</div>
</div>
ただし、リンクのままです。リンクをボタンに変更する場合は、#buttonone の名前を #buttonone a { your css here } に変更する必要があります。