JavaScript Tutorial/HTML Tags/a link

Материал из Web эксперт
Перейти к: навигация, поиск

Call a function in hyperlink

<html>
<head>
<title>Calling a Function</title>
<script language="javascript" type="text/javascript">
<!--
function greetVisitor()
{
     var myName = prompt("Name?", "");
     alert("Welcome " + myName + "!")
}
//-->
</script>
</head>
<body>
<h1>Please click below and enter your name when prompted.</h1>
<P><a href="javascript:greetVisitor()">Click for a greeting</a></p>
</body>
</html>


Call your function in hyper link onMouseover event

<html>
<head>
<title>A Simple Page</title>
<script language="JavaScript">
<!--
function overMessage()
{
    alert("This is a great link - click on it!");
}
//  -->
</script>
</head>
<body>
<a href="http://www.wbex.ru" onMouseover="overMessage()">www.wbex.ru</a>
</body>
</html>


Change hyperlink target

<html>
<head>
<script language="JavaScript" type = "text/javascript">
<!--
function ChangeLink() {
    var newlink = document.getElementById("urltext");
    var curlink = document.getElementById("oldurl");
    curlink.href = ("http://" + newlink.value);
    curlink.innerHTML = newlink.value;
}
function NewWindow(prefval) {
    var curlink = document.getElementById("oldurl");
    if (prefval == 1)
    {
        curlink.setAttribute("target", "_blank");
    }
    else if (prefval == 2)
    {
        curlink.removeAttribute("target");
    }
}
//-->
</script>
</head>
<body>
<form>
<a id="oldurl" href="http://www.wbex.ru">www.wbex.ru</a>
<P><input type="radio" value="V1" name="R1" onClick="NewWindow(1)">Open in New Window</p>
<P><input type="radio" name="R1" checked value="V2" onClick="NewWindow(2)">Open in Same Window</p>
   <input type="text" id="urltext" size="20">&nbsp;
   <input type="button" value="Change Link" name="B3" onClick="ChangeLink()"></p>
</form>
</body>
</html>


Change links

<html>
<head>
<title>Link Modifier</title>
</head>
<body>
<h1>Link Modifier</h1>
<P>
<a href="http://www.wbex.ru/">Example</a><br />
<a href="http://www.wbex.ru/">Example</a><br />
<a href="http://www.wbex.ru/">Example</a><br />
<a href="http://www.wbex.ru/">Example</a><br />
<a href="http://www.wbex.ru/">Example</a><br />
<a href="http://www.wbex.ru/">Example</a><br />
</p>
<script language="javascript" type="text/javascript">
<!--
var indexPage = "/index.html";
var allLinks = document.links;
for (var i=0; i<allLinks.length; i++) {
  allLinks[i].href = allLinks[i].href + indexPage;
}
//-->
</script>
</body>
</html>


Create a link with value in form controls

<html>
<head>
  <script type="text/javascript">
    function showWindow(){
      var txt = document.form1.stringField.value
      if (document.form1.hypertext[0].checked){
        txt = txt.link(document.form1.jumptoField.value);
      }else{
        if (document.form1.hypertext[1].checked){
          txt = txt.anchor(document.form1.jumptoField.value);
        }
      }
      document.write(txt);
    }
  </script>
</head>
<body>
  <form method="post" name="form1" action="null">
      Text:
      <input type="text" size="20" maxlength="256" name="stringField" />
      <input type="radio" name="hypertext" value="Link" checked="checked" />
      Link:
      <input type="radio" name="hypertext" value="Anchor" />
      Anchor:
      Jump To:
      <input type="text" size="30" maxlength="256" name="jumptoField" />
    <input type="button" name="Show" value="Show" onclick="showWindow()" />
  </form>
</body>
</html>


Hyper link onClick event

<html>
<head>
<script Language="Javascript" type = "text/javascript">
<!--
var newurl
function CheckRequest(newurl)
{
    if (confirm("Do you want to visit " + newurl + " site.")) {
      return true
    } else {
      return false
    }
}
//-->
</script>
<title>Capturing Links</title>
</head>
 <P><A href="http://www.wbex.ru" onClick = "return CheckRequest("wbex")">Java</A></P>
 <P><A href="http://www.netscape.ru" onClick = "return CheckRequest("Netscape")">Netscape</A></P>
