spacer.png, 0 kB
qisoftware business blog

« Weather Tool Enhancements-- 5 Day Outlook | Main | ARIN Offers an API »

Friday, November 26, 2010

Clickable BackGround Images-- CodeTrick

Insofar as the web, I would classify myself-- more a web developer than web designer. The difference? I develop code/tools/interfaces that provide some functionality-- rather than putting a lot of effort into graphical design.

Of course, my roots-- as related to programming started long before the web came into being-- so I also develop programs that are non-web related. I also have quite a bit of experience with Graphical User Interfaces [GUI] which should not be confused with what I am defining as "web design".

A lot of my program web related efforts are demonstrated in WiredPages.

That said, I do all of my own site designs including all areas of and You may even notice a lot of the areas look very similar with the exception of color palettes or logo graphics.

That's why-- with all the blog reading I have done over the last year-- I have noticed a habit I have picked up. I click the main graphic to return to the site's home page, something you cannot do with most of or pages. Why? Probably because I do not do enough web design work.

So this was one fix I wanted to implement for my end of year "like Spock" enhancements. Do you watch the original Star Trek series? One segment had the crew living in a "speed of light" time dimension. When the segment's issues were resolved-- Spock told the Captain he would be remaining in "speed of light" time-- to make fixes to the engines and other operations onboard the ship. That's where I derive the term-- "Like Spock".

The first thing I realized with my sites? The main graphic on most of the pages are background images set in a css file. How does one go about making these images clickable? A little research provided this clever answer:

<body style="background-image:url('mybackgroundimage.png'); background-repeat:no-repeat;background-position:left top;">

<script language="JavaScript">
function whatever() {

<div style="position:absolute;left:0;top:0;z-index:9999; background-color:transparent;width:350px;height:250px;" onclick ="whatever()"> </div>

Maybe this is par for the course for web designers-- or maybe you have another solution. I like this one.. I did want something in which I would only need to update the related css file-- however, will accept that I have to insert something similar in all the pages where I want the main logo clickable and returns my visitor to the home page.

Business Directory

spacer.png, 0 kB

Contact | Accessibility | Products | CSS and XHTML
Disclosure Policy
© Copyright 2010-2022 QiSoftware
You may not copy this work.

spacer.png, 0 kB