Webmaster

HTML : The Hidden Possibilities of Hypertext Links
Contents ]
Dr Benton

Dynamically Change the Target of a Link

If you have already visited our DHTML lab book pages, you will be familiar with the terms DOM and object. So you might know that links are objects of the link type, and that you can use code to dynamically modify the value of the HREF attribute (the URL of the targeted resource):

<HTML>
  <BODY>
    <A HREF="http://www.somesite.com">Click on me!</A>
    <FORM NAME="inform">
    <INPUT TYPE="TEXT" NAME="label" VALUE="http://www.somesite.com">
    <INPUT TYPE="BUTTON" NAME="send" VALUE="Update"
       OnClick = "document.links[0].href = document.inform.label.value;">
    </FORM>
  </BODY>
</HTML>

Type in a URL in the form, validate and click on the link! Terrific, isn't it?

The link array. As is the case for all DOM objects (images, user-input forms, etc.), you can access links through the DOM array that holds all the link objects of a page. To do that, use links[0] to access the first link, links[1] to access the second, and so on.