facebookへのリンクにempy divを使用する必要がありますか？

Question

私のヘッダーはPhotoshopで作られたかなり大きなイメージです。このヘッダーには、Facebook、Twitter、YouTubeなどの小さなカスタムアイコンをさまざまな場所（左、右、上、中央）に配置したいと考えています。これらのアイコンに私のfb、youtubeページへのリンクが必要です。

私は何が最善のアプローチであるか分かりません。私はこれらのアイコンをPhotoshopのヘッダに入れて、空のdivでアイコンの正確な位置を見つけてfbページにリンクしなければなりませんか？または、私の見出しの上にそれを配置するために、私のdivとz-indexのアイコンをCSSに入れなければなりませんか？

別の解決策はありますか？私は数時間ネットをサーフして何も見つかりませんでした。

ありがとう！

Answer 1

個人的には、アイコンをヘッダーの上に配置するので、後で変更することができます。単に画像をアンカーで囲み、divの中に入れます。それらをCSSで正確な位置に移動します。あなたが説明するように、あなたのグラフィカルなデザインの中にアイコンを統合すると主張する場合

<div style="width: 32px; height: 32px;"> 
    <a href="http://facebook.com"> 
     <img src="facebook-icon.jpg" width="32" height="32" alt="" /> 
    </a> 
</div> 

は、その後、それらをリンクするための最良の方法は、「イメージマップ」を使用することです。同様の効果を実現しますが、透明なクリック可能なものをdivに配置するよりもはるかに意味があります。

<map name="myImageMap"> 
    <area shape="rect" coords="14,45,202,94" href="location-1.html"> 
    <area shape="circle" coords="396,62,48" href="location-2.html"> 
</map> 

<img src="myImage.jpg" width="1200" height="200" usemap="#myImageMap" /> 

http://graphicdesign.spokanefalls.edu/tutorials/tech/imagemapexample/imagemap.htm

Answer 2

私の意見では、のプロパティをアイコンに設定して、<a>タグを使用することをお勧めします。これらをヘッダーイメージの上に配置します。ヘッダーと同じイメージにアイコンを作成すると、あとで問題が発生する場合があります。別々に行うと、ヘッダーイメージ全体を編集することなく、アイコンを移動したりアイコンを変更することができます。

Answer 3

あり、これを行うには、文字通り多くの方法がありますので、これには本当の正しい答えは、ませんが、あなたはちょうどそれをシンプルに保つために意見を求めているならば、これは私が何をするのかであります。しかし、それが最善のことではありません。

<style type="text/css"> 
    .header { position:absolute; height:200px; width:700px; } /*change width/height to actual size*/ 
    a.link { background-image:url(t.png); display:block; left:0px; top:0px; z-index:1; } 
    a.icon { display:block; position:absolute; top:50px; height:32px; width:32px; z-index:2; } /*assuming icons are same size*/ 
    a.fb { background-image:url(b.png); right:94px; } /* 3 10px spacers plus 2 icons widths */ 
    a.tw { background-image:url(a.png); right:52px; } /* 2 10px spacers plus 1 icon width */ 
    a.yt { background-image:url(r.png); right:10px; } /* 1 10px spacer */ 
</style> 

<div class="header"> 
    <a class="header link" href="#"></a> 
    <a class="icon fb" href="http://www.facebook.com/"></a> 
    <a class="icon tw" href="http://www.twitter.com/"></a> 
    <a class="icon yt" href="http://www.youtube.com/"></a> 
</div> 

あなたがアンカー背景画像アプローチを取るつもりなら、あなたは例のように、ブロックにアンカーを設定し、そのブロックの大きさを設定する必要があるとしています。

すてきなやり方は、すべてのアイコンを1つの画像にまとめて1つの画像だけを読み込む必要があるため、ヘッダコールが少なくて済むことです。 background-position CSSプロパティを使用して、各アイコンの背景イメージを再配置します。この例では、1つの96x32イメージを作成する3つの32x32アイコンがあると仮定します。

<style type="text/css"> 
    .header { position:absolute; height:200px; width:700px; } /*change width/height to actual size*/ 
    a.link { background-image:url(t.png); display:block; left:0px; top:0px; z-index:1; } 
    a.icon { background-image:url(x.png); display:block; position:absolute; top:50px; height:32px; width:32px; z-index:2; } /*assuming icons are same size*/ 
    a.fb { background-position:0px 0px; right:94px; } /* 3 10px spacers plus 2 icons widths */ 
    a.tw { background-position:-32px 0px; right:52px; } /* 2 10px spacers plus 1 icon width */ 
    a.yt { background-position:-64px 0px; right:10px; } /* 1 10px spacer */ 
</style> 

<div class="header"> 
    <a class="header link" href="#"></a> 
    <a class="icon fb" href="http://www.facebook.com/"></a> 
    <a class="icon tw" href="http://www.tweeter.com/"></a> 
    <a class="icon yt" href="http://www.youtube.com/"></a> 
</div>