On 18-02-06 Peter Snow Cao wrote:
>I want to put a link to my homepage on the logo image that is in the
>upper left-hand corner of every page put there by the CSS file [...]
>What is the best way to do this? Is there a way I can do it in CSS or
>do I have to use HTML to code each page?
Lots of replies ...
In the meantime I was experimenting somewhat.
I found it can be done in CSS only, without losing text-readers,
screen-readers, or missing the link when css and or images are turned off.
No image-mapping or transparent.gif is needed. This is the testpage
logo in css (see source code), with screenshots of all options I see.
I found it can be done also with the (css-styled) logo as foreground
image in the html. Also without losing the rest.
This is the second testpage
logo in html.
While the logo is important to show for the identity of the site and
company, I agree with the 2 reasons to use the 2nd way, as David Dorward
1. CSS might be turned off or unavailable. - Then a background-img is
invisible. In the html-way the logo is displayed as long as images are
2. The user might want to print the page (and background image printing
is disabled by default). - The logo in the html will always be printed
together with the banner.
Note: to serve the text/screen-readers, I've put a text-link as layer
under the images. It has an <h3> tag to get better noticed by search
engines. This text-link is also visible when in a screen-browser the
images are turned off.
Then a small trick is hidden:
Although the text-link cannot be clicked itself when images are turned
off and the css is still on (link covered up by the img-layers), I made
a "pseudo-click". By dividing the the words "Bike China" and
"Adventures" in two lines, they are just under the clickable area of the
logo. Then even if the logo itself is not visible, this area can be
clicked (also the tooltip is appearing when hovering). To see the area:
Firefox > WebDeveloper extension > Images > outline images > background
Endless, css! :-)
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/