/    Sign up×
Community /Pin to ProfileBookmark

Can we give links through css?

Copy linkTweet thisAlerts:
Oct 17.2007

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.

to post a comment
CSS

14 Comments(s) ↴

Copy linkTweet thisAlerts:
@scragarOct 17.2007 — not through CSS. Very possible to position a link around it or whatever though.
Copy linkTweet thisAlerts:
@Mr_Initial_ManOct 17.2007 — 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:

[CODE]a img{border:0;}[/CODE]
Copy linkTweet thisAlerts:
@scragarOct 17.2007 — if the image is coming through CSS I'm gonna guess it's a background image...
Copy linkTweet thisAlerts:
@Mr_Initial_ManOct 17.2007 — Ah, okay. Well, you COULD have something like <a href="URL" id="LogoLink"></a>

Then have your CSS look like this:

[Code]#LogoLink{
display:block;
height:[B][i]image height[/i][/B];
width:[B][i]image width[/i][/B];
background-image: url([B][i]image url[/i][/B]);
}[/code]

Something like that.
Copy linkTweet thisAlerts:
@lohumihemauthorOct 17.2007 — 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:

[CODE]a img{border:0;}[/CODE][/QUOTE]


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)[COLOR="Red"]" can i write some property HERE which ll jump me to any given link"[/COLOR]}

Or some thing like this

<div onClick="open.window(http://www.yahoo.com)" class="logo"></div>
Copy linkTweet thisAlerts:
@Mr_Initial_ManOct 17.2007 — <a href="http://www.yahoo.com" class="logo"></a>
[Code].logo{
display:block;
height:[B][i]image height[/i][/B];
width:[B][i]image width[/i][/B];
background-image: url([B][i]image url[/i][/B]);
}[/code]

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

CSS does NOT create clickable hyperlinks.
Copy linkTweet thisAlerts:
@WebJoelOct 17.2007 — Make the container DIV (that has the background-image) itself, be 'the clickable anchor'..

CSS:#clickable {width:125px; height:75px; background-image:url();}[/QUOTE]

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

The 'empty comments' are actually required for validation, as an 'empty DIV' causes a 'warning' to appear..
Copy linkTweet thisAlerts:
@CentauriOct 17.2007 — <a href="#"><div id="clickable"><!-- --></div></a>[/QUOTE]

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.
Copy linkTweet thisAlerts:
@WebJoelOct 17.2007 — Tried that, -realized the futility and falsity. :o Yes, Mr Initial Man's method is the way to use this. ?
Copy linkTweet thisAlerts:
@lohumihemauthorOct 18.2007 — Tried that, -realized the futility and falsity. :o Yes, Mr Initial Man's method is the way to use this. ?[/QUOTE]

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
Copy linkTweet thisAlerts:
@Mr_Initial_ManOct 18.2007 — 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 [b]cursor: pointer;[/b].
Copy linkTweet thisAlerts:
@lohumihemauthorOct 18.2007 — 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 [b]cursor:pointer;[/b].[/QUOTE]


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
Copy linkTweet thisAlerts:
@Mr_Initial_ManOct 18.2007 — Sorry, that should have been cursor:pointer;
Copy linkTweet thisAlerts:
@WebJoelOct 18.2007 — "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:

"[B]cursor: pointer; cursor: hand;[/B]"

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

Success!

Help @lohumihem spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...