я должен использовать empy div для ссылки на Facebook?

Question

Мой заголовок - довольно большое изображение, сделанное в фотошопе. Я хочу разместить несколько небольших пользовательских значков с Facebook, Twitter, YouTube и т. Д. В этом заголовке в разных местах (слева, справа, сверху, в середине). Я хочу, чтобы у этих значков была ссылка на мою страницу fb, youtube.

Я не уверен, что лучший подход. Должен ли я поместить эти значки на мой заголовок в фотошопе, а затем с пустым div, я должен попытаться найти точное положение значка и связать его со своей страницей fb? Или я должен поместить значок в свой div и с z-index в css, чтобы расположить его поверх заголовка?

Другое решение? Я часами работал в сети и ничего не смог найти ...

Спасибо!

Answer 1

По моему мнению, лучше всего использовать <a> теги со свойством background-image, для которого установлен любой значок.Поместите их поверх вашего изображения заголовка.Если вы создадите значки в том же изображении, что и заголовок, это может вызвать проблемы позже.Делая это отдельно, вы можете перемещать их или менять значки, не редактируя все изображение заголовка.

Answer 2

Лично я бы расположил значки в верхней части заголовка, чтобы потом их можно было изменить.Просто окружите изображение якорем и поместите его внутрь 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 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>

Если вы собираетесь использовать метод привязки к фоновому изображению, вам необходимо установить привязку к блоку, а затем задать размеры этого блока, как показано в примере.

Хорошая хитрость - объединить все ваши иконки в одно изображение. Таким образом, вам нужно загрузить только одно изображение, чтобы меньше вызовов заголовков. Затем вы используете CSS-свойство background-position, чтобы переместить фоновое изображение для каждого значка. В этом примере мы предполагаем, что у вас есть три значка размером 32x32, что позволит получить одно изображение размером 96x32.

<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>