Add Javascript Onclick To .css File

I wonder whether someone may be able to help me please. I'm using this page to allow users to view a gallery of their images. You can see that I've added a cross at the bottom of e

Solution 1:

You need to add an element (e.g. span) which can handle the click. I can see that you actually already have something like this:

<spanclass="btn-delete icon-remove icon-white"></span>

You even have the click handler already:

$(".btn-delete").live("click", function()
{ var img = $(this).closest(".galleria-image").find("img");
alert('Deleting image... ' + $(img).attr("src")); returnfalse; }); 

All you need to do is apply the styles so you can actually use this. Something like:

.galleria-thumbnails.btn-delete {
    display: block; /* Or just use a div instead of a span*/position: absolute;
    bottom: 0px; /*align at the bottom*/width: 80px;
    height: 80px;
    cursor: pointer;
    background: url(cross.png) no-repeat bottom;
}

Solution 2:

CSS is for styling, while JS is for behavior. You can't mix the two, and both are not related in terms of functionality. what you need is a JS that removes the image.

a standards compliant, JS version

var db = document.querySelectorAll('.galleria-thumbnails .btn-delete'),
    dbLength = db.length,
    i;

for(i=0;i<dbLength;i++){
     db[i].addEventListener('click',function(){
        var thumbnail = this.parentNode;
        thumbnail.parentNode.removeChild(thumbnail);
    },false);
}

a jQuery 1.7+ version is this:

$('.galleria-thumbnails').on('click','.btn-delete',function(){
    $(this).closest('.galleria-image').remove()
})

Solution 3:

If you set this above style sheet with in a <td> just write onclick event...

here a sample

<td id="Homebutton" runat="server" style="height: 35px; width: 101px; cursor: pointer;"
                class="menubuttonhome" align="center" onclick="navigate(id)" onmouseover="this.className='menubuttonhomefocus'"
                onmouseout="this.className= 'menubuttonhome'">
                Home
            </td>

here my css

.menubuttonhome
        {
            background-image: url('Images/homebutton.png');
            background-repeat: no-repeat;
            vertical-align: top;
            color: #005a8c;
            font-family: Arial;
            padding-top:11px;
            font-size: 10pt;
            font-weight: 500;
        }