HTML+CSS to add a delete cross and a picture delete button in the upper right corner of the picture

For record, it may be used in the future, and friends in need can also use it.

No more BB, let's take a look at the renderings first

The above is the effect picture. You can change the picture in the upper right corner by yourself. I won’t upload the picture material. I will just post the code. It is quite simple CSS and JS. Beginners should be able to understand it.

</pre><pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.divX
{
    z-index:200;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    line-height:10px;
    text-align:center;
    font-weight:bold;
    cursor:pointer;
    font-size:10px;
	display: none;
}
</style>
</head>
 
<body>
	<form id="form" style="margin-top:20px;">
        
        <div id="img_div_1">
            <input type="file" id="file_input" onchange="addFile(this);" style="display:none" />
            <div style="position: relative;">
            	<img id="file_img" src="add_img.png" width="75" onclick="file_input.click();" height="65" />
            </div>
            <div class="divX" id="img_zindex_div_1" onclick="del()">
            	<img src="no.png" width="16" height="16" />
            </div>
        </div>
        
	</form>
</body>
<script src="jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript">
	
	function addFile(ths) {
		var objUrl = getObjectURL(ths.files[0]);
		var left = $('#file_img').position().left;
		var top = $('#file_img').position().top;
		$('#img_zindex_div_1').css({position: "absolute", left: left + 75, top: top + 10, display: "block" });
		$('#file_img').attr("src", objUrl);
	}
	
	function del() {
		alert("delete");
	}	
	
	function getObjectURL(file) {
		var url = null ; 
		if (window.createObjectURL!=undefined) { // basic
			url = window.createObjectURL(file);
		} else if (window.URL!=undefined) { // mozilla(firefox)
			url = window.URL.createObjectURL(file);
		} else if (window.webkitURL!=undefined) { // webkit or chrome
			url = window.webkitURL.createObjectURL(file);
		}
		return url ;
	}
</script>
</html>

Done. It’s time to call it a day. Copy the code and replace the picture material to use it directly

get off work. Leave

------------------------------------------------------------------------------------------- Gorgeous division---------------------------------------------------------------------------------------------------------

Replenish. Since left is always 0

Get it in another way

 var objUrl = getObjectURL(ths.files[0]);
		var left = $('#file_img').offset().left;
		var top = $('#file_img').offset().top;
		
		// left is the leftmost distance of the default image. The added image can be based on the width of the default image - the width of the deleted layer image (ie: the current width of my default image is 75, the width of the deleted layer image is 16, left = 75 - 16, the position can be to the rightmost side of the image! The same is true for top)
		$('#img_zindex_div_1').css({position: "absolute", left: left + 59, top: top - 5, display: "block" });

Summarize

This is the end of this article about how to add a deletion cross and a picture deletion button in the upper right corner of an image using HTML+CSS. For more related information about adding a deletion cross and a picture deletion button in the upper right corner of an image using HTML, please search previous articles on 123WORDPRESS.COM or continue browsing the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<: Introduction and use of five controllers in K8S

>>: Hover zoom effect made with CSS3

DOM operation table example (DOM creates table)

mysql determines whether the current time is between the start and end time and the start and end time are allowed to be empty

Table of contents Requirement: Query ongoing acti...

HTML+CSS to add a delete cross and a picture delete button in the upper right corner of the picture

DOM operation table example (DOM creates table)

Sample code for implementing mobile expansion and collapse effects with pure CSS3

CSS3 animation – steps function explained

4 solutions to mysql import csv errors

Docker runs operations with specified memory

JavaScript canvas realizes colorful sun halo effect

Detailed explanation of Linux DMA interface knowledge points

Summary of various methods for JavaScript to determine whether it is an array

jQuery canvas generates a poster with a QR code

About Vue virtual dom problem

Recommend

Summary of 7 pitfalls when using react

Several principles for website product design reference

MySQL Constraints Super Detailed Explanation

Appreciation of the low-key and elegant web design in black, white and gray

MySQL 5.7 installation and configuration tutorial under CentOS7 (YUM)

Explanation of the process of docker packaging node project

Pure CSS to achieve cloudy weather icon effect

HTML discount price calculation implementation principle and script code

MySQL database development specifications [recommended]

Implementation of importing and exporting docker images

mysql determines whether the current time is between the start and end time and the start and end time are allowed to be empty

A brief discussion on whether too many MySQL data queries will cause OOM

CSS implements various loading effects with parsing process

Research on the Input Button Function of Type File

Detailed steps to install web server using Apache httpd2.4.37 on centos8