How to add an 'escape button' to a website in HTML? - html

Question

I'm trying to add an "escape button" to a Domestic Abuse help site for an HTML project. I have the button, an image, and it works, but the problem is that you can click outside of the image and it triggers the button. I'm trying to find a way to contain the button activation to inside the picture, not outside of it.
<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>
Here's a demo of what I'm encountering if it wasn't clear: https://imgur.com/a/5QepBU1
Do I need to use a map id? Any help would be greatly appreciated.

Answer 1

myFunction is activated when clicking where p tag is. If p tag has space then onClick event will be in space too. Giving myFunction event to img tag will not accept activating function on empty space.
<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>

Answer 2

Don’t wrap it in a ‘p’ tag (that is a block level element). Wrap it in an inline element, like an ‘a’ or ‘span’.

Answer 3

That is a very good idea. If I were you, I would use this example below so that the website's last url won't show up in the history section.
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>