2 replies [Last post]
strnad
Offline
newbie
Last seen: 10 years 12 weeks ago
Joined: 2009-08-26
Posts: 2
Points: 0

Hello,

on my site I hav e a lot of links that go outside of my site so I want to open them in a new window.

I know, that it is possible to use a css style instead of target="_blank" code.

Also - since I am using CSS, I would like to add a picture stating it is an external link behind it.

I searched on the internet and I did not find anything.

Can please somebody help how to achieve it via css?

Thanks for help

Peter

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 8 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

You can't achieve the

You can't achieve the opening in a new window via CSS. What you are after is a behaviour rather than an appearance, behaviours are for javascript.

For adding the picture, that is appearance so is fine for CSS. To add a picture behind, use a background. If you would like the picture to be a little icon that precedes the link text, give the link enough padding-left to fit in the icon with some space to separate it from your text and ensure background-repeat is set to no-repeat;

Strictly a CSS selector can be constructed to recognize all the links with target="_blank". Older versions of IE will have problems with that, so you are best giving them a class of external and referencing that in your CSS.

E.g.

a.external {
  background: url(/images/icon-external_link.gif) 0 50% no-repeat;
  padding-left: 15px;
}

Doing this sort of stuff is pretty common, so fire up Firefox and search the internet for some sites that use images to indicate external links. Inspect them with Firebug and you'll see how its done.

strnad
Offline
newbie
Last seen: 10 years 12 weeks ago
Joined: 2009-08-26
Posts: 2
Points: 0

hello, thank you for an

hello,

thank you for an explanation.

Now I understand Smile

Peter