Placing an exit button beside an image for easy navigation

Here is a snippet of my code:

<style type="text/css"> 
.containerdiv { position:relative;width:100%;display:inline-block;} 
.image1 { position: absolute; top: 20px; left: 10px; }

</style>

<div class="containerdiv">

<image src="https://media.gettyimages.com/photos/perfect-wood-planks-background-picture-id523584249?b=1&amp;k=6&amp;m=523584249&amp;s=612x612&amp;w=0&amp;h=LJ8b5cbwCLJU7iZAPSbm5skekvf_Vy7RZbgACH6Ze8g=" style="border:none;position:absolute;width:612px;height:612px;"></iframe>

<img class="image1" border="0" src="http://2.bp.blogspot.com/-_RSqh-pRVbE/VYkvXSK0f3I/AAAAAAAAAIQ/efZ1rnXb-_g/s320/manchester-united-fc.png" alt="" width="350px" height="318px">
<!-- Need help adding close button -->

</div>

I'm looking for assistance in integrating a simple 'x' close button next to the soccer club image that, when clicked, will make the image disappear. Thank you!

javascripthtmlcss

Answer №1

Following the recent events, I feel a strong urge to assist a supporter of United... https://jsfiddle.net/q724sb3o/10/

I made some modifications to your elements by assigning them IDs instead of classes and included a basic button to hide the image (the button also disappears).

HTML

<div class="containerdiv">

<image src="https://media.gettyimages.com/photos/perfect-wood-planks-background-picture-id523584249?b=1&amp;k=6&amp;m=523584249&amp;s=612x612&amp;w=0&amp;h=LJ8b5cbwCLJU7iZAPSbm5skekvf_Vy7RZbgACH6Ze8g=" style="border:none;position:absolute;width:612px;height:612px;" />

<img id="image1" border="0" src="http://2.bp.blogspot.com/-_RSqh-pRVbE/VYkvXSK0f3I/AAAAAAAAAIQ/efZ1rnXb-_g/s320/manchester-united-fc.png" alt="" width="350px" height="318px" />
<span id="close" onClick="hideImg()">X</span>

</div>

CSS

.containerdiv { position:relative;width:100%;display:inline-block;} 
#image1 { position: absolute; top: 20px; left: 10px; }
#close {position:absolute; top: 0px; left: 350px; font-size: 32px; cursor: pointer }

JS

