[css-d] Can I put a link on an image in CSS?

[Peter Snow Cao]

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 (snippet
below):

http://bikechina.com/

#header {
background-color: #091c5a;
background-image: url(images/bc-logosm.gif);
background-repeat: no-repeat;
background-attachment: fixed;
}

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?

Thanks!

Peter Snow Cao  
Bike China Adventures, Inc.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
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/

Re: [css-d] Can I put a link on an image in CSS?

[Els]

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
> (snippet below):
> 
> http://bikechina.com/
> 
> #header {
> background-color: #091c5a;
> background-image: url(images/bc-logosm.gif);
> background-repeat: no-repeat;
> background-attachment: fixed;
> }
> 
> 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?

No, you have to add the link code http://locusmeus.com/
http://locusoptimus.com/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
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/

Re: [css-d] Can I put a link on an image in CSS?

[Peter Snow Cao]

Els wrote:

> No, you have to add the link code http://www.css-discuss.org/mailman/listinfo/css-d
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/

Re: [css-d] Can I put a link on an image in CSS?

[Els]

Peter Snow Cao wrote:
> Els wrote:
>
>> No, you have to add the link code http://locusmeus.com/
http://locusoptimus.com/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
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/

Re: [css-d] Can I put a link on an image in CSS?

[Peter Snow Cao]

Els wrote:

> Ah, didn't get you the first time. You can have an invisible gif
> in the  element, or even just a   if you set the 
> element to display:block;. Just position this link with
> position:absolute; over the background image that's there. That
> way it won't mess up any of the rest of page layout.
> I'd choose a gif over an   though, so you can make use of
> the alt text for people who surf without images, such as Lynx  or
> screenreader users. They wouldn't be able to 'see' the link if it
> were just a blown up  .


I did this and it seems to work, but I don't get what I should do about
the "position:absolute;"







Bike China Adventures,
Inc.Tour Schedule

Thanks,

Peter
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
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/

Re: [css-d] Can I put a link on an image in CSS?

[Els]

Peter Snow Cao wrote:
> Els wrote:
>
>> Ah, didn't get you the first time. You can have an invisible
>> gif in the  element, or even just a   if you set the
>>  element to display:block;. Just position this link with
>> position:absolute; over the background image that's there.
>> That way it won't mess up any of the rest of page layout.
>> I'd choose a gif over an   though, so you can make use of
>> the alt text for people who surf without images, such as Lynx
>> or screenreader users. They wouldn't be able to 'see' the
>> link if it were just a blown up  .
>
> I did this and it seems to work, but I don't get what I should
> do about the "position:absolute;"

If it works already, there is no need for position:absolute;.
It's just that if your code was already working without the , and you needed to add in the  and 'lay it over' 
the existing page without messing it up, position:absolute; could 
have done that for you.

-- 
Els
http://locusmeus.com/
http://locusoptimus.com/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
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/

Re: [css-d] Can I put a link on an image in CSS?

[Christian Heilmann]

>  width="130" height="124" align="left" alt="Bike China Logo Link to Home
> Page" />
>
> Bike China Adventures,
> Inc.Tour Schedule


Frontpage is discontinued, we don't need to simulate it in our
handcoded HTML any longer. :-)

Unless you need to support IE3 and Netscape 3 there is no need for
border=0, font or align. Especially not in conjunction with a closed img tag.

For the ones who might flame up now and call me condescending and
arrogant: This is a list about CSS, not about simulating it with HTML.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
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/

Re: [css-d] Can I put a link on an image in CSS?

[Jochem Maas]

Peter Snow Cao wrote:
> 

...

> 
> 
> 
> 
> 
>  width="130" height="124" align="left" alt="Bike China Logo Link to Home
> Page" />
> 
> Bike China Adventures,
> Inc.Tour Schedule

not with standing the FONT crap, why go to trouble of adding a 1x1 gif etc?
why not something like?:



(which might still require a ' ' inside the link tag to make it
work in all browsers (incl. stuff like lynx)

the idea being that an 'A' tag is just as much an element as a 'DIV' tag
so you could style it identically. you'll need to set 'display: block;' in the 
CSS
for this header link because link tags don't display as blocks by default
(whereas DIV tags do)




> 
> Thanks,
> 
> Peter
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> 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/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
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/

Re: [css-d] Can I put a link on an image in CSS?

[Els]

Jochem Maas wrote:
> Peter Snow Cao wrote:

>> > src="images/invisible.gif" width="130" height="124"
>> align="left" alt="Bike China Logo Link to Home Page" />
>
> not with standing the FONT crap, why go to trouble of adding a
> 1x1 gif etc?
> why not something like?:
>
> 

Because then you don't have an alt text. People with images off 
(screenreaders, text browsers) will not even see the name of the 
company/web site if the image is missing, unless an alt attribute 
is filled out.
AFAICS, to get the title attribute to be visible, you'd first 
need to see the link to hover over it. In the absence of images, 
I don't think that's likely.

> (which might still require a ' ' inside the link tag to
> make it  work in all browsers (incl. stuff like lynx)

Lynx? What is the link text in Lynx when you use a   ?
I just tried it out, no link is showing, nor the title attribute. 
You can't tab to it either, it is skipped in a list of links.

-- 
Els
http://locusmeus.com/
http://locusoptimus.com/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
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/

Re: [css-d] Can I put a link on an image in CSS?

[David Dorward]

On 18/02/06, Els <[EMAIL PROTECTED]> wrote:
> Ah, didn't get you the first time. You can have an invisible gif
> in the  element, or even just a   if you set the 
> element to display:block;. Just position this link with
> position:absolute; over the background image that's there. That
> way it won't mess up any of the rest of page layout.

Not a fantastic idea. CSS might be turned off or unavailable with
images still supported, or the user might want to print the page (and
background image printing is disabled by default).

If the image contains content (which it does in this case), then it
should be part of the markup, not the presentation layer.

--
David Dorward 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
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/

Re: [css-d] Can I put a link on an image in CSS?

[francky]

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 [...]
>http://bikechina.com/
>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 
wrote:
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 
supported.
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  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 
images.

Endless, css! :-)
Greetings,
francky


 

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
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/