Download with black background

Download with transparent background

Download with white background

This is my first post here and I will start with an old tutorial I wrote a while ago.

I will start this tutorial by explaining what I want to do.

The main objective is to make the header of a page have alternatives (multiple images for the header) so that people can choose the one they like.
We will start by choosing the images we want to be shown to the public. I have selected three and made them all the same width and height. I have named them header.jpg, header1.jpg, header2.jpg. You can give other names to them but I have used this convention to help me writing the javascript function.

The header is set up in the css stylesheet by the following code:

#header
{
    background: url(images/header.jpg) no-repeat top left;
    height:200px;
    width:765px;
}

You are interested mainly in the background properties. Here you give the url to the image for the default header. Also you have to set the height and width accordingly to the sizes of your image.

Next we will make small thumbnails of all the images we want to be available for the users to select from. After that we will add the css code for representing the small boxes with the thumbnails.

#alt_header
{
    padding:30px 0 0 40px;
}
#alt_header .header
{
    width:80px;
    margin-top:5px;
}
#alt_header a
{
    width:80px;
    height:21px;
    padding:1px;
    margin:0;
    display:block;
    font-size:1px;
    border:1px solid #ccc;
}
#alt_header a:hover
{
    border:1px dashed #ccc;
}

And now to explain this code. #alt_header is the container for all the small thumbnails. I have added padding top and left so that is not aligned on the top left corner of the header. Each thumbnail will be contained in a div with the class header. These elements are set to have the width of 80px and a bottom-margin of 5px to let some space between them.

The next step is to make the border and the hover effect. These things are done by the rules #alt_header a and #alt_header a:hover. To be notted that I have used font-size:1px; there because on IE the bottom padding was bigger than that 1px.

And now here is the html code used on my page:

<div id="header">

<div id="alt_header">

<div class="header">
<a href="#" onclick="changeHeader('');return false;">
<img src="style/images/smallHeader.jpg" alt="Purple Flowers" />
</a></div>

<div class="header">
<a href="#" onclick="changeHeader('1');return false;">
<img src="style/images/smallHeader1.jpg" alt="Grass" />
</a></div>

<div class="header">
<a href="#" onclick="changeHeader('2');return false;">
<img src="style/images/smallHeader2.jpg"
alt="Purple Flowers with green leafs" />

</a></div>

</div></div>

You can see that the changing of the header images is handled by the javascript function changeHeader().
Here is the changeHeader() function:

<script type="text/javascript">
<!--
function changeHeader(header)
{
headerElem = document.getElementById("header");
if (headerElem)
{
headerElem.style.backgroundImage =
"url(style/images/header"+header+".jpg)";
}
}
-->
</script>

As you can see the function is called with a parameter which indicates what header must be loaded. This function can suffer a lot of improvements. Among these:

• if no parameter is provided then it should choose a random header
• the javascript code it should be separated from the html code
• remember the chosen header in a cookie so that it will be shown next time the user enters the site

In the next episode we will try to implement the improvements outlined here.

Hello everyone!

I have just installed on my vista powered laptop this new yahoo messenger for Vista.

I like this new vista interface and also new featured it has.

For example you can have your conversations organized into same window like tabs or you can select from different skins to make your windows more colorful. Also another nice thing is that you can modify size of the avatars from your messenger list. This messenger also comes with a sidebad gadget.

When I installed it I thought it will replace current version I had but seems it installed fresh and my older version remained available.

One negative thing I observed is that it uses a lot of memory and sometimes it has a delay in typing but I hope these issues will be solved in versions to come.

If you want to see presentation movie then go here.

Also if you want to download it go here.

Hi everyone!

While I was browsing on the internet searching something to make my iphone cooler I have found this package for download for free here.

This set contains 25 icons to replace the iPhone default icons and selected third-party applications, and it’s available exclusively as transparent PNG files. Dock and Wallpaper images are also included.

Manual and SummerBoard install instructions are included within the ZIP file along with the icons. You can also view a preview of what these look like in place on Flickr.

Note: these icons are only installable on iPhones running firmware that has been jailbroken. Luckily, that includes everything up to firmware version 1.1.2.