JavaScript Tutorial/HTML Tags/a link

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

Call a function in hyperlink

   <source lang="javascript">

<html> <head> <title>Calling a Function</title> <script language="javascript" type="text/javascript">

</script> </head> <body>

Please click below and enter your name when prompted.

<a href="javascript:greetVisitor()">Click for a greeting</a>

</body> </html></source>


Call your function in hyper link onMouseover event

   <source lang="javascript">

<html> <head> <title>A Simple Page</title> <script language="JavaScript">

</script> </head> <body> <a href="http://www.wbex.ru" onMouseover="overMessage()">www.wbex.ru</a> </body> </html></source>


Change hyperlink target

   <source lang="javascript">

<html> <head> <script language="JavaScript" type = "text/javascript">

</script> </head> <body> <form> <a id="oldurl" href="http://www.wbex.ru">www.wbex.ru</a>

<input type="radio" value="V1" name="R1" onClick="NewWindow(1)">Open in New Window

<input type="radio" name="R1" checked value="V2" onClick="NewWindow(2)">Open in Same Window

  <input type="text" id="urltext" size="20"> 
  <input type="button" value="Change Link" name="B3" onClick="ChangeLink()"></p>

</form> </body> </html></source>


Change links

   <source lang="javascript">

<html> <head> <title>Link Modifier</title> </head> <body>

Link Modifier

<a href="http://www.wbex.ru/">Example</a>
<a href="http://www.wbex.ru/">Example</a>
<a href="http://www.wbex.ru/">Example</a>
<a href="http://www.wbex.ru/">Example</a>
<a href="http://www.wbex.ru/">Example</a>
<a href="http://www.wbex.ru/">Example</a>

<script language="javascript" type="text/javascript">

</script> </body> </html></source>


Create a link with value in form controls

   <source lang="javascript">

<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></source>


Hyper link onClick event

   <source lang="javascript">

<html> <head> <script Language="Javascript" type = "text/javascript">

</script> <title>Capturing Links</title> </head>

<A href="http://www.wbex.ru" onClick = "return CheckRequest("wbex")">Java</A>

<A href="http://www.netscape.ru" onClick = "return CheckRequest("Netscape")">Netscape</A>

</body> </html></source>


Hyper link onmouseover evnet: change window.location

   <source lang="javascript">

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

</FORM>

</source>

Link

<p>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 



   <source lang="javascript">

<html> 

   <head>
   <title> Creating a Link object</title>
   </head>
   <body>
   Click on the link to go to the site.
   


   <a href=http://www.wbex.ru onClick="alert("Go to:" + document.links[0].text)"> Macmillian Publishing</a>
   </body>
   </html></source>

Link.handleEvent()

Syntax



   <source lang="javascript">

link.handleEvent(event)</source>


Link.hash

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



   <source lang="javascript">

<html> 

   <head>
   <title> Using the hash property of the Link object</title>
   </head>
   <body>
   <script language="JavaScript">
   
   </script>
   Click the button to see the hash for the URL
   <form name="form1">
   <a href="http://www.wbex.ru">wbex.ru</a>
   


   Hash value: <input type="text" name="text1" size=20>
   

   <input type="button" name="hash" value="Get hash value" onClick="showHash()">
   


   </form>
   </body>
   </html></source>

Link.host

The host property represents the host portion of the URL.



   <source lang="javascript">

<html> 

   <head>
   <title> Using the host property of the Link object</title>
   </head>
   <body>
   <script language="JavaScript">
   
   </script>
   Click the button to see the host for the URL
   <form name="form1">
   <a href="http://www.wbex.ru">wbex.ru</a>
   


   <input type="button" name="host" value="Get Host Value" onClick="showHost()">
   

   </form>
   </body>
   </html></source>

Link.hostname

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



   <source lang="javascript">

<html> 

   <head>
   <title> Using the hostname property of the Link object</title>
   </head>
   <body>
   <script language="JavaScript">
   
   </script>
   Click the button to see the hostname for the URL
   <form name="form1">
   <a href="http://www.wbex.ru">www.wbex.ru</a>
   


   <input type="button" name="host" value="Get Hostname Value" onClick="showHostname()">
   

   </form>
   </body>
   </html></source>

