Creating Clickable Web Site Header Images

I like to write posts that can help others complete a task, whether it is with computers, web sites/blogs, networking, or digital photos. Some times, I come across questions that get asked on a frequent basis. While the questions may seem to be simple to answer for some, I also realize that many people don’t have the technical knowledge others may have acquired through the years.

This post is going to talk about creating header images for a web site or blog, and how to make them link back to a home page. If you are new to HTML, creating such an image is very easy to do.

Create the Image

Before you can create a clickable image that links to a home page, you first need to have an image. When creating the image, you will need to also know how big the image needs to be.

If you have downloaded a template with a placeholder-type image, you can just view the properties of the image to see how large you image needs to be. The HTML code may have the image size, or you may need to download the image and then view the properties in Windows.

Once you know the image dimensions, you can construct the new header image. You will need an image editor to create the image. In my last post titled Photo and Image Editors, I discussed several image editors that you can use to create or edit images.

Use the following steps to create an image:

  1. Start your image editor.
  2. Create a new image (usually click File->New) and then specify the size of the image. The size should match the dimensions of the image in your template if you are using one.
  3. Once your image has been created, save it in either a GIF, JPEG, or PNG format. If your image doesn’t have many colours (<256), try using the GIF or PNG-8 format. For more colours, try the JPEG or PNG-24 format. Save it in a directory on your host, or if you are building your site on your local machine first, save it to a subdirectory within your web site directory.

When I store images for my web sites, I usually store them in an image or images subdirectory to keep my web site directories clean and organized. I then reference the full URL to that directory when using the images. For example, if my web site URL was somewebsite.com, and the image header.jpg was stored in the image subdirectory, the full URL would be: http://www.somewebsite.com/image/header.jpg.

Now that you have a header image let’s look at it adding to your pages and make it clickable so your visitors would return to your home page.

Making an Image Clickable on a Web Site

Creating a clickable image is easy to do and is very similar to creating a hyperlink. All you need to do is use the following HTML code:

<a href=”[URL of your web page]”><img src=”[URL of your image]”/></a>

Using the example from above, the HTML code will look like:

<a href=”http://www.somwebsite.com”><img src=”http://www.somwebsite.com/image/header.jpg”/></a>

It is important to note that you should also include the height and width properties of the image in the HTML.

As you can see, creating a clickable image is simply a matter of creating a standard hyperlink, but instead of specifying text, you include an image.

7 Responses to “Creating Clickable Web Site Header Images”

  1. Kin says:

    Thanks Paul that was really useful, though i don’t comment much, i’d just like to say your how to guides always come in handy for me when ever i forget something.

  2. tata says:

    Thanks Paul. I didn’t think so, but you don’t know if you never ask!

  3. Lyndi says:

    I knew I have seen it somewhere before. Guess where I found it, on my own site. This is an article on the subject originally written by Justin Tadlock and re-published by the previous owner of my blog. Hope this helps a bit.

    http://nice2all.com/2008/04/21/clickable-header/

  4. Carol says:

    You should be commended for even anticipating what we all might want to do and have no idea how to go about it. Your thoughtfulness is much appreciated.

  5. Paul says:

    @Lyndi: That is true. You could include your image as a background (much like mine is) and in that case it couldn’t be clickable. In a case like that, most would just make the text a hyperlink.

    @tata: If the image is in the CSS it would be included as a background image, so you couldn’t make it clickable or include an alt tag.

  6. tata says:

    My theme requires the header image to be in CSS. Is there any way that I can still make it clickable in CSS? Further, is there a way to add an alt tag this way?

  7. Lyndi says:

    Thanks for this but it now raises another problem. One could want the image to be in the background so you could place text (name of blog, tagline whatever, over it.) This method will not work to make that kind of image clickable.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.