|
Use the link tag instead of a button to access your javascripts. If you like links better than buttons,
this is the place to be.
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:
<HEAD>
<SCRIPT language="JavaScript">
<!--hide
function newwindow()
{
window.open('jex5.htm','jav','width=300,height=200,resizable=yes');
}
//-->
</SCRIPT>
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>
Now you will get a link like the one below. Give it a try and see the new window appear when you
click the link!
Click Here!
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:
<A href="javascript:newwindow()" ><IMG src="scare.jpg" border="0"></A>
Now you can click on the image below for a new window!
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. |
Tutorials 
