hotspots in header

hi all,

i have a header that links back to the homepage when clicked, but i want to add a hotspot so that users can click on the part that says "click to email". (see here: http://www.allisonwrote.com/aussie)

i thought about an image map, but shouldn't headers always be background images inside a div so that they don't need to load with each new page?

i found some css code that could work, but i have no idea how to implement it. it looks like this:


#header a.headerimagelink{
border: 1px solid red;
display: block;
width: 100px;
height: 100px;
position: absolute;
left: 100px;
top: 100px;
text-indent: -9999em;
}


right now, for my header i have this:

CSS:

#header{
width: 810px;
height: 150px;
position: relative;
margin: 0 auto;
background-color: #008800;
background-image: url(http://www.allisonwrote.com/images/draft.jpg);
}


HTML:

<div id="header" title="return to home" style="cursor:pointer;" onclick="window.location='/index.html';">
</div>

Here is what I would do:


Mark it up in HTML:

<div id="header">
<h1>My Website</h1>
<p id="email_me"><a href="/contact/">Email me!</a></p>
</div>

Define dimensions for the header and add a background image for the whole thing in CSS:

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

Make the email link large enough to surround the image you want to "hotlink"…

#email_me a {
display: block;
width: 100px;
height: 50px;
}

…and position it to surround the image:

#header {
position: relative;
width: 700px;
height: 200px;
background: url(header.jpg) no-repeat left top;
}

#email_me a {
display: block;
width: 100px;
height: 50px;
position: absolute;
bottom: 10px;
right: 10px;
}

Finally, move all the text out of the way so all you see is the final image:

#header h1, #email_me {
text-indent: -9999px;
overflow: hidden;
}



Something like that. I don't end up with this exact code or anything but this is the thought process behind it. Hope that helps.