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
Recommend
Sample code for deploying Spring-boot project with Docker
1. Basic Spring-boot Quick Start 1.1 Quick start ...
18 Amazing Connections Between Interaction Design and Psychology
Designers need to understand psychology reading n...
Perfect solution to the problem of MySQL shutting down immediately after startup (caused by ibdata1 file corruption)
The mysql on a server in the computer room had be...
Detailed explanation of filters and directives in Vue
Table of contents vue custom directive Global Dir...
Detailed implementation plan of Vue front-end exporting Excel files
Table of contents 1. Technology Selection 2. Tech...
A brief discussion on HTML table tags
Mainly discuss its structure and some important pr...
How to build a deep learning environment running Python in Docker container
Check virtualization in Task Manager, if it is en...
A brief discussion on the semantics of HTML and some simple optimizations
1. What is semanticization? Explanation of Bing D...
Examples of using Docker and Docker-Compose
Docker is an open source container engine that he...
Detailed explanation of Object.create instance usage in js
1. Create a new object using the Object.create() ...
8 JS reduce usage examples and reduce operation methods
reduce method is an array iteration method. Unlik...
Practical skills that must be mastered in calling UNI-APP components in the easycom mode
This article is intended to be a starting point f...
How to match the size of text in web design: small text, big experience
With the rise of mobile terminals such as iPad, p...
Solve the problem of wireless and audio not working after Windows Server installation
1. Wireless Run PowerShell and enter the command:...
Detailed explanation of JS browser storage
Table of contents introduction Cookie What are Co...