</body>
</html>


Hyper link onmouseover evnet: change window.location

<HTML>
<BODY>
<FORM>
<A HREF="noplace" onMouseOver="window.location="http://www.wbex.ru";">No need to click this link.</A></BODY>
</HTML>

</FORM>
<P>


Link

The Link object represents an HTML hypertext link.

This can be an image, text, or predefined area within the Web page.

All HTML links are stored in a links[] array.

Property/Method Description handleEvent Event Handler hash Represents an anchor name in the URL for the link, which begins with the # character host Represents the host portion of the URL associated with a link hostname Represents the hostname portion of the URL associated with a link href Represents the complete URL associated with a link onClick Event handler for mouse click events onDblClick Event handler for double mouse click events onKeyDown Event handler for pressing a key down on a Link object onKeyPress Event handler for pressing a key on the Link object onKeyUp Event handler for releasing a key on the Link object onMouseDown Event handler for pressing the mouse button down on the link onMouseOut Event handler for moving the mouse cursor away from the link onMouseOver Event handler for moving the mouse cursor over the link onMouseUp Event handler for releasing the mouse button on the link pathname Represents the pathname portion of the link URL port Represents the port portion of the URL link protocol Specifies the protocol portion of the URL link search Represents the query portion of the URL link target Represents the name of the Window object in which the link is displayed text The text used to create the link



<html>
    <head>
    <title> Creating a Link object</title>
    </head>
    <body>
    Click on the link to go to the site.
    <br><br>
    <a href=http://www.wbex.ru onClick="alert("Go to:" + document.links[0].text)"> Macmillian Publishing</a>
    </body>
    </html>


Link.handleEvent()

Syntax



link.handleEvent(event)


Link.hash

The hash property represents a portion of the currently displayed URL.



<html>
    <head>
    <title> Using the hash property of the Link object</title>
    </head>
    <body>
    <script language="JavaScript">
    <!--
    function showHash(){
         alert(document.links[0].hash);
    }
    -->
    </script>
    Click the button to see the hash for the URL
    <form name="form1">
    <a href="http://www.wbex.ru">wbex.ru</a>
    <br><br>
    Hash value: <input type="text" name="text1" size=20>
    <br>
    <input type="button" name="hash" value="Get hash value" onClick="showHash()">
    <br><br>
    </form>
    </body>
    </html>


Link.host

The host property represents the host portion of the URL.



<html>
    <head>
    <title> Using the host property of the Link object</title>
    </head>
    <body>
    <script language="JavaScript">
    <!--
    function showHost(){
         alert(document.links[0].host);
    }
    -->
    </script>
    Click the button to see the host for the URL
    <form name="form1">
    <a href="http://www.wbex.ru">wbex.ru</a>
    <br><br>
    <input type="button" name="host" value="Get Host Value" onClick="showHost()">
    <br>
    </form>
    </body>
    </html>


Link.hostname

The hostname property represents the hostname portion of the link"s URL.



<html>
    <head>
    <title> Using the hostname property of the Link object</title>
    </head>
    <body>
    <script language="JavaScript">
    <!--
    function showHostname(){
         alert(document.links[0].hostname);
    }
    -->
    </script>
    Click the button to see the hostname for the URL
    <form name="form1">
    <a href="http://www.wbex.ru">www.wbex.ru</a>
    <br><br>
    <input type="button" name="host" value="Get Hostname Value" onClick="showHostname()">
    <br>
    </form>
    </body>
    </html>


Link.href

The href property represents the whole URL for the link.



<html>
    <head>
    <title> Using the href property of the Link object</title>
    </head>
    <body>
    <script language="JavaScript">
    <!--
    function showhref(){
         alert(document.links[0].href);
    }
    -->
    </script>
    Click the button to see the href property for the URL
    <form name="form1">
    <a href="http://www.wbex.ru">wbex.ru</a>
    <br><br>
    <input type="button" name="href" value="Get href Value" onClick="showhref()">
    <br>
    </form>
    </body>
    </html>


