cách hiển thị nút xóa ở góc trên cùng bên phải của Hình ảnh?

Question

tôi muốn hiển thị nút xóa ở góc trên cùng bên phải hình ảnh? làm thế nào tôi có thể đạt được điều này?

html của tôi là như thế này: -

hình ảnh chính:

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

nút x hình ảnh để hiển thị trong góc trên bên phải của hình ảnh trên

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

Không có hình nền nào được đặt vui lòng, tôi cần sự kiện nhấp cho điều đó nút xóa một cái gì đó như thế này:

Answer 1

Theo tôi bạn chỉ có thể thiết lập style="position:absolute;top:0px;right:0px;" cho RemoveButton.ico và style="position:relative;" cho div với img

Answer 2

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

Vui lòng thử này. Nó sẽ giúp.

Answer 3

Hãy thử một cái gì đó giống như

<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> 

Demo: Fiddle

Answer 4

Tôi đã được mã hóa lên cho bạn http://jsfiddle.net/PPN7Q/

Bạn cần phải quấn hình ảnh trong một DIV

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

và áp dụng các quy tắc CSS sau

.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; 
} 

Answer 5

Bạn có thể thử này:

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

Answer 6

cách tiếp cận thông thường với position: relative và 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; 
    ... 
} 

Extended bản demo (+ JS tương tác) http://jsfiddle.net/yHNEv/

Answer 7

Bạn nên viết một plugin cho này

(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);