CSS: Placing One Image On Top Of Another


I have recently discovered two ways to use CSS to place one image on top of another. I am working on a photogallery management plugin (JQuery) and I wanted to add an delete image to the bottom right of each thumb image. The user will be able to click on the delete image to delete the thumbnail. The image below displays how I want the thumbnail to appear:

<img class="alignnone" title="Delete Example" src="http://grasshopperpebbles.com/images/posts/delete_example.png" alt="" width="118" height="85" />

The key to both approaches is to place the first image as a background image of a container.

.thumb {
     width: 100px;
     height: 100px;

My first approach for styling the second image was to set the ‘background-position’ to ‘bottom right’.

.thumbDelete {
     width: 100px;
     background:url(images/delete-24x24.png) no-repeat bottom right;

While this positioned the delete button where I wanted, because the dimensions are the same as the thumbnail image, the entire image became clickable (not just the delete image).

So my next approach was to float the delete image and set the margin-top to 50%:

.thumbDelete {
     width: 24px;
     background:url(images/delete-24x24.png) no-repeat;

This placed the delete image on the bottom right (and only the delete image is clickable).

Creating the HTML is the same no matter which approach you take:

<div class="thumb">
<div class="thumbDelete"></div>

Easy enough.

Checkout My New Site - T-shirts For Geeks

Dojo: Setting the Visibility Style Attribute on a Button Dijit

Ajax, Dojo, Pebblet

I ran into a problem the other day when trying to set the visibility style attribute on a Dojo button. I assumed that setting styles on a Dijit was similar to setting the style on any other DOM element:

dojo.style(node, style, value)

But setting styles on a Dijit does not work they one would expect. My original code:

var btn = dijit.byId('register_btn');
dojo.style(btn, {visibility:'visible'});

This did not work because ‘btn‘ is not a DOM node. After an hour or so of trying different ways to get the code to work, I finally tried:

var btn = dijit.byId('register_btn').domNode;
dojo.style(btn, {visibility:'visible'});

It worked. And it makes sense. I can further simplify it with:

dojo.style(dijit.byId('register_btn').domNode, {visibility:'visible'});

While I have accessed widgets (Dijits) using the domNode in the past, I just didn’t think that I would have to when using dojo.style. But it works, so I can move on.

Checkout My New Site - T-shirts For Geeks