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