Take the 2-minute tour ×

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 each image which I will use to delete the image and this is set up in my .css file as:

 .galleria-thumbnails .galleria-image {
    width: 80px;
    height: 80px;
    float: left;
    margin: 0 7px 7px 0;
    border: 2px solid #fff;
    cursor: pointer;
    background: url(cross.png) no-repeat bottom;
    padding-bottom: 20px;

The problem I have is that I'm very unsure how to link the image in the separate .ccs file with the Javascript command to delete the image which is on my gallery page.

I just wondered whether someone may be able to provide some guidance on how I may go about overcoming this problem.

Thanks and regards

share|improve this question

3 Answers 3

up vote 1 down vote accepted

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:

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

You even have the click handler already:

alert('Deleting image... ' + $(img).attr("src")); return false; }); 

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;
share|improve this answer
many thanks for taking the time to reply and for the solution. There's some minor tweaking to do as I'm trying to get the icon in the 'bottom middle', but it works a treat. Kind regards –  IRHM May 7 '12 at 12:34

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,

        var thumbnail = this.parentNode;

a jQuery 1.7+ version is this:

share|improve this answer
thank you for taking the time to reply to my post and the solution. I guess this is a question for all 3 of you. You've all kindly provided me with solutions, quite different from one another. But I'm really very new to Javascript and associated coding. From a beginners perspective, how do you know which solution to use? Is it just down to personal preference. Kind regards –  IRHM May 7 '12 at 12:33

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

here my css

            background-image: url('Images/homebutton.png');
            background-repeat: no-repeat;
            vertical-align: top;
            color: #005a8c;
            font-family: Arial;
            font-size: 10pt;
            font-weight: 500;
share|improve this answer
Hi @Arun, many thanks for taking the time to reply to my post and for the helpful soltuion. Kind regards –  IRHM May 7 '12 at 12:35
Why create a table just to add a listener? –  Gary May 7 '12 at 12:42
I created it to place many more buttons in appropriate place. If you have any better idea, share with me dude... –  Arun Kumar May 7 '12 at 13:33
All these ideas are essentially the same; this just kinda defeats the purpose of tables. –  Gary May 8 '12 at 3:10
But I guess someone who uses inline CSS/JavaScript isn't too concerned with semantics. –  Gary May 8 '12 at 4:01

Your Answer


