Блог

Я пытаюсь добавить «escape button» на сайт помощи по домашнему насилию для HTML-проекта. У меня есть кнопка, изображение, и это работает, но проблема в том, что вы можете щелкнуть за пределами изображения, и это вызовет кнопку. Я пытаюсь найти способ включить активацию кнопки внутри изображения, а не за его пределами.

 <p id="escape" onclick="myFunction()">
<img src="quickescape.png">
</p>

<script>
        function myFunction() {
            // Get away right now
            window.open("http://weather.com", "_newtab");
            // Replace current site with another benign site
            window.location.replace('http://google.com');
        }
        </script>
  

Вот демонстрация того, с чем я сталкиваюсь, если это было непонятно: https://imgur.com/a/5QepBU1

Нужно ли мне использовать идентификатор карты? Любая помощь будет с благодарностью.

myFunction активируется при нажатии на тег p. Если в теге p есть пробел, событие onClick также будет в пространстве. Предоставление события myFunction тегу img не будет принимать активацию функции в пустом пространстве.

 <p id="escape" >
<img src="quickescape.png" onclick="myFunction()">
</p>

<script>
        function myFunction() {
            // Get away right now
            window.open("http://weather.com", "_newtab");
            // Replace current site with another benign site
            window.location.replace('http://google.com');
        }
        </script>  

Не заключайте его в тег ‘p’ (это элемент уровня блока). Оберните его в встроенный элемент, например, ‘a’ или ‘span’.

Это очень хорошая идея. На вашем месте я бы использовал этот пример ниже, чтобы последний URL-адрес веб-сайта не отображался в разделе истории.

 function quickEscape() {
  window.location.replace('https://www.example.com')
}  

 button {
  height: 50px;
  width: 100px;
  background-image: url('https://www.sciencemag.org/sites/default/files/styles/article_main_large/public/butterfly_16x9_0.jpg?itok=jZ3DYvGK');
  background-position: center;
  background-size: cover;
  color: pink;
  font-weight: bold;
  font-size: 1.25em;
  -webkit-text-stroke: white 1px;
  outline: none;
  border: pink solid 2px;
  border-radius: 10px;
  cursor: pointer;
}  

 <button onclick='quickEscape()'>Quick Escape</button>