如何显示图片右上角的删除按钮？

我想显示图像右上角的删除按钮？我怎么能做到这一点？如何显示图片右上角的删除按钮？

我的HTML是这样的： -

主图像：

<img id="' + id + '" src="../Images/DefaultPhotoMale.png" class="' + item + '" width="40" height="40" alt="image" title="' + projectTitle + '" style="cursor:pointer" />

X按钮图像，以上述图像的右上方显示

'<img id="' + item.Soid + '" src="../Images/RemoveButton.ico" style="display:none" title="Remove Specialization" />

请勿设置背景图片，我需要点击事件删除按钮是这样的：

enter image description here

来源

2013-03-07 Nestor C

使大图像的背景与相对布局的div，然后把X按钮放在与绝对顶部位置相同的div：0px; right：0px; – PaperThick 2013-03-07 13:17:09

我不能，这些图像动态加载，这是jquery carousellist项目 – 2013-03-07 13:18:51

其实，字母''×''会做得很好。） – raina77ow 2013-03-07 13:18:56

在我看来，你可以只设置style="position:absolute;top:0px;right:0px;"为和style="position:relative;"为div与img

来源

2013-03-07 13:18:55 XiM

<div style=" float: right;margin-left: 289px;position: absolute;">*</div> 
<img src="score.png" width="300" height="300" />

请试试这个。它可能有帮助。

来源

2013-03-07 13:21:57 Sarang

试着这么做

<div style="position: relative"> 
    <img src="http://www.google.co.in/images/srpr/logo4w.png" /> 
    <img src="http://wecision.com/enterprise/images/icons/closeIcon.png" style="position: absolute; top: 4px; right: 5px"/> 
</div>

演示：Fiddle

来源

2013-03-07 13:22:26

我已经编写一个为您http://jsfiddle.net/PPN7Q/

你需要用一个DIV图像

<div class="thumbnail"> 
<img src="http://96pix.com/images/renee-v.jpg" /> 
<a href="">Delete</a> 
</div>

和应用以下CSS规则

.thumbnail { 
width:50px; 
height:50px; 
position:relative; 
} 

.thumbnail img { 
max-width:100%; 
max-height:100%; 
} 

.thumbnail a { 
display:block; 
width:10px; 
height:10px; 
position:absolute; 
top:3px; 
right:3px; 
background:#c00; 
overflow:hidden; 
text-indent:-9999px; 
}

来源

2013-03-07 13:28:08

这里我们可以获得主图像和删除的点击事件吗？ – 2013-03-07 13:48:00

-1

你可以试试这个：

<div style="position:relative; width:'mainimagewidth'"> 
main image<img src="" /> 
<span style="position:absolute; top:0; right:0;">ximage<img src="" /></span> 
</div>

来源

2013-03-07 13:30:29

与position: relative和position: absolute通常的做法。

HTML：

<div class="img-wrap"> 
    <span class="close">&times;</span> 
    <img src="http://lorempixel.com/100/80"> 
</div>

CSS：

.img-wrap { 
    position: relative; 
    ... 
} 
.img-wrap .close { 
    position: absolute; 
    top: 2px; 
    right: 2px; 
    z-index: 100; 
    ... 
}

扩展演示（+ JS交互）http://jsfiddle.net/yHNEv/

来源

2013-03-07 13:37:17 dfsq

你应该写一个插件，这个

(function ($, window, document, undefined) { 

'use strict'; 

var defaults = {}; 

var Delete = function (element) { 

    // You can access all lightgallery variables and functions like this. 
    this.core = $(element).data('lightGallery'); 

    this.$el = $(element); 
    this.core.s = $.extend({}, defaults, this.core.s) 

    this.init(); 

    return this; 
} 

Delete.prototype.init = function() { 
    var deleteIcon = '<span id="lg-clear" class="lg-icon deletePicture"><span class="glyphicon glyphicon-trash"></span></span>'; 
    this.core.$outer.find('.lg-toolbar').append(deleteIcon); 

    this.delete(); 

}; 


Delete.prototype.delete = function() { 
    var that = this; 
    var image_id = ''; 
    this.core.$outer.find('.deletePicture').on('click', function() { 
    // get vars from data-* attribute 
     image_id = that.core.$items.eq(that.core.index).data('id'); 
     table_name = that.core.$items.eq(that.core.index).data('table-name'); 

     /** 
     * Remove Touchpoint Retailer Image 
     */ 
     var formData = new FormData(); 
     formData.append('image_id', image_id); 
     $.ajax(......).success(function() 
     { 
      var thumbcount = that.core.$outer.find('.lg-thumb-item').length; 
      if(thumbcount >= 1) { 
       // remove slides 
      } 
      else { 
       that.core.destroy(); 
      } 
     }); 

    }); 
} 


/** 
* Destroy function must be defined. 
* lightgallery will automatically call your module destroy function 
* before destroying the gallery 
*/ 
Delete.prototype.destroy = function() { 

} 

// Attach your module with lightgallery 
$.fn.lightGallery.modules.delete = Delete; 


})(jQuery, window, document);

来源

2017-04-04 21:46:56

如何显示图片右上角的删除按钮？

回答

相关问题