4

Кто может подсказать вот какую штуку. На странице есть изображение, которое увеличивается в зависимости от размера экрана. И на нем есть объекты введите сюда описание изображения Вопрос в том. как отпозиционировать эти объекты, чтобы они не слетали когда изображение увеличивается? Вот тут это реализовано(на последнем экране перед футером) https://straticainternational.com/products/broadway?variant=17254881820761 ,но не могу докопаться как, потому что идет просчет через js как я понимаю. Кто может подсказать как сделать?

7
  • 2
    Элементы абсолютно позиционируются поверх изображения, позиция указывается в процентах. Так же сделано и в примере, никакого js'а не нужно. 1 мая 2019 в 8:14
  • Если вы консоль откроете, то в примере четко видно, что инлайново эти кружки смещаются , вопрос только зачем тогда?и делается там это именно через js
    – Deniskins
    1 мая 2019 в 8:28
  • @Deniskins с чего вы взяли, что они там js-ом смещаются? Там точно так же заданы позиции точек в процентах и они остаются неизменны при изменении размера 1 мая 2019 в 8:42
  • в том примере нету SVG но можно на svg это сделать и эффект пульсации тоже ... 1 мая 2019 в 9:03
  • Я просто смотрел на консоль и на то, что там меняется инлайново на этих элементах, а значит через js было. И я так понял, что js там используется для тултипов по клику на эти кружки. И мне тултипы тоже будут нужны.
    – Deniskins
    1 мая 2019 в 9:06

2 ответа 2

4

Вот вариант с использованием svg

body{
  margin:0;
  overflow:hidden;
}
circle {
  fill:red;
  transition:200ms;
  cursor:pointer;
  stroke: transparent;
}

g:hover circle, g:hover path {
  transform: scale(1.2) rotate(45deg);
  
}

g:hover circle{
  stroke-width: 0.5;
  stroke: white;
}

path {
  stroke: white;
  pointer-events: none;
  transition:200ms;
}
<svg viewbox="-100 -50 200 100" preserveAspectRatio="xMinYMin meet">
  <image xlink:href="https://i.stack.imgur.com/fJW6o.png" 
         x="-100" y="-100" height="200" width="200" />
  <g transform="translate(-45,-2)"><circle r="5"/><path d="M2,0L-2,0M0,-2L0,2"/></g>
  <g transform="translate(60,-1)"><circle r="5"/><path d="M2,0L-2,0M0,-2L0,2"/></g>
  <g transform="translate(-14.5,-15)"><circle r="5"/><path d="M2,0L-2,0M0,-2L0,2"/></g>
<svg>

16
  • 1
    что я и предлогал ...:)) 1 мая 2019 в 9:34
  • 1
    @MaximLensky да, но должны еще набежать любители сделать все на html + css, ничего не имею против однако предпочитаю сразу делать на svg, потому что сегодня просят кружочки, а завтра попросят чтобы у них был градиентный бордер или еще какая нибудь другая дичь 1 мая 2019 в 9:38
  • -))Спс за ответ.
    – Deniskins
    1 мая 2019 в 9:45
  • @Deniskins Всегда пожалуйста 1 мая 2019 в 9:54
  • 1
    @MaximLensky сайты сайтами, я веб приложения делаю, редакторы там всякие, карты, глобусы, визуализацию разную 1 мая 2019 в 10:08
3

Хочу добавить ещё один нюанс. Многие знают, что можно использовать tooltip SVG, который выводится при наведении курсора на объект. Чтобы это работало, нужно объект svg обернуть групповыми тегами <g> и поместить внутрь теги <title>

<g>
 <title> Первая     позиция установки раковины </title> 
 <path>..... </path> 
</g>

Оказывается можно делать вложенные <title> получая много строчные комментарии

В примере ниже взят код @Stranger in the Q и добавлены много строчные tooltip

body{
  margin:0;
  overflow:hidden;
}
circle {
  fill:red;
  transition:200ms;
  cursor:pointer;
  stroke: transparent;
}

g:hover circle, g:hover path {
  transform: scale(1.2) rotate(45deg);
  
}

g:hover circle{
  stroke-width: 0.5;
  stroke: white;
}

path {
  stroke: white;
  pointer-events: none;
  transition:200ms;
}
<svg viewbox="-100 -50 200 100" preserveAspectRatio="xMinYMin meet">
  <image xlink:href="https://i.stack.imgur.com/fJW6o.png" 
         x="-100" y="-100" height="200" width="200" />
  <g transform="translate(-45,-2)">
    <title> Первая 	позиция установки раковины
	  <title>Крепление к каркасу     
	  </title>
	</title>
    <circle r="5"/>
	 <path d="M2,0L-2,0M0,-2L0,2"/>
 </g>
     <g transform="translate(-14.5,-15)"> 
	   <title> Вторая позиция установки раковины
	    <title>Крепление к каркасу     
	    </title>
	</title>
	   <circle r="5"/>
	    <path d="M2,0L-2,0M0,-2L0,2"/>
	</g>
	<g transform="translate(60,-1)">
	  <title> Третья позиция установки раковины
	   <title>Крепление к каркасу     
	   </title>
	</title>
	  <circle r="5"/>
	   <path d="M2,0L-2,0M0,-2L0,2"/>
	</g>
    
<svg>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.