How can I make a link open in a new window using css?

Question

I need to make a set of links open in a new window - the good thing is they all have the same css style - what do i need to do in css to get these links opened in new window?

Answer 1

You can't use CSS to do this. You need to use <a target="_blank"></a>.

Edit: Javascript's window.open command.

Answer 2

You can't do this with CSS. You should do this with a small script such as:

<script type="text/javascript">
function newwindow()
{
    var load = window.open('http://www.domain.com');
}
</Script>

Answer 3

As per the comments:

and how can i specify window size? i want it a little smaller than the original page. also, can i make all links in the page, open in the SAME new window, of a smaller size?

You can't use CSS or HTML to do this. You need to use JavaScript's window.open(). You can get all links by element.getElementsByTagName() on a and you can determine the link's class attribute by element.className:

window.onload = function() {
    var links = document.getElementsByTagName('a');
    for (var i = 0; i < links.length; i++) {
        var link = links[i];
        if (link.className == 'someClass') {
            link.onclick = function() {
                window.open(this.href, 'chooseYourName', 'width=600,height=400');
                return false;
            }
        }
    }  
} 

Or if you're already using jQuery, you can use $('a.someClass') to select all links which has the specified class someClass:

$(document).ready(function() {
    $('a.someClass').click(function() {
        window.open(this.href, 'chooseYourName', 'width=600,height=400');
        return false;
    });
});

The window's name as specified in chooseYourName will take care that all links are (re)opened in the same window. You also see that you can specify the width and height over there.