Как сделать часть изображения кликабельной ссылкой

У меня есть баннер на веб-странице, а часть изображения - графическое изображение кнопки. Как сделать только ту часть, где кнопка является кликабельной ссылкой, такой как href? Вы можете увидеть образец изображения ниже.

В изображении баннера есть графическая кнопка "Join Now, Its Free". Я хочу добавить ссылку в этот квадрат, поэтому, когда пользователи нажимают на это поле на баннере, он откроет следующую страницу. Я хочу знать, как я могу добавить ссылку только на эту кнопку. Я не хочу добавлять к нему тег <button>; Я просто хочу добавить ссылку, основанную на области графика "Join Now, Its Free". У кого-нибудь есть идеи о том, как я могу добавить ссылку на эту часть области изображения без использования тега <button>.

Ответы

Ответ 1

Если вы не хотите сделать кнопку отдельным изображением, вы можете использовать тег <area>. Это делается с помощью html, аналогичного этому:

<img src="imgsrc" width="imgwidth" height="imgheight" alt="alttext" usemap="#mapname">

<map name="mapname">
    <area shape="rect" coords="see note 1" href="link" alt="alttext">
</map>

Примечание 1: Атрибут coords=" " должен быть отформатирован следующим образом: coords="x1,y1,x2,y2" где:

x1=top left X coordinate
y1=top left Y coordinate
x2=bottom right X coordinate
y2=bottom right Y coordinate

Примечание 2: Атрибут usemap="#mapname" должен включать #.

EDIT:

Я посмотрел ваш код и добавил в теги <map> и <area>, где они должны быть. Я также прокомментировал некоторые части, которые либо перекрывали изображение, либо казались там бесполезными.

<div class="flexslider">
    <ul class="slides" runat="server" id="Ul">                             
        <li class="flex-active-slide" style="background: url(&quot;images/slider-bg-1.jpg&quot;) no-repeat scroll 50% 0px transparent; width: 100%; float: left; margin-right: -100%; position: relative; display: list-item;">
            <div class="container">
                <div class="sixteen columns contain"></div>   
                <img runat="server" id="imgSlide1" style="top: 1px; right: -19px; opacity: 1;" class="item" src="./test.png" data-topimage="7%" height="358" width="728" usemap="#imgmap" />
                <map name="imgmap">
                    <area shape="rect" coords="48,341,294,275" href="http://www.example.com/">
                </map>
                <!--<a href="#" style="display:block; background:#00F; width:356px; height:66px; position:absolute; left:1px; top:-19px; left: 162px; top: 279px;"></a>-->
            </div>
        </li>
    </ul>
</div>
<!-- <ul class="flex-direction-nav">
    <li><a class="flex-prev" href="#"><i class="icon-angle-left"></i></a></li>
    <li><a class="flex-next" href="#"><i class="icon-angle-right"></i></a></li>
</ul> -->

Примечания:

coord="48,341,294,275" относится к вашему снимку экрана, который вы опубликовали.
src="./test.png" - это местоположение и имя снимка экрана, который вы опубликовали на моем компьютере.
href="http://www.example.com/" - пример ссылки.

Ответ 2

создав ссылку с абсолютным расположением внутри относительного позиционного div. Вам нужно установить ширину и высоту канала как размеры кнопок, а также левые и верхние координаты для левого верхнего угла кнопки в оберточном div.

<div style="position:relative">
 <img src="" width="??" height="??" />
 <a href="#" style="display:block; width:247px; height:66px; position:absolute; left: 48px; top: 275px;"></a>
</div>