function hideImg() {
  document.getElementById("image1").style.display = "none";
  document.getElementById("close").style.display = "none";
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When utilised within the same function, JSON values in JavaScript can yield varying results

Recently, I've been grappling with a JavaScript issue that involves fetching JSON values as data-attributes to populate a modal. This task sounds simple enough, but as a newcomer to this field, I find myself facing challenges. The main goal is to ite ...

javascriptjqueryjson

Display an echo within a DIV

Encountering a frustrating issue and seeking assistance. The problem seems to involve loading a page into a DIV. I've created a form for updating database information in a single file with PHP code, loaded into a DIV. When accessing the page directly ...

phphtmlecho

Persistently save retrieved information and store data in MongoDB by utilizing Node.js

I am facing the challenge of continuously making an http.get request to an API that provides location data. I have tried a basic get request to test if the data is being received, and it is. However, the issue is that I need this process to run in a contin ...

javascriptnode.jsmongodbgps

Client-side sorting in jqGrid

I'm working with a tree-grid that has autoloading rows. My objective is to sort the grid by the tree column directly on the client side. However, every time I click on the column header to sort, it triggers an unnecessary Ajax call for sorting, when ...

javascriptjqueryajaxsortingjqgrid

What is the best way to show a message of success once the user has been redirected to the homepage?

Currently, I have a registration form utilizing AJAX and PHP for validation. Error messages can be displayed on the registration page if the user does not correctly fill out the form. Upon successful registration, the user is redirected back to the home pa ...

javascriptphpjqueryajax

I am experiencing issues with my buttons not functioning properly after implementing the fetch API in conjunction with express.js

I'm facing a peculiar issue with buttons that are meant to display templates on the client page. This code is executed on the client side. The primary function of this class is to allow the user to click a button, send a request, receive a response c ...

javascriptnode.jsexpress

Discover the simple steps to generating dynamic variables with jQuery!

I am looking to dynamically create jQuery variables based on values in a loop. Here is an example of what I am trying to achieve. array=["student","parent","employee"] $.each(user_types, function( index, value ){ var dynamicType = value + "_type"; // t ...

javascriptjquery

Is it possible for XSS attacks to exploit the HREF attribute when used with jQuery?

Burp suite displaying an error message. The application seems to have a potential vulnerability related to DOM-based cross-site scripting. Data is retrieved from the location and passed to jQuery() using the following statement: jQuery(location). ...

javascriptjqueryxss

[Vue alert]: Issue in created function: "TypeError: Unable to assign value to undefined property"

I'm currently in the process of developing a VueJS application where I have implemented a child component called Child.vue that receives data from its parent. Child.vue export default{ props:['info'], data: function(){ ...

javascripthtmlvue.jsvuejs2vue-component

Crafting dynamic objects with THREE.JS

I am working with a JSON configuration that looks like this: { shape:[ 'SphereGeometry', [7, 16, 16] ] } My goal is to load a model using the following code: new THREE[shape[0]].apply( this, shape[1] ) However, it seems that using "new" and " ...

javascriptthree.js

Error: Attempting to access an undefined property

I have a quite extensive Vue/Vuitify project that is not functioning correctly. I have simplified the project down to a small program to highlight the issue. Despite trying everything that comes to mind, and even some things that don't, I am unable to ...

javascriptnode.jsvue.jsvuetify.js

Finding a nested div within another div using text that is not tagged with XPath

I need help creating an XPath to select a div with the class "membername" using the parameter "Laura". <div class="label"> <div class="membername"></div> David </div> <div class="label"> < ...

javascripthtmlxmlseleniumxpath

A ReactJS Error occurred: {error: 400, reason: "Failed match", message: "Failed match [400]", errorType: "Meteor.Error"}

I encountered an issue while attempting to send form data to the server when clicking on the Next Button in a Wizard Form. The error that occurs is related to an "Undefined User" warning displayed in the Console during Step 1 of the form submission: " { ...

javascriptreactjsmongodbmeteorredux

JavaScript XML Serialization: Transforming Data into Strings

When trying to consume XML in an Express server using express-xml-bodyparser, the resulting object is not very useful. This is the XML: <SubClass code="A07.0"/> <SubClass code="A07.1"/> <SubClass code="A07.2"/> <SubClass code="A07.3" ...

javascriptjsonxmlexpress

Designing a versatile pop-up window with jQuery or JavaScript that functions seamlessly across all web browsers

I've encountered an issue with my code where it displays a popup message correctly in Chrome, but when testing it on Firefox and Edge, it creates a strange box at the end of the page instead. Here is the code snippet I'm referring to: var iframe ...

javascriptjqueryhtmlcsspopupwindow

Retrieve the current row by clicking the button

I've been struggling to retrieve a specific value from a row displayed on my PHP webpage. My objective is to obtain the current value from a particular cell in the row, but using getElementsByTagName has not been successful as it only returns an HTMLC ...

javascriptphphtml

Is it feasible to decrease the lateral margins of Bootstrap's container without the need for custom CSS? If so, what is the method?

My web page includes several screenshots to illustrate the issue I am facing. One of my challenges is the scroll bar below the table, which I find displeasing. In an attempt to resolve this, I decided to adjust the lateral margins slightly. Here's a s ...

htmlcssspring-bootbootstrap-4

Ways to transmit information from a React application to a Node server

As a Nodejs beginner, I am using the rtsp-relay library for live streaming. Currently, it is working in the frontend when the URL is included in the server proxy object like this: rtsp://.....@..../Stream/Channel/10. However, I want users to be able to inp ...

javascriptnode.jsreactjsmaterial-uifetch

What is the method to submit post data using jQuery or JavaScript?

I need help creating a button that can send post data to another location. Is there a way I can achieve this using JavaScript, or Ajax/jQuery? If there are any details missing from my request, please let me know. ...

javascriptpost

Unexpected object returned by the spread operator

Currently, I am utilizing node and specifically using babel-node. "start": "nodemon --exec babel-node --presets es2015 index.js" However, I have encountered an issue with my spread syntax in the following code snippet: export const login = async (parent ...

javascriptnode.jsspread-syntax