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

Question

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

17

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

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

 <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="images/slider1.png"            data-topimage="7%">
                           <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>           

        </div>

Спасибо

Vikram 01 сен. 2013, в 18:23

Источник

1

Сделайте это отдельным <img> . Оберните его <a href="..."> .
Quentin 01 сен. 2013, в 15:48
1

Я знаю, что это этот баннер, он создаст гиперссылку на все баннеры, на которые я хочу ссылаться только на Joun Now, это кнопка Free Button.
Vikram 01 сен. 2013, в 15:54
3

Повторение вопроса не изменит мою рекомендацию. Нет очевидной причины, по которой эта кнопка должна быть частью остальной части изображения.
Quentin 01 сен. 2013, в 15:56

Показать ещё 1 комментарий

Теги:

html

html5

asp.net

hyperlink

2 ответа

6

создав ссылку с абсолютным расположением внутри относительного позиционного 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>

Michael B. 01 сен. 2013, в 18:15

0

Пожалуйста, проверьте описание обновления там ссылка не попадает на поле
Vikram 01 сен. 2013, в 18:56
0

проверить обновленный стиль тега ссылки
Michael B. 02 сен. 2013, в 00:11
0

Отличный ответ. Это имеет преимущество всех стилей, которые могут возникнуть в теге <a>, но недостатком является невозможность быть произвольной <area> (shape poly).
Limited Atonement 15 авг. 2015, в 15:23
0

Хороший. Кажется, не работает поверх объекта (SVG), хотя.
Christian 04 окт. 2016, в 14:28
1

@Christian Вроде работает, возможно выложу свой код в отдельный вопрос
Michael B. 05 окт. 2016, в 03:36

Показать ещё 3 комментария

Ещё вопросы

Сделайте это отдельным <img> . Оберните его <a href="..."> .
Я знаю, что это этот баннер, он создаст гиперссылку на все баннеры, на которые я хочу ссылаться только на Joun Now, это кнопка Free Button.
Повторение вопроса не изменит мою рекомендацию. Нет очевидной причины, по которой эта кнопка должна быть частью остальной части изображения.
Пожалуйста, проверьте описание обновления там ссылка не попадает на поле
проверить обновленный стиль тега ссылки
Отличный ответ. Это имеет преимущество всех стилей, которые могут возникнуть в теге <a>, но недостатком является невозможность быть произвольной <area> (shape poly).
Хороший. Кажется, не работает поверх объекта (SVG), хотя.
@Christian Вроде работает, возможно выложу свой код в отдельный вопрос

Burn_E99 · Accepted Answer · 2013-09-01T17-48-00.000Z

Если вы не хотите сделать кнопку отдельным изображением, вы можете использовать тег <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/" - пример ссылки.

Как я могу проверить правильность местоположения на изображении? Как я могу это проверить?
Сначала у меня есть вопрос: эта кнопка в левом нижнем углу вашего изображения?
Хорошо, тогда X1 будет равен 0, а Y1 будет равен 0. Теперь используйте редактор изображений и измерьте расстояние от нижнего левого угла до нижнего правого угла; это даст вам X2. Затем измерьте от X2 до верхнего правого угла вашей кнопки; это даст вам Y2. Теперь поместите coord атрибут в вашей <area> тег выглядит следующим образом : coord="0,0,X2,Y2" .
пожалуйста, проверьте детали в добавить в описании, которое теперь работает в тегах, которые я добавляю в описании
Вы спрашиваете меня, где вы должны добавить теги <area> тег <map> ? Я не совсем понимаю, что вы имеете в виду, так как в вашем комментарии нет пунктуации.
да, я хочу знать, где я могу добавить его, как вы просили, я добавляю так, но не работает, вы можете проверить, я добавляю код, который я использую в слайдере
@Vikram Викрам, пожалуйста, проверьте мои изменения. Это должно ответить на ваш вопрос.
@Burn_E99 Burn_E99 Хорошее решение! Подскажите, пожалуйста, как гарантировать, что LINK не будет искажаться на экранах разных размеров (или на разных браузерах / устройствах и т. Д.)?
@Dusht Я не совсем уверен, как это работает, но я предполагаю, что это привязывается к изображению, а не к месту на экране. Если на веб-странице есть изображения с автоматическим изменением размера, это может привести к путанице.
И чтобы получить координаты карты, используйте этот сайт - imagemap-generator.dariodomi.de (никак не связан с ним, просто использовал)
Чтобы получить координаты круга или многоугольника, вы можете перейти на image-map.net . И если вы беспокоитесь об отзывчивости, попробуйте github.com/davidjbradshaw/image-map-resizer (не связано, я просто открываю и делюсь)