How to click through a transparent image...sorta

September 24th::2006

Update: This article was references an old design that this site does not use anymore. There is not a png over a search box anymore!

If you look at the corner of this site, you'll see that I have a png positioned over the search box, yet it is still clickable. You can slice and dice the image to get this effect or you can take the simple route and create a 3rd layer that sits on top of the image that passes the clicks through to the search box/button with a little javascript.

How it's done

This is how the 3 layers are ordered, from top to bottom.

  1. Invisible div layer - used to pass clicks to search box and button
  2. PNG Layer - aka the barrier we are trying to skirt
  3. Search layer - The layer that holds the search box and button

First create two divs as follows:

<div id="searchclickcatcher" onclick="getElementById('s').focus()"></div>
<div id="submitclickcatcher" onclick="getElementById('searchform').submit()"></div>

Then absolute each div over the search box and the submit button

#searchclickcatcher, #submitclickcatcher {
   position: absolute;
   top:   138px;
   height: 25px;
}

#searchclickcatcher {
   width: 110px;
   left:  670px;
   cursor: text;
   z-index: 6;
}

#submitclickcatcher {
   width: 50px;
   left: 790px;
   cursor: pointer;
   z-index: 6;
}

The divs are invisible and the javascript in the onclick forces the focus to the elements you want. It's not exactly pretty, but it gets the job done!