- Dec 18, 2010
- 2,639
- 2,397
Got a little bored and decided to write this up, it's simply a little CSS hack that targets 'a' elements with the target of either _blank or _new, which means links attached to the 'a' element will open in a new page, then it places a little background image of a new window icon that I grabbed from Google next to it.
Many sites use this for accessibility, but they decide to add a class of 'newwindow' (or something similar) to the 'a' element, whereas this removes the need for an additional class name so long as the target is either _blank or _new
Code is below:
Here is the link to the icon:
Or you can view it on
Hope it helps,
Mark
Many sites use this for accessibility, but they decide to add a class of 'newwindow' (or something similar) to the 'a' element, whereas this removes the need for an additional class name so long as the target is either _blank or _new
Code is below:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>New Window</title>
<style>
body {
font-family: "Helvetica", sans-serif;
font-size: 1em;
line-height: 1.2;
}
/*
select elements whose target is '_blank' or '_new'
meaning the attached link will open in a new page
*/
a[target="_blank"],
a[target="_new"] {
background: url('newwindow.png') no-repeat center right;
height: 12px;
width: 14px;
padding-right: 20px;
}
</style>
</head>
<body>
<ul>
<li><a href="http://google.co.uk" target="_blank">Google UK</a></li>
<li><a href="index.html">Home page</a></li>
<li><a href="http://eminem.com" target="_new">Eminem</a></li>
<li><a href="http://facebook.com" target="_blank">Facebook</a></li>
<li><a href="about.html">About this website</a></li>
</ul>
</body>
</html>Here is the link to the icon:
You must be registered for see links
Or you can view it on
You must be registered for see links
Hope it helps,
Mark
