169 похожих чатов

#Вопрос который я задал вчера, я так увы и не

решил.
Вопрос был про то как отметить отличия на 2 картинках через javascript.

Вот такие варианты решения проблем получил.

1) Высота/ширина картинки, число строк/столбцов известны, так?
Порезать картинку на число квадратов и положить в бекграунды ячеек с background-size: cover. Далее выставляем максимальную ширину блока, и ячейкам даем ширину в процентах. При ресайзе берем текущую ширину и высоту блока и высчитываем пропорционально высоту ячейки. В итоге получим адаптивную картинку. По кликами, например, из дата атрибутов берем значения и складываем в массив. После истечения времени сравниваем полученные значения с ответом. Бинго.)

-это пока звучит как самый работающий вариант но не сильно хочется резать 2 картинки на квадраты. Тем более различия могут быть на стыке квадратов. Ограниченый функционал получается.

2) "Отличия" можно хранить в третьей картинке, того же размера как и обе, с прозрачным фоном и нарисованными разными цветами областями-различиями. Тогда все просто, при клике на картинку пересчитывать координаты клика в координаты клика по картинке, и канвасом проверять "цвет" на тестовой картинке. Найденные цвета - запоминать. Так можно учитывать количество найденных отличий

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

—- не мог выставить поверх картинку, чтобы она идеальна накладывалась на изображение и не смещалась при уменьшении экрана.
У меня там так
<div class=„row”>
<img>
<img>
</div>

Не понимаю куда пихать изображение.
Делать это третим <img> или как background к блоку row

Короче квест есть, решения нет :(
Если кто подскажет то буду благодарен.

1 ответов

3 просмотра

Есть такая олдовая штука в html, image map

Похожие вопросы

Обсуждают сегодня

@Aiwan что такое база образца?
Alexey
27
Не многие знают, а кто знает, тот уже успел забыть, что в далёком 2004 году эта игра произвела настоящий фурор, настолько революционной была технология, применяемая для её соз...
ICCID
4
Хотя у меня сейчас есть более сложная задача, вот её думаю: как объяснить челу переходного возраста противоположного полу, обучающегося в польском колледже (а-ля наш техникум)...
Вячеслав Кузьменко
15
коллеги, добрый вечер! А никто не знает как модальная форма может себя закрыть? Ну допустим модальная форма определила, что смысла ей работать нет и хочет вернуть modalResult...
Михаил
83
Добрый день Хочу начать обучение языку, не являюсь представителем it, буду благодарна за помощь, совсем пока не понимаю ничего) Подскажите, пожалуйста, где можно начать первы...
Sara Lala
30
верно что я могу удалить эти addq и subq т.к. со стеком никакого взаимодействия нет (исключая call)?
Michael
16
Hi Everyone! To all Are you Looking for Interview Support at the Lowest Price? Look no further! Then contact us We offer Interview Support for a low cost variety of technol...
Rambabu Nallamilli
3
всем привет. подскажите: вот по русски называется "прошивка для контроллера". или "бинарь" могут сказать. или "дамп". А как по английски это называется? Я хочу попытаться по...
Павлик Ливаткин
4
А если изначально бот работал так : есть сайт онлайн школы. У каждого ученика свой кабинет. Где он авторизуется по своим данным. И уже в кабинете, на самом сайте делает оплату...
Денис 💡 Фрилансер
13
средствами IBX как-то можно выполнить запрос insert ... returning?
Igor
31
Карта сайта