Is it possible to automatically navigate to a different webpage upon clicking anywhere on the background?

Question

Is it possible to automatically navigate to a different webpage upon clicking anywhere on the background?

I have created a website with a gif background and I want to redirect to another site (like softlaunch) after clicking anywhere on the screen.

This is my HTML and CSS:

body {
  background: url(main.gif) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color: #000000;
  width: 100%;
  height: 100%;
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="shortcut icon" type="image/png" href="fav.png" />
  <link href="style.css" rel="stylesheet" type="text/css">
  <title>@nosleep</title>
</head>

<body>
</body>

</html>

html css href

Answer 1

Answer №1

To eliminate the need for javascript, you can create an element that covers the entire screen. Here is an example:

body {
  background: hsl(0,0%,50%);
}
a#fill{
  position:fixed;
  top:0;
  left:0;
  height:100vh;
  width:100vw;
  color: color:hsl(0,0%,80%);
  text-align: center;
  padding-top: 45vh;
  transition: .3s background-color, .3s color;
}
a#fill:hover {
  background-color: hsla(0,0%,0%,.3);
  color: white;
}

<a href="https://jsfiddle.net/" id="fill">click to visit jsfiddle</a>

If you prefer, you can achieve the same effect with plain javascript like this:

document.addEventListener("DOMContentLoaded", function() {
  document.getElementsByTagName('body')[0].addEventListener('click',function(){
     window.location = 'http://developer.mozilla.org';
  });
});

However, y

Answer 2

To eliminate the need for javascript, you can create an element that covers the entire screen. Here is an example:

body {
  background: hsl(0,0%,50%);
}
a#fill{
  position:fixed;
  top:0;
  left:0;
  height:100vh;
  width:100vw;
  color: color:hsl(0,0%,80%);
  text-align: center;
  padding-top: 45vh;
  transition: .3s background-color, .3s color;
}
a#fill:hover {
  background-color: hsla(0,0%,0%,.3);
  color: white;
}

<a href="https://jsfiddle.net/" id="fill">click to visit jsfiddle</a>

If you prefer, you can achieve the same effect with plain javascript like this:

document.addEventListener("DOMContentLoaded", function() {
  document.getElementsByTagName('body')[0].addEventListener('click',function(){
     window.location = 'http://developer.mozilla.org';
  });
});

However, y

Answer 3

Answer №2

If you're looking for a way to incorporate a click event, check out this code snippet:

<script>
    $(document).ready(function () {
        $("body").on("click", function () { window.open('http://www.w3schools.com', '_blank'); });
    });
</script>

Feel free to use and modify as needed.

Answer 4

If you're looking for a way to incorporate a click event, check out this code snippet:

<script>
    $(document).ready(function () {
        $("body").on("click", function () { window.open('http://www.w3schools.com', '_blank'); });
    });
</script>

Feel free to use and modify as needed.

Is it possible to automatically navigate to a different webpage upon clicking anywhere on the background?

Answer №1

Answer №2

Similar questions

What is the best way to conceal text that overflows from a div and seamlessly return to the beginning once the end of the text has been reached?

Create a dynamic and interactive website using a combination of jQuery and AngularJS

tips for integrating html5 elements with django forms

Applying "Max-Height" property to the cells of a kendo

What is the best way to rearrange images within a grid container?

What is the best way to adjust the dimensions of a textfield in Vuetify by altering its width and height?

Tips on expanding a list within a div after the content in the list is complete

Splitting up website content dynamically across various pages

Tips for incorporating IntersectionObserver into an Angular mat-table to enable lazy loading功能？

Is there a way to seamlessly transition the visibility of the Bootstrap 5.3 Spinner as it loads and unloads?

Tips for implementing CSS on nested classes

Navigate to a fresh webpage and find the scrollbar sitting at the bottom

Utilize HTML to resize image to fit within container

While I have the ability to include an overlay, I unfortunately lack the capability to delete it using jQuery

Problems arising from the checkbox in the table header being selected

Is it possible to connect a JavaScript file to an HTML document within a React application?

Staging a div from a specific origin

Make the width of the div equal to the width of its grandparent element

Arranging the placement of list-group-item buttons

The link button appears unselected without a border displayed