Как я могу щелкнуть ссылку, которая открывает изображение, а затем отображать только часть этого изображения
У меня есть большое изображение карты с достопримечательностями.
Я хочу, чтобы на странице текста была кнопка, при нажатии на кнопку изображение карты открывается в другом окне. Затем мне нужно, чтобы изображение отображало только соответствующую часть карты, показывающую достопримечательность, указанную на исходной странице с помощью кнопки.
Я нашел способы показать определенный участок карты с помощью и координат, или с помощью карты в качестве листа спрайтов, или с помощью CSS background-postion, но я не могу найти способ реализовать это, нажав кнопку.
В идеале я бы хотел добиться этого с помощью только CSS, потому что будет довольно много страниц, ссылающихся на это изображение.
Вот небольшой справочник того, чего я пытаюсь достичь.
Изображение, показывающее, как это работает
<style>
.map-one {
background: url('map.jpg');
background-position: center bottom;
height: 300px;
width: 300px;
}
</style>
<button><a class = "map-one" href = "map.jpg">Click</a></button>
Это пример кода, который я пробовал, что явно неверно, но я не знаю, как применить стиль css к изображению при нажатии на ссылку.
Приведите пример кода, чтобы показать, что вы пробовали.
Я попытался сделать фоновую позицию css, а затем добавил класс в тег привязки на кнопке, но ничего не произошло, когда я нажал кнопку. Все, что я нашел в Интернете, отображало изображение в div на той же странице, но мое изображение должно быть отдельной страницей, которая открывается при нажатии кнопки. Очевидно, я не хочу, чтобы для каждого раздела карты вызывались отдельные изображения.
Следовательно, вам необходимо передать правильные данные с первой страницы на вторую. Самый простой способ - просто включить запрос или хеш-фрагмент в URL-адрес и просмотреть их на второй странице, чтобы она знала, какой объект карты отображать.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Ну, это не работает только с чистым css, вам нужно передать некоторые параметры в новое окно. Итак, я предполагаю, что вы передаете координаты X и Y в новое окно, и они доступны на вашей новой странице.
Сначала вам нужно обернуть «Карту», чтобы дать ей область просмотра. Если на странице больше ничего нет, теоретически можно использовать body:
<div id = "mapviewport">
<div id = "map">
</div>
</div>
Поэтому, если вы хотите, чтобы пользователь мог исследовать карту, вы можете использовать overflow: auto в области просмотра, в противном случае используйте overflow: hidden.
Контейнер карты получает ширину / высоту карты. Карта предоставляется через background-image на карте-контейнере.
Теперь, чтобы прокрутить до нужной позиции, используйте .scrollTop и .scrollLeft в mapViewport, чтобы прокрутить карту в нужное место.
Вам нужно будет откалибровать значения, пока вы не достигнете точной области, которую хотите, но код будет примерно таким:
Главная страница
<a href = "map.html" target = "_blank"><button> <!-- Map page path -->
CLICK ME!
</button></a>
Страница карты
<style>
div.map {
background-image: url('map.png'); /* image file path */
background-position: 70px 90px; /* image position */
width: 200px; /* image size */
height: 200px;
}
</style>
<div class = "map"></div>
Спасибо, похоже, работает. Мне просто нужно определить расположение моих точек интереса. Ваше здоровье
Можете ли вы выделить проблему, которая мешает вам привязать ее к кнопке? Вы на правильном пути, используя высоту, ширину и положение фона, чтобы вырезать нужную часть изображения, но без кода для просмотра или более подробного объяснения мы понятия не имеем, почему вы не можете его привязать к кнопке. Когда кнопка нажата, вы должны вычислить, какие значения вам нужны, чтобы показать правильный фрагмент изображения, и передать их на вторую страницу. (параметр url, postMessage, ...). Затем вторая страница просто должна посмотреть на эти значения и изменить CSS встроенного изображения.