Заметки на изображении

Помещаем на изображение заметки поясняющие ту или иную деталь. Данная функция может быть полезна для пояснения каких-либо чертежей или схем, выделения основных преимуществ товара и т.д.

Перебрал множество скриптов с подобным функционалом, но этот мне понравился больше других: выглядит довольно стильно, принцип работы прост.

Метки на изображении Points of Interest

Подключаем простой скрипт

jQuery(document).ready(function($){

//open interest point description
$('.cd-single-point').children('a').on('click', function(){
var selectedPoint = $(this).parent('li');
if( selectedPoint.hasClass('is-open') ) {
selectedPoint.removeClass('is-open').addClass('visited');
} else {
selectedPoint.addClass('is-open').siblings('.cd-single-point.is-open').removeClass('is-open').addClass('visited');
}
});

//close interest point description
$('.cd-close-info').on('click', function(event){
event.preventDefault();
$(this).parents('.cd-single-point').eq(0).removeClass('is-open').addClass('visited');
});

});

Подключаем стили — см. закладку стили (слева) + прописываем расположение меток

/* Расположение меток */

.cd-single-point:nth-of-type(1) {bottom: 40%; right: 30%;}

.cd-single-point:nth-of-type(2) {bottom: 24%; right: 46%;}

.cd-single-point:nth-of-type(3) {top: 28%; left: 20%;}

.cd-single-point:nth-of-type(4) {top: 20%; right: 22%;}

Верстка должна выглядеть следующим образом:

<div class="cd-product-wrapper">
<img src="/wp-content/uploads/2017/03/Lost_Planet_3-700x298.jpg">
<ul>

<li class="cd-single-point">
<a class="cd-img-replace" href="#0"></a>
<div class="cd-more-info cd-bottom">
<h2>Заголовок</h2>
<p>Описание</p>
<a href="#0" class="cd-close-info cd-img-replace">Close</a>
</div>
</li>

<!-- следующая метка -->

</ul>
</div>

Дополнительный класс для cd-more-info это 4 направления открытия метки: cd-top (вверх), cd-bottom (вниз), cd-left (влево), cd-right (вправо)

• Title here

  Description here

  Close

• Title here

  Description 2 here

  Close

Заметки на изображении от Adama Grayson

Нашел еще одно неплохое решение, но с другой реализацией, в данном случае упор делается больше на скрипт и эффект действует при наведении.

Верстка состоит из одного div’а с классом spot-container.

CSS

.spot-container {
  width: 100%;
  height: 500px;
  position: relative;
  background-image: url(/wp-content/uploads/2017/03/black-and-white-nature-photography-stag.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
  
.hot-spot {
  width: 20px;
  height: 20px;
  background-color: #D29A4E;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  opacity: 0.8;
  z-index: 1;
}
		  
.hot-spot:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid #D29A4E;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    opacity: 0;
    transition: 0.2s all;
}			
				
.hot-spot:hover {cursor: pointer; opacity: 1;}

.hot-spot:hover:after {width: 25px; height: 25px; opacity: 1;}
						  
.speech-bubble {
  position: absolute;
  width: 150px;
  background-color: white;
  border-radius: 4px;
  text-align: center;
  display: none;
  z-index: 2;
}
						  
.speech-bubble h1 {font-size: 20px; margin-top: 12px; color: #333333;}
							  
.speech-bubble p {
    margin-top: 4px;
    margin-bottom: 12px;
    font-style: italic;
    color: #888888;
}
								  
.speech-bubble p:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-top-color: #ffffff;
    border-width: 10px;
    margin-left: -10px;
}

В данном скрипте х=0, y=0 — это центр изображения (размер изображения также задается здесь — imageWidth, imageHeight)

var imageWidth = 737,
    imageHeight = 500,
    imageAspectRatio = imageWidth / imageHeight,
    $window = $(window);

var hotSpots = [{
  'title': 'Mouth',
  'description': 'scream.',
  'x': 50,
  'y': 50
}, {
  'title': 'Body',
  'description': 'Look at it.',
  'x': 100,
  'y': 100
}, {
  'title': 'Antlers',
  'description': 'They crazy.',
  'x': -50,
  'y': -50
}, {
  'title': 'This Ear',
  'description': 'It can hear things.',
  'x': -125,
  'y': 125
}];

function appendHotSpots() {
  for (var i = 0; i < hotSpots.length; i++) {
    var $hotSpot = $('<div>').addClass('hot-spot');
    $('.spot-container').append($hotSpot);
  }
  positionHotSpots();
}

function appendSpeechBubble() {
  var $speechBubble = $('<div>').addClass('speech-bubble');
  $('.spot-container').append($speechBubble);
}

function handleHotSpotMouseover(e) {
  var $currentHotSpot = $(e.currentTarget),
      currentIndex = $currentHotSpot.index(),
      $speechBubble = $('.speech-bubble'),
      title = hotSpots[currentIndex]['title'],
      description = hotSpots[currentIndex]['description'],
      hotSpotTop = $currentHotSpot.offset().top,
      hotSpotLeft = $currentHotSpot.offset().left,
      hotSpotHalfSize = $currentHotSpot.width() / 2,
      speechBubbleHalfSize = $speechBubble.width() / 2,
      topTarget = hotSpotTop - $speechBubble.height(),
      leftTarget = (hotSpotLeft - (speechBubbleHalfSize)) + hotSpotHalfSize;
  
  $speechBubble.empty();
  $speechBubble.append($('<h1>').text(title));
  $speechBubble.append($('<p>').text(description));
  
  $speechBubble.css({
    'top': topTarget - 20,
    'left': leftTarget,
    'display': 'block'
  }).stop().animate({
    opacity: 1
  }, 200);
}

function handleHotSpotMouseout(){
  var $speechBubble = $('.speech-bubble');
  $speechBubble.stop().animate({
    opacity: 0
  }, 200, function(){
    $speechBubble.hide();
  });
}

function positionHotSpots() {
  var windowWidth = $window.width(),
    windowHeight = $window.height(),
    windowAspectRatio = windowWidth / windowHeight,
    $hotSpot = $('.hot-spot');

  $hotSpot.each(function(index) {
    var xPos = hotSpots[index]['x'],
        yPos = hotSpots[index]['y'],
        desiredLeft = 0,
        desiredTop = 0;

    if (windowAspectRatio > imageAspectRatio) {
      yPos = (yPos / imageHeight) * 100;
      xPos = (xPos / imageWidth) * 100;
    } else {
      yPos = ((yPos / (windowAspectRatio / imageAspectRatio)) / imageHeight) * 100;
      xPos = ((xPos / (windowAspectRatio / imageAspectRatio)) / imageWidth) * 100;
    }

    $(this).css({
      'margin-top': yPos + '%',
      'margin-left': xPos + '%'
    });

  });
}

appendHotSpots();
appendSpeechBubble();
$(window).resize(positionHotSpots);
$('.hot-spot').on('mouseover', handleHotSpotMouseover);
$('.hot-spot').on('mouseout', handleHotSpotMouseout);

Пример (скорее всего сами всплывающие подсказки не будут видны, из-за некоторых родительских свойств)