Link.onClick

Syntax



onClick="command"


Link.onDblClick

The onDblClick event handler handles the event when the mouse cursor is double-clicked on the link.



<html>
    <head>
    <title> Using the onDblClick event handler of the Link object</title>
    </head>
    <body>
    Click the link.
    <form name="form1">
    <a href="http://www.wbex.ru" onDblClick="alert("You double-clicked the link")">www.wbex.ru</a>
    <br><br>
    </form>
    </body>
    </html>


Link.onKeyDown

The onKeyDown event handler handles the event when a key is pressed down while the focus is on the link.



<html>
    <head>
    <title> Using the onKeyDown event handler of the Link object</title>
    </head>
    <body>
    Click the link.
    <form name="form1">
    <a href="http://www.wbex.ru" onKeyDown="alert("You pressed the key DOWN on the link")">www.wbex.ru</a>
    <br><br>
    </form>
    </body>
    </html>


Link.onKeyPress

The onKeyPress event handler handles the event when a key is pressed when the focus is set on the link.



<html>
    <head>
    <title> Using the onKeyPress event handler of the Link object</title>
    </head>
    <body>
    Click the link.
    <form name="form1">
    <a href=http://www.wbex.ru onKeyPress="alert("You pressed the key on the link")">
    www.wbex.ru</a>
    <br><br>
    </form>
    </body>
    </html>


Link.onKeyUp

The onKeyUp event handler handles events in which a key is pressed and then released.



<html>
    <head>
    <title> Using the onKeyUp event handler of the Link object</title>
    </head>
    <body>
    Highlight the link, press a key and let it up.
    <form name="form1">
    <a href=http://www.wbex.ru
    onKeyUp="alert("You let the key up")">
    www.wbex.ru</a>
    <br><br>
    </form>
    </body>
    </html>


Link.onMouseDown

The onMouseDown event handles the event when the mouse button is pressed down while the mouse pointer is over the link.



<html>
    <head>
    <title> Using the onMouseDown event handler of the Link object</title>
    </head>
    <body>
    Click the mouse button while the cursor is on the link.
    <form name="form1">
    <a href=http://www.wbex.ru
    onMouseDown="alert("The mouse button was pressed DOWN.")">
    http://www.wbex.ru</a>
    <br><br>
    </form>
    </body>
    </html>


Link.onMouseOut

The onMouseOut event handler handles the event when the mouse cursor is moved away from the link.



<html>
    <head>
    <title> Using the onMouseOut event handler of the Link object</title>
    </head>
    <body>
    <script language="JavaScript">
    <!--
    function showMsg(){
         alert("The Mouse cursor was removed from the link");
    }
    -->
    </script>
    Click the mouse button while the cursor is on the link.
    <form name="form1">
    <a href=http://www.wbex.ru
    onMouseOut="showMsg()">
    http://www.wbex.ru</a>
    </form>
    </body>
    </html>


Link.onMouseOver

The onMouseOver event handler handles the event when the mouse cursor is moved over the HTML link.



<html>
    <head>
    <title> Using the onMouseOver event handler of the Link object</title>
    </head>
    <body>
    <script language="JavaScript">
    <!--
    function showMsg(){
         alert("The Mouse cursor was moved over the link");
    }
    -->
    </script>
    Move the mouse cursor over the link.
    <form name="form1">
    <a href=http://www.wbex.ru
    onMouseOver="showMsg()">
    http://www.wbex.ru</a>
    </form>
    </body>
    </html>


Link.onMouseUp

The onMouseUp event handler handles the event when the mouse button is pressed on the link and then released.



<html>
    <head>
    <title> Using the onMouseUp event handler of the Link object</title>
    </head>
    <body>
    Click the mouse button while the cursor is on the link.
    <form name="form1">
    <a href=http://www.wbex.ru
    onMouseUp="alert("The Mouse button was let up")">
    http://www.wbex.ru</a>
    <br><br>
    <input type="text" name="text1" size=50>
    </form>
    </body>
    </html>


