0
votes

Comment ajouter un «bouton d'échappement» à un site Web en HTML?

J'essaie d'ajouter un "bouton d'échappement" à un site d'aide sur les abus domestiques pour un projet HTML. J'ai le bouton, une image, et cela fonctionne, mais le problème est que vous pouvez cliquer en dehors de l'image et cela déclenche le bouton. J'essaie de trouver un moyen de contenir l'activation du bouton à l'intérieur de l'image, pas à l'extérieur.

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

Voici une démo de ce que je rencontre si ce n'était pas clair: https://imgur.com/a/5QepBU1

Dois-je utiliser un identifiant de carte? Toute aide serait grandement appréciée.

html button

1 commentaires

mais votre code fonctionne bien avec la balise p . je l'ai vérifié moi-même. Je peux cliquer sur n'importe quelle zone de l'image et le code js fonctionne.

3 Réponses :

1
votes

Ne l'enveloppez pas dans une balise «p» (qui est un élément de niveau bloc). Enveloppez-le dans un élément en ligne, comme un «a» ou un «span».

0 commentaires

1
votes

myFunction est activé lorsque vous cliquez sur la balise p. Si la balise p a de l'espace, l'événement onClick sera également dans l'espace. Donner l'événement myFunction à la balise img n'acceptera pas l'activation de la fonction sur un espace vide.

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

0 commentaires

2
votes

C'est une très bonne idée. Si j'étais vous, j'utiliserais cet exemple ci-dessous afin que la dernière URL du site Web n'apparaisse pas dans la section historique.

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

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;
}

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

0 commentaires