Есть форма со внутреней логикой - при наведении на картинку поверх неё показывается текст.
Это реализовано через <input type="image" onClick = this.form.submit>
Проблема - при нажатии левой кнопкой мышки, браузер распознает эту форму как изображение и при открытии элемента в новом окне - открывает там картинку. А должен - форму)
Как это починить? Нужно чтобы и старая логика работала - при наведении на картинку появлялся элемент поверх неё, при клике на картинку форма сабмитилась, но нужно чтобы и при клике на картинку правой кнопкой мыши вылезало браузерное меню формы(открыть в новом окне), а не картинки(открыть картинку в новом окне)
<div class="col-3" onmouseover="document.getElementById('@divID').style.display = 'block';" onmouseout="document.getElementById('@divID').style.display = 'none';">
<form asp-action="AddComment" asp-controller="Comments" method="post" enctype="multipart/form-data">
<div class="box maintxt">
<input style="box-shadow: 1px 1px 5px black;" type="image" alt="Submit Form" src="https://previews.123rf.com/images/vera1703/vera17031811/vera1703181100083/114147510-two-green-strips-of-ram-for-a-computer-isolated.jpg" onclick="this.form.submit" class="img-fluid goodBoxShadow rounded" width="175" height="250">
<div id="@divID" style="background-color: red; display: none; pointer-events: none;" class="overlay-text absFullSize">
<div class="mh-100 overflow-hidden border-0 textFade" style="--gradient:linear-gradient(transparent 150px, red);">
<div class="bootstrapp-card-body overflow-hidden border-0" style="background-color: red">
<h11 class="text-left font-italic text-white shadowTextBlack">Текст который появлется при наведении мышкой</h11>
</div>
</div>
</div>
</div>
</form>
</div>
Добавлено позже:
Для уточнения прикрепляю картинку, слева - то что выходит при левом клике на мою картинку, справа - то что мне нужно.