Can we give links through css?

[lohumihem]

Hi, Can we give links through css?

like i ve an image (logo img) and which is coming through css . can i give link to that image so that when ever i click on that it ll take me to that respective link.
i dont want to java script like onclick etc.

Thanx.

[scragar]

not through CSS. Very possible to position a link around it or whatever though.

[Mr Initial Man]

Turning an image into a link is VERY easy.

<a href="URL"><img src="ImageURL" alt="logo"></a> It is as simple as that. If you don't want a border around your image, add this to your CSS rules:

a img{border:0;}

[scragar]

if the image is coming through CSS I'm gonna guess it's a background image...

[Mr Initial Man]

Ah, okay. Well, you COULD have something like <a href="URL" id="LogoLink"></a>

Then have your CSS look like this:

#LogoLink{
display:block;
height:image height;
width:image width;
background-image: url(image url);
}

Something like that.

[lohumihem]

Turning an image into a link is VERY easy.

<a href="URL"><img src="ImageURL" alt="logo"></a> It is as simple as that. If you don't want a border around your image, add this to your CSS rules:

a img{border:0;}


NO i mean like this i ve one image which is coming throgh css. As it is coming through css then it ll be bg image and i cant nt give link to bg images( as far as i know)
so it there any property in css like below

.logo{background-image:url(../images/logo.gif)" can i write some property HERE which ll jump me to any given link"}

Or some thing like this
<div onClick="open.window(http://www.yahoo.com)" class="logo"></div>

[Mr Initial Man]

<a href="http://www.yahoo.com" class="logo"></a>
.logo{
display:block;
height:image height;
width:image width;
background-image: url(image url);
}

That's pretty much the only way to do it.

CSS does NOT create clickable hyperlinks.

[WebJoel]

Make the container DIV (that has the background-image) itself, be 'the clickable anchor'..
CSS:#clickable {width:125px; height:75px; background-image:url();}

HTML:<a href="#"><div id="clickable"><!-- --></div></a>

The 'empty comments' are actually required for validation, as an 'empty DIV' causes a 'warning' to appear..

[Centauri]

<a href="#"><div id="clickable"><!-- --></div></a>

You can't have a div inside an anchor tag - block elements are not allowed inside inline elements....

The example given by Mr Initial Man is the way to do it.

[WebJoel]

Tried that, -realized the futility and falsity. :o Yes, Mr Initial Man's method is the way to use this. :)

[lohumihem]

Tried that, -realized the futility and falsity. :o Yes, Mr Initial Man's method is the way to use this. :)

I tried like this

<a href="http://www.yahoo.com"> <div class="logo"></div></a>

.logo{width:229px; float:left; background-image:url(../images/logo.gif); background-repeat:no-repeat; height:30px; cursor:hand;}


It is working fine, I tried CURSOR:HAND for IE. coz it doesnt show Hand on hover.

I tried INITIAL MAN's method also. for that i dint use cursor property. i guess it is a right method to do.what you suggest

I need YOUR valuable comments.thanx

[Mr Initial Man]

You'll run into validation problems with WebJoel's method; <div> does NOT belong in <a> But you made a minor mistake in cursor: It is cursor: pointer;.

[lohumihem]

You'll run into validation problems with WebJoel's method; <div> does NOT belong in <a> But you made a minor mistake in cursor: It is cursor:pointer;.


Hey cursor:hand; also work i got this form google it self, BUT i am not going to use it coz i m trying your method,and ie doesnt create any problem for this.
Thanx

[Mr Initial Man]

Sorry, that should have been cursor:pointer;

[WebJoel]

"cursor:hand;" is IE-proprietory, going back to IE5.x. If you expect to have users of IE5.x visiting your site, you can write your cursor declarations this way:

"cursor: pointer; cursor: hand;"

The order here is significant, as IE5.x will choke if "pointer" comes last... It ignores "pointer", and compliant browsers ignore "hand"..