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
The principle and implementation of js drag effect
The drag function is mainly used to allow users t...
Press Enter to automatically submit the form. Unexpected discovery
Copy code The code is as follows: <!DOCTYPE ht...
express project file directory description and detailed function description
app.js: startup file, or entry file package.json:...
Box-shadow and drop-shadow to achieve irregular projection example code
When we want to add a shadow to a rectangle or ot...
Overview of the definition of HTC components after IE5.0
Before the release of Microsoft IE 5.0, the bigges...
Explanation of CAST and CONVERT functions for type conversion in MySQL database
MySQL's CAST() and CONVERT() functions can be...
Vue3 draggable left and right panel split component implementation
Table of contents Breaking down components Left P...
A brief discussion on browser compatibility issues in JavaScript
Browser compatibility is the most important part ...
How to use Flex layout to achieve scrolling of fixed content area in the head
The fixed layout of the page header was previousl...
Detailed explanation of the underlying principle of defineCustomElement added in vue3.2
Table of contents Web Components customElements O...
How to display small icons in the browser title bar of HTML webpage
Just like this effect, the method is also very si...
How to configure MySQL scheduled tasks (EVENT events) in detail
Table of contents 1. What is an event? 2. Enable ...
10 key differences between HTML5 and HTML4
HTML5 is the next version of the HTML standard. M...
Summary of three ways to implement ranking in MySQL without using order by
Assuming business: View the salary information of...
Detailed explanation of the process of realizing calculator function in javascript
Table of contents 1. Introduction to calculator f...