Ajax and Ajax Frameworks

I have been a developer for nearly 20 years and a web developer for about 10 years. Over the years, I have considered creating a blog to share the things I have learned (and am learning) about web design and development, but I never seemed to have the time. When I began learning about web development using Ajax and Ajax Frameworks, I decided to take the time to create this blog.

My intention for this blog is to focus primarily on Ajax Frameworks, but since web development requires knowledge of many technologies, I will occasionally write about things such as CSS, Javascript, PHP, MySQL, Flash, etc.

Lately, I have been using JQuery as my primary Ajax tool. Although I have used other Ajax Frameworks in the past (Dojo Toolkit, Yahoo! User Interface Library, Scriptaculous/Prototype), JQuery has thus far been the easiest to learn. In my first few posts I will discuss some of the JQuery Plugins that I have created. Some of these include: a plugin for Google Maps (jquery.imGoogleMaps), Form validation and submission (jquery.imValidateForm), Page Populater (jquery.imPagePopulate), and a plugin to create lists (jquery.imList).

While I am still learning about some of the other Ajax Frameworks, I hope that what I have learned will be helpful to others. Just remember, “When you can pull the pebbles from my hand…”

CSS: Placing One Image On Top Of Another

Monday, June 8th, 2009

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:

^?View Code HTML

<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.

^?View Code CSS

.thumb {
     float:left;
     width: 100px;
     height: 100px;
     background:url(images/thumbs/pic1.jpg);
}

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

^?View Code CSS

.thumbDelete {
     width: 100px;
     height: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%:

^?View Code CSS

.thumbDelete {
     float:right;
     width: 24px;
     height:24px;
     background:url(images/delete-24x24.png) no-repeat;
     margin-top:50%;
}

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:

^?View Code HTML

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

Easy enough.

Categories: CSS
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.

2 Responses to “CSS: Placing One Image On Top Of Another”

mandz Says:
May 30th, 2010 at 1:07 am

Thank you very much saved me so much time coding for one
Austin Says:
July 19th, 2011 at 2:38 pm

But then you have to specify the background image in the class, doesn’t work well for dynamic data.

CSS: Placing One Image On Top Of Another

2 Responses to “CSS: Placing One Image On Top Of Another”

Home Business Ads

Categories

Archives

Tags

Comments

Blogroll