How to create floating banner ads, images, and Giifs, with a close button

Learn How to create floating banner ads, images, and Giifs, with a close button by HTML , CSS, and JAVASCRIPT by Ar3school


HTML code:


<!DOCTYPE html>

<html>

<head>

  <title>Floating Image with Close Button</title>

  <link rel="stylesheet" href="styles.css">

</head>

<body>


<div class="floating-image" id="floatingImageContainer">

  <img src="https://youriimagelink.com" alt="Floating Image" id="floatingImage">

  <span class="close-button" onclick="closeImage()">Close</span>

</div>


<script src="script.js"></script>

</body>

</html>


CSS code;


/* Style for the floating image container */
.floating-image {
  position: fixed;
  bottom: 20px;
  right: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  padding: 5px;
}

/* Style for the close button */
.close-button {
  position: absolute;
  top: -10px;
  right: -10px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}


JAVASCRIPT code:

function closeImage() {
  var floatingImageContainer = document.getElementById("floatingImageContainer");
  floatingImageContainer.style.display = "none";
}



Note;

This example creates a simple HTML page that contains a floating image, banner or Gifs positioned at the bottom right of the page with a close button (represented by the 'Close' character). Clicking the close button triggers the closeImage() function, which hides the entire floating image container.

Replace the image URL https://youriimagelink.com with the path to your desired image. Adjust the styles and content as needed to fit your requirements.

Comments :

Post a Comment