CODEWITHSUNDEEP
javascriptjqueryajax
blueintegral
blueintegral

Reputation: 1271

jQuery image on image

I have a gallery of images that I'm ajaxing in and I'd like to let the user delete them. So when you mouse over each one, a small image of an X should appear in the corner and when clicked, that'll delete it. Here's what I have

$(".previews").live('mouseenter', function(){
console.log('mouse detected');
console.log($(this).id); 
    $(this).css({position:'relative'});
    $('<div />').text(' ').css({
        'height': $(this).height(),
        'width': $(this).width(),
        'background': 'url(delete.png) top left no-repeat',
        'position': 'absolute',
        'top': 15,
        'left': 170,
        'opacity': 0.0
    }).addClass("hover-tile").bind('mouseleave', function(){
            $(".hover-tile").each(function () { $(this).remove(); });
})
});

This is what each image that is ajax'd in looks like:

<div><ul><li class='spacer' style='list-style:none;'><img class='previews' id='" + image_id + "' src='http://whatever.com/default.jpg' /></li></ul></div>";

Right now, console.log($(this).id); returns an undefined and I'm not seeing delete.png appear. Also, I read on the jQuery API website that live() is now depreciated, should I try to use on() instead?

Upvotes: 0

Views: 85

Answers (1)

Krzysztof
Krzysztof

Reputation: 16150

IMO it's better to do it with :hover css pseudo-class. You can render this div with images right away, but with display:none style set. Here's example code:

<style>
.image {
    border: 1px solid grey;
    float: left;
    width: 160px;
    height: 120px;
    position: relative;
    text-align: center;
}

.image img {
    max-width: 160px;
    max-height: 120px;
}

.image .close {
    display: none;
    position: absolute;
    right: 5px;
    top: 5px;
}

.image:hover .close {
    display: block;
}
</style>
<div class="preview">
    <div class="image">
        <img src="http://g-ecx.images-amazon.com/images/G/01/kindle/otter/dp/KO-slate-main-lg-holiday._V163478229_.jpg" />
        <div class="close" onclick="alert('delete')">X</div>
    </div>
    <div class="image">
        <img src="http://g-ecx.images-amazon.com/images/G/01/kindle/otter/dp/KO-slate-main-lg-holiday._V163478229_.jpg" />
        <div class="close" onclick="alert('delete')">X</div>
    </div>
    <div class="image">
        <img src="http://g-ecx.images-amazon.com/images/G/01/kindle/otter/dp/KO-slate-main-lg-holiday._V163478229_.jpg" />
        <div class="close" onclick="alert('delete')">X</div>
    </div>
</div>

Upvotes: 1

Related Questions