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
Problems with changing password and connecting to Navicat when installing and using MySQL 8.0.16 under Windows 7
I encountered several problems when installing My...
How to use node to implement static file caching
Table of contents cache Cache location classifica...
How to change the root password in a container using Docker
1. Use the following command to set the ssh passw...
MySQL View Principle Analysis
Table of contents Updatable Views Performance of ...
A detailed discussion of evaluation strategies in JavaScript
Table of contents A chestnut to cover it Paramete...
Analysis of the process of deploying Python applications in Docker containers
Simple application deployment 1. Directory struct...
CSS isolation issue in Blazor
1. Environment VS 2019 16.9.0 Preview 1.0 .NET SD...
Writing Snake Game with Native JS
This article shares the specific code of writing ...
mysql charset=utf8 do you really understand what it means
1. Let's look at a table creation statement f...
How to configure Linux to use LDAP user authentication
I am using LDAP user management implemented in Ce...
Problem analysis of using idea to build springboot initializer server
Problem Description Recently, when I was building...
Nginx Layer 4 Load Balancing Configuration Guide
1. Introduction to Layer 4 Load Balancing What is...
Solution to the CSS height collapse problem
1. High degree of collapse In the document flow, ...
React implements the principle analysis of the three stages of loading, loading, completion, loading failure
Recently I wrote in my blog that in the project l...
A simple tutorial on how to use the mysql log system
Table of contents Preface 1. Error log 2. Binary ...