I’d like an answer to your question, as well.
Here’s what you can do:
Add the following code into (usually) the div with the id of header in (usually) header.php:
<div id="header" onclick="location.href='http://www.yoursite.com';" style="cursor: pointer;">
This is javascript; the only time it won’t work is if someone has js disabled while browsing – probably not a big enough percentage to worry about.
If your header graphic is in some other id in the css, just find the appropriate div in the header.php (usually) file.
[You won’t of course add the whole section there – only the part which comes after id=”header”….]
If you prefer a non-javascript option, you can do the following.
Presuming you have an existing class defined for your header image which is something like this:
.header_logo {
background-image: url(images/header.png);
background-repeat: no-repeat;
margin-top: 8px;
float: left;
height: 145px;
width: 870px;
}
You define two new classes:
.header_logo a {
display: block;
float: left;
height: 145px;
width: 870px;
outline: none;
}
.header_logo a span {
display: none;
}
And then, in the HTML where the class is called, add a hyperlink to some dummy text within span tags. The dummy text will be invisible on the page, and a block the size of your graphic will be clickable:
<div class=”header_logo”>
<a href="http://blog.brian-fitzgerald.net"
title="There's no place like…">
<span>This links home, dear screen reader</span>
</a>
</div>
If you want to know why this works, I blogged it here:
http://blog.brian-fitzgerald.net/?p=252
Thanks, vkaryl. This helped settle the problem.
