Using Link Tags with Javascript

Lesson-15 (Using Link Tags with Javascript)

I get this question so much, I figured I'd better get in gear and write another section to address using the link tag for javascripts (such as new windows), rather than using the old grey button. Well, there are a couple of ways to do this. I'll start with the easier to understand version first.

The first method is to access a javascript function within the HREF attribute of your link tag. So, if you want to link to another page, you normally write:

<A HREF="nextpage.htm">Click here</A>

Well, you can access a javascript function you have written instead by writing the link this way:

<A HREF="javascript:myfunction()">Click Here</A>

Yes, now you can open that new window without using the grey button. Here is a script to give you the new window:

First, I found that this works much better if you create your own function in the head section first. All this function needs to do is open your new window. So, in your head section, create a function like this:

The above script will open my "jex5.htm" page in a new window. As you know, replace this with url of the page you wish to open, and adjust the other attributes to your liking. If you need to know more about the window.open function, see the Opening a New Window tutorial and learn that first.....then come back and get going with the rest of this section.

Now go into your body section to wherever you want the link to appear, and write your link tag this way:

<A HREF="javascript:newwindow()" >Click Here!</A>

For those of you who want to use an image for the link, just do the normal "image inside the link tag" trick, but with the link tag modified for javascript like above:

The second way to do this is a little more difficult, but some people may be more comfortable with it. The trick is to go ahead and use the onClick=" " attribute in your link tag. The trick here is to keep the browser from following the actual link after running your script. Here is a sample of using the onClick attribute in the link tag:

<A HREF="newpage.htm" onClick="newwindow();return false">Click Here!</A>

I used the same script we had written in the head section for the first method, but I used it inside the onClick=" " command. Also notice the semicolon after the function call, and the "return false" at the end of the command. The return false part keeps the browser from going to "newpage.htm" after opening your new window. You could put any page here you want, and the link will no longer take you there (except in some older browsers). So you don't really have to put an actual url in the HREF attribute here unless you wish to offer an alternative for those with older browsers that don't recognize the onClick=" " command. As in the above example, you can also use an image inside your link tag to make a clickable image.