0

Есть форма со внутреней логикой - при наведении на картинку поверх неё показывается текст.
Это реализовано через <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>

Добавлено позже: Для уточнения прикрепляю картинку, слева - то что выходит при левом клике на мою картинку, справа - то что мне нужно.

5
  • 1
    "нужно чтобы и при клике на картинку правой кнопкой мыши вылезало браузерное меню формы(открыть в новом окне)", а что Вы хотите отобразить там (ту эту же форму и так бесконечно)? Насколько я знаю открыть в новом окне таким образом можно только фреймы. 20 мар 2021 в 21:19
  • 1
    У браузера нет меню для форм.
    – Qwertiy
    20 мар 2021 в 22:56
  • @Qwertiy Прикрепил картинку к вопросу, чтобы было понятнее, что я имею ввиду
    – Potion
    21 мар 2021 в 16:21
  • @DaniilLoban Прикрепил картинку к вопросу, чтобы было понятнее, что я имею ввиду
    – Potion
    21 мар 2021 в 16:21
  • @Potion, так форма - это не ссылка.
    – Qwertiy
    21 мар 2021 в 16:43

3 ответа 3

3
+50

Думаю вам нужно перехватить событие onContextMenu и далее его обрабатывать выводя своё меню, вот пример кода, при onContextMenu мы получаем id элемента на котором произошло событие для дальнейшего использования(в том числе можно отобразить в контектном меню так как мы делаем это до его показа).

скриншот

  var menu = document.querySelector('.menu');
  var selectedId = ''; // переменная для id

  function showMenu(x, y){
    menu.style.left = `${x}px`;
    menu.style.top = `${y}px`;
    menu.classList.add('show-menu');
  }
  function hideMenu(){
    menu.classList.remove('show-menu');
  }
  function onContextMenu(e){
    // запоминаем id элемента на котором вызвали контекстное меню
    selectedId = e.target.id;
    e.preventDefault();
    showMenu(e.pageX, e.pageY);
    document.addEventListener('mousedown', onMouseDown, false);
  }
  function onMouseDown(e){
    if (e.target.id === "open-new-window"){
      alert("если выбрано меню открываем в новой вкладке");
      //window.open(`https://www.google.com/search?q=${selectedId}`); 
    }
    hideMenu();
    document.removeEventListener('mousedown', onMouseDown);
  }
  document.addEventListener('contextmenu', onContextMenu, false);
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    
.container{left:0;margin:auto;position:absolute;top:20%;width:100%;text-align:center}.menu{position:absolute;width:230px;padding:2px;margin:0;border:1px solid #bbb;background:#eee;background:-webkit-linear-gradient(to bottom,#fff 0,#e5e5e5 100px,#e5e5e5 100%);background:linear-gradient(to bottom,#fff 0,#e5e5e5 100px,#e5e5e5 100%);z-index:100;border-radius:3px;box-shadow:1px 1px 4px rgba(0,0,0,.2);opacity:0;-webkit-transform:translate(0,15px) scale(.95);transform:translate(0,15px) scale(.95);transition:transform .1s ease-out,opacity .1s ease-out;pointer-events:none}.menu-item{display:block;position:relative;margin:0;padding:0;white-space:nowrap}.menu-btn{background:0 0;line-height:normal;overflow:visible;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;display:block;width:100%;color:#444;font-family:Roboto,sans-serif;font-size:13px;text-align:left;cursor:pointer;border:1px solid transparent;white-space:nowrap;padding:6px 8px;border-radius:3px}.menu-btn::-moz-focus-inner{border:0;padding:0}.menu-text{margin-left:25px}.menu-btn .fa{position:absolute;left:8px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.menu-item:hover>.menu-btn{color:#fff;outline:0;background-color:#2e3940;background:-webkit-linear-gradient(to bottom,#5d6d79,#2e3940);background:linear-gradient(to bottom,#5d6d79,#2e3940);border:1px solid #2e3940}.menu-item.disabled{opacity:.5;pointer-events:none}.menu-item.disabled .menu-btn{cursor:default}.menu .menu{top:4px;left:99%}.menu-item:hover>.menu,.show-menu{opacity:1;-webkit-transform:translate(0,0) scale(1);transform:translate(0,0) scale(1);pointer-events:auto}.menu-item:hover>.menu{-webkit-transition-delay:.1s;transition-delay:.3s}

  </style>
</head>
<body>
<menu class="menu">
  <li class="menu-item">
    <button type="button" class="menu-btn">
      <span id="open-new-window" class="menu-text">Открыть в новой вкладке</span>
    </button>
  </li>
</menu>

<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 id="oneID" oncontextmenu='return true;' 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>
</body>
</html>

Без создания меню:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title></title>

</head>
<body>
<div class="col-3">
  <form asp-action="AddComment" asp-controller="Comments" method="post" enctype="multipart/form-data">
    <div class="box maintxt">
      <a href="https://google.com" onmouseover="document.getElementById('@divID').style.display = 'block';" onmouseout="document.getElementById('@divID').style.display = 'none';">
      <input id="oneID" oncontextmenu='return true;' 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">
      </a>
      <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>

</body>
</html>

2
  • Спасибо за подробный ответ! Возможно возникло недопонимание, но мне нужно не самописное контекстное меню, а именно браузерное - добавил скриншоты с пояснением к вопросу
    – Potion
    21 мар 2021 в 16:26
  • 1
    Спасибо что уточнили, дополнил ответ 21 мар 2021 в 19:19
1

Вот так вот можно сделать..
Используя position: absolute; и *z-index: **;
За место ссылки можете поставить то, что вам нужно.
Суть в том, что будет перекрытие слоёв. Когда вы будете нажимать на картинке её на самом деле будет закрывать другой слой. Который выше на z-index: 1 или 2...;
Ну и каждый такой элемент (комбинацию элементов a, form) с перекрытием просто оборачиваем в отдельный бокс и другие так-же, дальше эти боксы позиционируем как вам нужно.

.moto {
  background-size: cover;
  position: absolute;
  z-index: 0;
  width: 200px;
}
.box {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;
  z-index: 1;
  cursor: auto;
}
<a href="#" class="box"></a>
<form action="">
    <img class="moto" src="https://sun9-14.userapi.com/fYL5s_GDK8mAx7ehR7TLtvD8VwQmnQq1Q5JiLg/XQiUfIWNup8.jpg" alt="">
</form>

0

Вот вам контекст меню с открытием ссылки в новой вкладке

<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">

<!--> Добавил ссылку <-->
<!--> В атрибуте href укажите ссылку которая вас интересует. <-->
      <a href="https://u.to/kXMrGw">
<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">
</a>
      <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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.