Как сделать принудительное контекстное меню для тега object?
Я пытался найти способ установить запасное изображение в html, на случай, если ссылка на основное изображение не будет доступна.
На английском это называется fallback image.
Я нашёл следующее решение:
<object data="/нормальное_изображение.jpg" type="image/jpeg">
<img src="/запасное_изображение.jpg">
</object>
Предполагается, что ссылка на нормальное изображение может быть как рабочей, так и нерабочей; в то время как ссылка на запасное изображение 100% будет рабочей.
В результате, если ссылка на нормальное изображение работает, выводится нормальное изображение (запасное изображение при этом не показывается). Если же ссылка на нормальное изображение не работает, отображается запасное изображение (при этом большой плюс, что не показывается значок сломанного изображения).
Но возникла новая проблема. Как известно, на мобильном устройстве в Chrome при долгом нажатии на изображении, добавленном через тег img, открывается контекстное меню. А при долгом нажатии на изображении, добавленном через тег object, этого не происходит (потому что тег object не является интерактивным контентом, в отличие от тега img).
Таким образом, если в моём случае ссылка на нормальное изображение работает, на элемент невозможно нажать.
Вопрос: как сделать так, чтобы при долгом нажатии на изображении, добавленном через object, открывалось меню с кнопками:
- Открыть в новой вкладке
- Просмотреть изображение
- Копировать изображение
- Скачать изображение
- Найти это изображение в Google
- Поделиться изображением
Как минимум, мне необходима кнопка «Open in new».
Ответы (1 шт):
Как вам идея использовать тег img вместо object при проблеме с загрузкой основной картинки. У вас будет 2 тега img и 1 имеет стиль display=none либо второй добавляется через код js при невозможности загрузки основной