Отзывчивая область кликов с использованием начальной загрузки и CSS

Я пытаюсь сделать отзывчивую область щелчка для изображения, которое будет иметь 2 ссылки, по одной в каждом прямоугольнике на рисунке ниже. Вот код, который я использую прямо сейчас. У него нет сопоставления, и я объясню, почему:

  <figure id="vpg">
     <img  src="{{asset('img/click area.png')}}" class="img-responsive" width="1024" height="768"alt=""/>

Я пытался использовать класс карты и точки координат, это сработало хорошо, но не отвечает. Затем я искал и пытался использовать плагин Matt Stow: https://github.com/stowball/jQuery-rwdImageMaps но это не сработало. Я считаю, что это из-за начальной загрузки или чего-то еще, потому что его пример не работал с классом img-responsive.
Это изображение: введите здесь описание изображения
Дело в том, что мне нужно использовать этот класс img-responsive, я что-то упускаю? Как мне поступить? Есть ли способ сделать это с помощью css? Я нашел этот пример, но не смог его понять: http://techlife.samsung.com/the-perfect-game-day-set-up.html


html jquery css responsive twitter-bootstrap-3
person Vinícius Pacheco Vieira    schedule 30.06.2016    source источник
comment
Если я правильно понимаю, о чем вы спрашиваете, я бы создал эти два элемента div отдельно и абсолютно расположил их поверх изображения.   -  person 4ever Youngz    schedule 30.06.2016

Ответы (3)


arrow_upward
1
arrow_downward

Винисиус Пачеко Виейра отвечает, и ссылка работает. Все это делается для вас в сеточной системе, такой как начальная загрузка или использование основы. Загрузите Foundation здесь система Foundation Grid и прочтите документацию на их сайте, чтобы узнать больше о системе grid. Все сводится к предварительно созданным элементам div, которые предопределены по ширине, поэтому, когда вы помещаете изображение внутрь, оно будет масштабироваться с этим элементом div, который находится вокруг изображения. С Foundation вы получаете полный файл CSS, в котором выполняются все основные настройки, но если вы хотите что-то изменить, просто найдите его в коде, используя элемент инспектора (клавиша F12) в браузере, и укажите элемент для проверки. Это покажет вам, какой файл управляет каким классом и что внутри....и т.д..

person mackelele    schedule 04.07.2016
comment
Спасибо за информацию! Я посмотрю их материал о системе сетки, это, безусловно, поможет мне понять больше. - person Vinícius Pacheco Vieira; 07.07.2016

arrow_upward
1
arrow_downward

Попробуйте использовать этот тег img без заданной ширины и высоты. Таким образом, вы можете контролировать ширину и высоту в файле css, манипулируя его стилем. Попробуйте использовать % вместо px, так как таким образом % останется относительно ширины экрана. Если это не поможет, тогда избавьтесь от ширины и высоты в теге img и окружите свой img и фигуру новым div (используя систему сетки, если вы используете загрузку, она уже сделана внутри файла css). Таким образом, система сетки будет контролировать ширину изображения и дочерних элементов внутри него.
Надеюсь, я ответил на ваш вопрос.

person mackelele    schedule 30.06.2016
comment
Я использовал вашу идею, но я не совсем понял, как использовать систему сетки. Я нашел вопрос с похожими проблемами, я полагаю, что они использовали то, что вы сказали: над изображением"> stackoverflow.com/questions/16363029/ - person Vinícius Pacheco Vieira; 01.07.2016

arrow_upward
0
arrow_downward

Используя концепции mackelele и 4ever, Янгз сказал, что я закончил с этим кодом, который решил эту ситуацию.

<style>
#counter {
          position: relative;
      }
      #background{


      }
      #squaremoreleft{
        position:absolute;
        width: 20%;
        left:5%;
        top:51%;
      }
      #squareright{
        position:absolute;
        width: 20%;
        left:26%;
        top:51%;
      }
</style

<div class="container">
          <div class="row-fluid">
            <div class="span12">
              <div id="counter">
                <img id="background"src="{{asset('img/imgbackground.png')}}" class="img-responsive"/>
                <a href="link1">
                <img id="squaremoreleft"src="{{asset('img/squareleft.png')}}" class="img-responsive" />
                </a>
                <a href="link2>
                <img id="squareright"src="{{asset('img/squareright.png')}}" class="img-responsive" />
                </a>
              </div>
            </div>
          </div>
        </div>

Код вдохновлен этим вопросом Адаптивные изображения, расположенные над изображением и его исходным кодом: http://jsfiddle.net/MgcDU/12389/

person Vinícius Pacheco Vieira    schedule 01.07.2016