Наложить миниатюру с кнопкой удаления изображения? - PullRequest
Новая
       17

Наложить миниатюру с кнопкой удаления изображения?

5 голосов
/ 15 декабря 2009

Мне нужно создать кнопку удаления, которая появляется над моими большими пальцами, когда пользователь наводит курсор мыши на это изображение, и ссылка появляется как удаление из избранного?

Кто-нибудь знает, как этого добиться?

Примером того, что я хочу, является кнопка быстрого списка youtube, которую вы найдете над видео.

Ответы [ 4 ]

7 голосов
/ 15 декабря 2009

Этот значок будет отображаться при наведении курсора на значок, а при наведении курсора на значок поверх него он будет заменен на значок при наведении курсора. 

.image-thumb, .image-thumb img {
  position:relative;
  width:60px;
  height:50px;
}
.image-fav {
  display:none;
  position:absolute;
  bottom:0;
  left:0;
  width:15px;
  height:15px;
  background-image:url(normal_plus.png);
}
.image-thumb:hover .image-fav {
  display:block;
}
.image-fav:hover {
  background-image:url(hover_plus.png);
}

<div class="image-thumb">
  <img src="thumb.jpg" />
  <a href="#" class="image-fav"></a>
</div>

Booya!

3 голосов
/ 15 декабря 2009

Изменено с Оригинальный ответ Даниэля Вассалло :

CSS: 

.image-thumb { 
    position: relative; 
    width: 100px;
    height: 100px; 
    /* apply background-image url inline on the element since it is part of the content */
    background: transparent url() no-repeat center center;
}

.image-thumb a { 
    display: none;
    position: absolute; 
    top: 80px;  /* position in bottom right corner, assuming image is 16x16 */
    left: 84px; 
    width: 16px; 
    height: 16px; 
    background: transparent url(remove_button.gif) no-repeat 0 0;
}   

.image-thumb:hover a { 
    display: block;
}

HTML (при условии, что он сгенерирован): 

<div class="image-thumb" id="some-unique-thumb-id-1" style="background-image: url(some/image-1.ext)">
    <a href="#"></a>
</div>
<div class="image-thumb" id="some-unique-thumb-id-2" style="background-image: url(some/image-2.ext)">
    <a href="#"></a>
</div>
....
<div class="image-thumb" id="some-unique-thumb-id-n" style="background-image: url(some/image-n.ext)">
    <a href="#"></a>
</div>

JavaScript: 

$(function() {
    $(".image-thumb a").click(function(e) {
        e.preventDefault();
        var imageId = $(this).parent().attr("id");
        // remove image based on ID.
    });
});

Редактировать: упрощенный HTML.

1 голос
/ 15 декабря 2009

Вы можете использовать следующий стиль CSS <div> для достижения этого в чистом CSS:

CSS: 

.image-thumb { 
    position: relative; 

    width:  100px;
    height: 100px; 

    background-image: url(image_thumb.jpg); 
}

.image-fav { 
    position: absolute; 

    top:    0px; 
    left:   0px; 
    width:  20px;
    height: 20px;

    background-image: url(fav_icon.png); 
    background-position: bottom left; 

    display: none;
}   

.image-fav:hover {
    display: block;
}

HTML: 

<div class="image-thumb">
    <a class="image-fav" href="javascript:removeFromFav();"></a>
</div>
0 голосов
/ 15 декабря 2009 
<div id = "thumbImg">
     <img src="thumb.png" onMouseOver="overlayRemove();" 
       onMouseOut="hideRemove();" />
     <img id='removeImg' src='remove.png' 
     style='position:relative;left:0px;top:0px;z-index:2;display:none' />
</div>

JavaScript: 

function overlayPic(){
   $('removeImg').show();
}
function hideRemove(){
   $('removeImg').fadeOut();
}
...