Почему одна картинка со множеством координатных областей плохо сочетается с адаптивным масштабированием SharePoint Modern и как выбрать между Image, Hero и отдельными ссылками.
Определите требование без термина hotspot
Запишите число целей, подпись каждой цели, требуемую последовательность при навигации с клавиатуры и ожидаемое поведение на телефоне. Часто задача «несколько hotspot на картинке» на деле означает меню из трёх–пяти ссылок с общей иллюстрацией. Это важно, потому что Image web part и составной навигационный блок решают разные задачи. Не начинайте с абсолютных координат: сначала установите, должны ли зоны оставаться связаны с пикселями или пользователю важнее понятные отдельные действия.
Учтите границу Image web part
Официальная справка Microsoft для Image web part описывает добавление изображения, альтернативного текста и ссылки. Она не документирует набор независимых координатных областей внутри одного изображения. Поэтому одна общая ссылка — поддерживаемая базовая модель, а произвольная карта областей потребует отдельного компонента и собственного тестирования. Не выдавайте HTML image map или наложение прозрачных блоков за штатную возможность modern page, особенно если редакторы должны поддерживать страницу без разработки.
Проверьте влияние масштабирования
Microsoft указывает, что modern pages адаптивны, а изображения масштабируются и могут обрезаться в зависимости от web part, макета и устройства. Координатная область, привязанная к исходному размеру файла, поэтому способна уйти от нужного объекта после изменения ширины или кадрирования. Перед выбором реализации откройте макет на desktop, узком tablet и телефоне. Если смысловая цель обрезается или зона смещается, эксперимент не проходит даже при идеальном виде на одном экране.
Сравните поддерживаемые варианты
Для одной цели используйте Image web part с одной ссылкой. Для двух–пяти самостоятельных целей рассмотрите Hero: Microsoft документирует до пяти tiles или layers, каждому из которых назначается собственная ссылка. Для большего числа действий лучше отдельные ссылки или карточки с явными подписями. Пользовательский компонент уместен только при подтверждённой необходимости сохранить геометрию изображения и наличии владельца, который проверит адаптивность, доступность, обновления и поведение после изменения темы.
Проведите приёмку до публикации
Проверьте каждую цель мышью и клавиатурой, наличие понятной подписи, альтернативный текст изображения и отсутствие перекрытий на трёх ширинах. Затем увеличьте масштаб браузера и повторите тест. Не используйте конфиденциальную схему помещения или изображение с персональными данными как тестовый файл. Успех — каждая ссылка сохраняет смысл, порядок и доступность независимо от кадрирования. Если это не выполняется, вернитесь к отдельным адаптивным элементам вместо подгонки координат под один экран.
Материал подготовлен самостоятельно с автоматизацией и редакционно проверен 29 июля 2026 года по обезличенному сигналу Microsoft Q&A и официальной документации Microsoft; чужие макеты и изображения не копировались.
Источники и проверка
- Microsoft Support — Add a picture to a SharePoint page проверено 2026-07-29
- Microsoft Support — Image sizing and scaling in modern pages проверено 2026-07-29
- Microsoft Support — Use the Hero web part проверено 2026-07-29
Информация актуальна на дату публикации. Правила сервисов, приложений и сетей могут меняться.