Link.href

The href property represents the whole URL for the link.



   <source lang="javascript">

<html> 

   <head>
   <title> Using the href property of the Link object</title>
   </head>
   <body>
   <script language="JavaScript">
   
   </script>
   Click the button to see the href property for the URL
   <form name="form1">
   <a href="http://www.wbex.ru">wbex.ru</a>
   


   <input type="button" name="href" value="Get href Value" onClick="showhref()">
   

   </form>
   </body>
   </html></source>

Link.onClick

Syntax



   <source lang="javascript">

onClick="command"</source>


Link.onDblClick

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



   <source lang="javascript">

<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>
   


   </form>
   </body>
   </html></source>

Link.onKeyDown

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



   <source lang="javascript">

<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>
   


   </form>
   </body>
   </html></source>

Link.onKeyPress

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



   <source lang="javascript">

<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>
   


   </form>
   </body>
   </html></source>

Link.onKeyUp

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



   <source lang="javascript">

<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>
   


   </form>
   </body>
   </html></source>

Link.onMouseDown

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



   <source lang="javascript">

<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>
   


   </form>
   </body>
   </html></source>

Link.onMouseOut

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



   <source lang="javascript">

<html> 

   <head>
   <title> Using the onMouseOut event handler of the Link object</title>
   </head>
   <body>
   <script language="JavaScript">
   
   </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></source>

Link.onMouseOver

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



   <source lang="javascript">

<html> 

   <head>
   <title> Using the onMouseOver event handler of the Link object</title>
   </head>
   <body>
   <script language="JavaScript">
   
   </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></source>

Link.onMouseUp

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



   <source lang="javascript">

<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>
   


   <input type="text" name="text1" size=50>
   </form>
   </body>
   </html></source>

Link.pathname

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



   <source lang="javascript">

<html> 

   <head>
   <title> Using the pathname property of the Link object</title>
   </head>
   <body>
   <script language="JavaScript">
   
   </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>
   


   <input type="button" name="path" value="Get Pathname Value" onClick="showpathname()">
   

   </form>
   </body>
   </html></source>

Link.port

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



   <source lang="javascript">

<html> 

   <head>
   <title> Using the port property of the Link object</title>
   </head>
   <body>
   <script language="JavaScript">
   
   </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>
   


   <input type="button" name="port" value="Get Port Number" onClick="showport()">
   

   </form>
   </body>
   </html></source>

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.



   <source lang="javascript">

<html> 

   <head>
   <title> Using the protocol property of the Link object</title>
   </head>
   <body>
   <script language="JavaScript">
   
   </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>
   


   <input type="button" name="proto" value="Get Protocol" onClick="showproto()">
   

   </form>
   </body>
   </html></source>

Link.search

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

This includes the leading question mark (?).



   <source lang="javascript">

<html> 

   <head>
   <title> Using the search property of the Link object</title>
   </head>
   <body>
   <script language="JavaScript">
   
   </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>
   


   <input type="button" name="search" value="Get Search portion" onClick="showsearch()">
   

   </form>
   </body>
   </html></source>

Link.target

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



   <source lang="javascript">

<html> 

   <head>
   <title> Using the target property of the Link object</title>
   </head>
   <body>
   <script language="JavaScript">
   
   </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()">
   

   </form>
   </body>
   </html></source>

Link.text

The text property gets the text value of the link.



   <source lang="javascript">

<html> 

   <head>
   <title> Using the text property of the Link object</title>
   </head>
   <body>
   <script language="JavaScript">
   
   </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>
   


   <input type="button" name="txt" value="Get Text Value" onClick="showtext()">
   

   </form>
   </body>
   </html></source>

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

   <source lang="javascript">

<html> <head> <title>A Simple Page</title> <script language="JavaScript">

</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></source>

Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/HTML_Tags/a_link&oldid=9057»