Link.pathname

The pathname property represents the pathname portion of the link URL.



<html>
    <head>
    <title> Using the pathname property of the Link object</title>
    </head>
    <body>
    <script language="JavaScript">
    <!--
    function showpathname(){
         alert(document.links[0].pathname);
    }
    -->
    </script>
    Click the button to see the pathname for the URL
    <form name="form1">
    <a href=http://www.wbex.ru>
    http://www.wbex.ru</a>
    <br><br>
    <input type="button" name="path" value="Get Pathname Value" onClick="showpathname()">
    <br>
    </form>
    </body>
    </html>


Link.port

The port property represents the port number in the URL. This is not always present in all URLs.



<html>
    <head>
    <title> Using the port property of the Link object</title>
    </head>
    <body>
    <script language="JavaScript">
    <!--
    function showport(){
         alert(document.links[0].port);
    }
    -->
    </script>
    Click the button to see the port number for the URL
    <form name="form1">
    <a href=http://www.wbex.ru>
    http://www.wbex.ru</a>
    <br><br>
    <input type="button" name="port" value="Get Port Number" onClick="showport()">
    <br>
    </form>
    </body>
    </html>


Link.protocol

The protocol property represents the protocol being used in the current Web browser.

This is the first piece of text in the URL.



<html>
    <head>
    <title> Using the protocol property of the Link object</title>
    </head>
    <body>
    <script language="JavaScript">
    <!--
    function showproto(){
         alert(document.links[0].protocol);
    }
    -->
    </script>
    Click the button to see the protocol used for the URL
    <form name="form1">
    <a href=http://www.wbex.ru>
    http://www.wbex.ru</a>
    <br><br>
    <input type="button" name="proto" value="Get Protocol" onClick="showproto()">
    <br>
    </form>
    </body>
    </html>


Link.search

The search property represents the query portion of the URL (if available).

This includes the leading question mark (?).



<html>
    <head>
    <title> Using the search property of the Link object</title>
    </head>
    <body>
    <script language="JavaScript">
    <!--
    function showsearch(){
         alert(document.links[0].search);
    }
    -->
    </script>
    Click the button to see the search portion of the URL
    <form name="form1">
    <a href=http://www.wbex.ru>
    http://www.wbex.ru</a>
    <br><br>
    <input type="button" name="search" value="Get Search portion" onClick="showsearch()">
    <br>
    </form>
    </body>
    </html>


Link.target

The target property represents the name of the window in which the URL is to be displayed.



<html>
    <head>
    <title> Using the target property of the Link object</title>
    </head>
    <body>
    <script language="JavaScript">
    <!--
    function showtarget(){
         alert(document.links[0].target);
    }
    -->
    </script>
    Click the button to see the target of the URL
    <form name="form1">
    <a href=http://www.wbex.ru>
    http://www.wbex.ru</a>
    <input type="button" name="tar" value="Get Target" onClick="showtarget()">
    <br>
    </form>
    </body>
    </html>


Link.text

The text property gets the text value of the link.



<html>
    <head>
    <title> Using the text property of the Link object</title>
    </head>
    <body>
    <script language="JavaScript">
    <!--
    function showtext(){
         alert(document.links[0].text);
    }
    -->
    </script>
    Click the button to see the text value of the link.
    <form name="form1">
    <a href=http://www.wbex.ru>
    Link to Something</a>
    <br><br>
    <input type="button" name="txt" value="Get Text Value" onClick="showtext()">
    <br>
    </form>
    </body>
    </html>


Update window status bar in mouse over event for a hyper link element tag(IE)

<html>
<head>
<title>A Simple Page</title>
<script language="JavaScript">
<!--
function addMsg()
{
    window.status="Sample image";
    return true;
}
//  -->
</script>
</head>
<body>
<a href="http://www.wbex.ru" onMouseover="window.status="Sample image";return true" onMouseout="window.status="";return true">
<img src="http://www.wbex.ru/style/logo.png" border="0">
</a>
</body>
</html>