JavaScript DHTML/HTML/Hyper Link

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

"alinkColor" Example

    
<html>
<body onLoad="goColor();">
<script>
    function goColor() {
        document.alinkColor = "red";
    }
</script>
<a href="http://www.wbex.ru/">wbex.ru Link: click to turn red</a>
</body>



"aLink" Example

    
<html>
<body onLoad="function1();">
<script>
    function function1() {
        document.body.aLink = "red";
    }
</script>
<a href="http://www.wbex.ru/">wbex.ru (click to turn red)</a>
</body>
</html>



Call function in hyper link

<html>
<head>
<script language="JavaScript">
<!--
  function myFunction() {
    alert("Hello World!");
  }
//-->
</script>
</head>
<body>
<a href="javascript:myFunction()">Click me</a>
</body>
</html>



Change Link Colors

<html>
<head>
<script language="JavaScript">
<!--
function changeLinkColors() {
  var dateToday = new Date();
  var dayToday  = dateToday.getDay();
  var linkText  = "here";
  var theUrl    = "";
  if (dayToday == 0) { document.linkColor = "Yellow" } // Sun
  if (dayToday == 1) { document.linkColor = "Aqua"   } // Mon
  if (dayToday == 2) { document.linkColor = "White"  } // Tue
  if (dayToday == 3) { document.linkColor = "Red"    } // Wed
  if (dayToday == 4) { document.linkColor = "Blue"   } // Thu
  if (dayToday == 5) { document.linkColor = "Green"  } // Fri
  if (dayToday == 6) { document.linkColor = "Black"  } // Sat
}
changeLinkColors();
//-->
</script>
</head>
<body>
<basefont size=4>
If it is a Sunday, <a href="http://www.wbex.ru">this</a> link will be
colored <font color="Yellow">Yellow</font>.
</body>
</html>



Change the target attribute of a link

<html>
<head>
<script type="text/javascript">
function myTarget(){
    document.getElementById("myAnchor").target="_blank"
}
</script>
</head>
<body>
    <a id="myAnchor" href="http://www.wbex.ru">Visit wbex</a>
    <form>
        <input type="button" onclick="myTarget()" value="Make the link open in a new window!">
    </form>
    <p>Try the link before and after you have pressed the button!</p>
</body>
</html>



Change URL and text of a hyperlink

<html>
<head>
<script type="text/javascript">
function myHref(){
    document.getElementById("myAnchor").innerHTML="Visit Google"
    document.getElementById("myAnchor").href="http://www.google.ru"
}
</script>
</head>
<body>
    <a id="myAnchor" href="http://www.wbex.ru">Visit wbex</a>
    <form>
        <input type="button" onclick="myHref()" value="Change URL and text">
    </form>
</body>
</html>



Get link infomation in a paragraph

<html>
<head>
<script language="JavaScript">
<!--
var linkText = "";
function showLinks() {
  var item = 1;
  linkText = "LINK INDEX:\n" + "____________\n";
  for (n=0; n < document.links.length; n++) {
      linkText += item + ". " + document.links[n] + "\n";
      item ++;
  }
  alert(linkText);
}
//-->
</script>
<title>An introduction to the Web</title>
</head>
<body><basefont size=4>
<font size="+1">A</font>N <font size="+1">I</font>NTRODUCTION
<font size="+1">T</font>O <font size="+1">T</font>HE
<font size="+1">W</font>EB<hr>
<a href="http://www.wbex.ru">www.wbex.ru</a>
<a href="http://www.wbex.ru">hyperlinks</a><p>
<form><input type="button" value="Quick Link Index" onClick="showLinks()"></form>
</body>
</html>



"hideFocus" Example

    
<html>
<body>
<script>
function function1() {
    document.all.myLink.hideFocus = "true";
    alert("The A element lost focus.\nPress tab key to verify");
}
</script>
<a tabindex="2" id="myLink" href="http://www.wbex.ru">wbex.ru home page</a>
<button onclick="function1();">Hide Focus</button>
</body>
</html>



Illustrate how a URL can be referenced

<html>
<body>
<basefont size=4>
<img src="internal-gopher-menu">&nbsp;Click
<script language="JavaScript">
<!--
var dateToday = new Date();
var day       = dateToday.getDay();
var linkText  = "here";
var aUrl= "";
if (day == 0) { aUrl="http://www.wbex.ru/wrongfolder/sunday.htm"; }
if (day == 1) { aUrl="http://www.wbex.ru/wrongfolder/monday.htm"; }
if (day == 2) { aUrl="http://www.wbex.ru/wrongfolder/tuesday.htm"; }
if (day == 3) { aUrl="http://www.wbex.ru/wrongfolder/wednesday.htm"; }
if (day == 4) { aUrl="http://www.wbex.ru/wrongfolder/thursday.htm"; }
if (day == 5) { aUrl="http://www.wbex.ru/wrongfolder/friday.htm"; }
if (day == 6) { aUrl="http://www.wbex.ru/wrongfolder/saturday.htm"; }
document.write(linkText.link(aUrl));
//-->
</script>
for today"s news.<p>
</body>
</html>



Inserts a link on a text, a picture, a button or a dynamic picture

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
  <HEAD>
    <TITLE>JsLib 1.3 - Exemple - liens.js</TITLE>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
    <META NAME="Author" CONTENT="Etienne CHEVILLARD">
    <!-- liens.js -->
    <SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">
/* liens.js
 * Role : insere dans la page Web un lien sur un texte, un bouton ou une image
 * Projet : JsLib
 * Auteur : Etienne CHEVILLARD (echevillard@users.sourceforge.net)
 * Version : 1.3
 * Creation : 30/04/2001
 * Mise a jour : 23/02/2005
 * Bogues connues : - Opera remplace les commentaires des liens par leurs URLs
 */
// --- Variables globales ---
// variables communes
var liens_cpt=0;
// --- Fonctions ---
// retourne une adresse e-mail partiellement encodee
function formaterMailtoAntiSpam(nom_email, domaine_email) {
  return(nom_email + "%40" + domaine_email);  
} // fin formaterMailtoAntiSpam(nom_email, domaine_email)
// insere un lien vers une adresse e-mail sur un bouton
function lienBoutonEmail(texte, nom_email, domaine_email, sujet, commentaire) {
  if (!sujet) { sujet=""; }
  if (!commentaire) { commentaire=""; }
  var lcode="<FORM><INPUT TYPE=\"button\" VALUE=\""+texte+"\" onClick=\"window.location.href="mailto:";
  lcode+=formaterMailtoAntiSpam(nom_email, domaine_email);
  lcode+="?subject="+sujet+"";\" onMouseOver=\"window.status=""+commentaire;
  lcode+=""; return true;\" onMouseOut=\"window.status=""; return true;\"></FORM>";
  return(lcode);
} // fin lienBoutonEmail(texte, nom_email, domaine_email, sujet, commentaire)
// insere un lien vers une page Web sur un bouton
function lienBoutonWeb(texte, url, cible, commentaire) {
  var ldest;
  if (!url) { url="about:blank"; }
  if (!cible) { cible="_self"; }
  if (!commentaire) { commentaire=""; }
  if (cible=="_self") { ldest="self.location.href=""+url+"""; }
  else if (cible=="_parent") { ldest="parent.location.href=""+url+"""; }
  else if (cible=="_top") { ldest="top.location.href=""+url+"""; }
  else { ldest="window.open(""+url+"", ""+cible+"")"; }
  var lcode="<FORM><INPUT TYPE=\"button\" VALUE=\""+texte+"\" onClick=\""+ldest;
  lcode+=";\" onMouseOver=\"window.status=""+commentaire;
  lcode+=""; return true;\" onMouseOut=\"window.status=""; return true;\"></FORM>";
  return(lcode);
} // fin lienBoutonWeb(texte, url, cible, commentaire)
// insere un lien vers vers une adresse e-mail sur une image dynamique
function lienDynaEmail(imageOut, imageOver, nom_email, domaine_email, sujet, commentaire) {
  if (!sujet) { sujet=""; }
  if (!commentaire) { commentaire=""; }
  var lcode="<A HREF=\"mailto:";
  lcode+=formaterMailtoAntiSpam(nom_email, domaine_email);
  lcode+="?subject="+sujet+"\" onMouseOver=\"liens_image"+liens_cpt;
  lcode+=".src=""+imageOver+""; window.status=""+commentaire+""; return true;\" ";
  lcode+=" onMouseOut=\"liens_image"+liens_cpt+".src=""+imageOut+""; window.status=""; return true;\">";
  lcode+="<IMG NAME=\"liens_image"+liens_cpt+"\" SRC=\""+imageOut+"\" BORDER=0 ALIGN=MIDDLE ";
  lcode+="ALT=\""+commentaire+"\" ";  
  lcode+="onLoad=\"liens_image_temp=new Image(0,0); liens_image_temp.src=""+imageOver+""; return true;\"></A>";
  liens_cpt=parseInt(liens_cpt)+1;
  return (lcode);
} // fin lienDynaEmail(imageOut, imageOver, nom_email, domaine_email, sujet, commentaire)
// insere un lien vers une page Web sur une image dynamique
function lienDynaWeb(imageOut, imageOver, url, cible, commentaire) {
  if (!url) { url="about:blank"; }
  if (!cible) { cible="_self"; }
  if (!commentaire) { commentaire=""; }
  var lcode="<A HREF=\""+url+"\" TARGET=\""+cible+"\" onMouseOver=\"liens_image"+liens_cpt;
  lcode+=".src=""+imageOver+""; window.status=""+commentaire+""; return true;\" ";
  lcode+=" onMouseOut=\"liens_image"+liens_cpt+".src=""+imageOut+""; window.status=""; return true;\">";
  lcode+="<IMG NAME=\"liens_image"+liens_cpt+"\" SRC=\""+imageOut+"\" BORDER=0 ALIGN=MIDDLE ";
  lcode+="ALT=\""+commentaire+"\" ";
  lcode+="onLoad=\"liens_image_temp=new Image(0,0); liens_image_temp.src=""+imageOver+""; return true;\"></A>";
  liens_cpt=parseInt(liens_cpt)+1;
  return(lcode);
} // fin lienDynaWeb(imageOut, imageOver, url, cible, commentaire)
// insere un lien vers une adresse e-mail sur une image
function lienImageEmail(image, nom_email, domaine_email, sujet, commentaire) {
  if (!sujet) { sujet=""; }
  if (!commentaire) { commentaire=""; }
  var lcode="<A HREF=\"mailto:";
  lcode+=formaterMailtoAntiSpam(nom_email, domaine_email);
  lcode+="?subject="+sujet+"\" onMouseOver=\"window.status=""+commentaire;
  lcode+=""; return true;\" onMouseOut=\"window.status=""; return true;\">";
  lcode+="<IMG SRC=\""+image+"\" BORDER=0 ALIGN=MIDDLE ALT=\""+commentaire+"\"></A>";
  return(lcode);
} // fin lienImageEmail(image, nom_email, domaine_email, sujet, commentaire)
// insere un lien vers une page Web sur une image
function lienImageWeb(image, url, cible, commentaire) {
  if (!url) { url="about:blank"; }
  if (!cible) { cible="_self"; }
  if (!commentaire) { commentaire=""; }
  var lcode="<A HREF=\""+url+"\" TARGET=\""+cible+"\" onMouseOver=\"window.status=""+commentaire;
  lcode+=""; return true;\" onMouseOut=\"window.status=""; return true;\">";
  lcode+="<IMG SRC=\""+image+"\" BORDER=0 ALIGN=MIDDLE ALT=\""+commentaire+"\"></A>";
  return(lcode);
} // fin lienImageWeb(image, url, cible, commentaire)
// insere un lien vers une adresse e-mail sur un texte
function lienTexteEmail(texte, nom_email, domaine_email, sujet, commentaire) {
  if (!sujet) { sujet=""; }
  if (!commentaire) { commentaire=""; }
  var lcode="<A HREF=\"mailto:";
  lcode+=formaterMailtoAntiSpam(nom_email, domaine_email);
  lcode+="?subject="+sujet+"\" onMouseOver=\"window.status=""+commentaire;
  lcode+=""; return true;\" onMouseOut=\"window.status=""; return true;\">"+texte+"</A>";
  return(lcode);
} // fin lienTexteEmail(texte, nom_email, domaine_email, sujet, commentaire)
// insere un lien vers une page Web sur un texte
function lienTexteWeb(texte, url, cible, commentaire) {
  if (!url) { url="about:blank"; }
  if (!cible) { cible="_self"; }
  if (!commentaire) { commentaire=""; }
  var lcode="<A HREF=\""+url+"\" TARGET=\""+cible+"\" onMouseOver=\"window.status=""+commentaire;
  lcode+=""; return true;\" onMouseOut=\"window.status=""; return true;\">"+texte+"</A>";
  return(lcode);
} // fin lienTexteWeb(texte, url, cible, commentaire)
    </SCRIPT>
  </HEAD>
  <BODY>
    <H1>JsLib 1.3</H1>
    <HR>
    <H2>Exemple - liens.js</H2>
    <NOSCRIPT>
      <P><I>Erreur : votre navigateur ne reconnait pas le Javascript ou est configur&eacute; pour ne
      pas prendre en compte le code Javascript. Dans ce dernier cas, vous pouvez modifier la
      configuration dans les pr&eacute;f&eacute;rences/options de votre navigateur.</I>
      <HR>
    </NOSCRIPT>
    <P>Lien vers page Web sur texte (m&ecirc;me cadre) :
      <SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">
        document.write(lienTexteWeb("Site Web JsLib", "http://www.wbex.ru/",
          "_self", "Site Web de la biblioth&egrave;que JsLib"));</SCRIPT>
    <P>Lien vers adresse e-mail sur texte :
      <SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">
        document.write(lienTexteEmail("Mon adresse e-mail", "echevillard", "users.sourceforge.net",
          "A propos de JsLib", "Ecrivez-moi !"));</SCRIPT>
    <P>Lien vers page Web sur image (cadre de base) :
      <SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">
        document.write(lienImageWeb("./extra/home.gif", "http://www.wbex.ru/",
          "_top", "Site Web de la biblioth&egrave;que JsLib"));</SCRIPT>
    <P>Lien vers adresse e-mail sur image :
      <SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">
        document.write(lienImageEmail("./extra/mail.gif", "echevillard", "users.sourceforge.net",
          "A propos de JsLib", "Ecrivez-moi !"));</SCRIPT>
    <P>Lien vers page Web sur bouton (nouvelle fen&ecirc;tre) :
      <SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">
        document.write(lienBoutonWeb("Site Web JsLib", "http://www.wbex.ru/",
          "_blank", "Site Web de la biblioth&egrave;que JsLib"));</SCRIPT>
    <P>Lien vers adresse e-mail sur bouton :
      <SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">
        document.write(lienBoutonEmail("Mon adresse e-mail", "echevillard", "users.sourceforge.net",
          "A propos de JsLib", "Ecrivez-moi !"));</SCRIPT>
    <P>Lien vers page Web sur image dynamique (nouvelle fen&ecirc;tre) :
      <SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">
        document.write(lienDynaWeb("./extra/home_nb.gif", "./extra/home.gif",
          "http://jslib.sourceforge.net/", "_blank", "Site Web de la biblioth&egrave;que JsLib"));</SCRIPT>
    <P>Lien vers adresse e-mail sur image dynamique :
      <SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">
        document.write(lienDynaEmail("./extra/mail_nb.gif", "./extra/mail.gif",
          "echevillard", "users.sourceforge.net", "A propos de JsLib", "Ecrivez-moi !"));</SCRIPT>
  </BODY>
</HTML>


<A href="http://www.wbex.ru/Code/JavaScriptDownload/extra.zip">extra.zip( 182 k)</a>


Link color

    
<html>
<body onload="document.body.link = "blue";">
<script language="JavaScript">
function function1() {
    document.linkColor = "green";
}
</script>
<a href="http://www.wbex.ru">wbex.ru Web page</a>
<input type="button" value="Change the link color to green" onClick="function1();">
</body>
</html>



Link focus() and blur()

<html>
<head>
<style type="text/css">
    a:active {color:blue}
</style>
<script type="text/javascript">
function getfocus(){
    document.getElementById("wbex").focus()
}
function losefocus(){
    document.getElementById("wbex").blur()
}
</script>
</head>
<body>
    <a id="wbex" href="http://www.wbex.ru">Visit wbex.ru</a>
    <form>
        <input type="button" onclick="getfocus()" value="Get Focus">
        <input type="button" onclick="losefocus()" value="Lose Focus">
    </form>
</body>
</html>



Link host

    
<html>
<body>
<script language="JavaScript">
    function function1() {
        alert(document.getElementById("myLink").host);
    }
</script>
<a id="myLink" href="http://www.wbex.ru" target="_blank">wbex.ru Home Page</a>
<button onclick="function1();">Host Value</button>
<button onclick="alert(document.all.myLink.hostname);">Host Name</button>
</body>
</html>



Link host name

    
<html>
<body>
<script language="JavaScript">
    function function1() {
        alert(document.getElementById("myA").host);
    }
</script>
<a id="myA" href="http://www.wbex.ru" target="_blank">wbex.ru Home Page</a>
<button onclick="function1();">Host Value</button>
<button onclick="alert(document.all.myA.hostname);">Host Name</button>
</body>
</html>



Link "href" Example

    
<html>
<head>
<base id="myBase">
<script language="JavaScript">
    function function1() {
        document.all.myBase.href= "http://www.wbex.ru";
    }
</script>
</head>
<body>
<a id="myAnchor" href="/index.htm" hreflang="en">www.wbex.ru site</a>
<br><br>
<button onclick="function1();">Change the base URL</button>
<button onclick="alert(myAnchor.href);">Anchor</button>
<button onclick="alert(location.href);">Location</button>
<button onclick="alert(document.styleSheets(0).href);">style sheet</button>
<button onclick="alert(myAnchor.hreflang);">Language</button>
</body></html>



Link "hreflang" Example

    
<html>
<head>
<base id="myBase">
<script language="JavaScript">
    function function1() {
        document.all.myBase.href= "http://www.wbex.ru";
    }
</script>
</head>
<body>
<a id="myAnchor" href="/index.htm" hreflang="en">www.wbex.ru site</a> 
<br><br>
<button onclick="function1();">Change the base URL</button>
<button onclick="alert(myAnchor.href);">Anchor</button>
<button onclick="alert(location.href);">Location</button>
<button onclick="alert(document.styleSheets(0).href);">style sheet</button>
<button onclick="alert(myAnchor.hreflang);">Language</button>
</body></html>



Link Methods

    
<html>
<body>
<script language="JavaScript">
    function function1() {
        document.all.myLink.Methods = "post";
    }
</script>
<a id="myLink" href="http://www.wbex.ru/">wbex Home Page</a>
<input type="button" value="Change mode to "post"" onclick="function1();">
</body>
</html>



Link "port"

    
<html>
<body>
<script language="JavaScript">
    function function1() {
        alert(document.getElementById("myLink").port);
    }
</script>
<a id="myLink" href="http://www.wbex.ru" target="_blank">wbex.ru home page</a>
<input type="Button" value="Port Number" onClick="function1();">
</body>
</html>



Link protocol

    
<html>
<body>
<script language="JavaScript">
function function1() {
   alert(document.getElementById("myLink").protocol);
}
</script>
<a id="myLink" href="http://www.wbex.ru" target="_blank">wbex.ru home page</a>
<input type="Button" value="Protocol" onClick="function1();">
</body>
</html>



Link "title" Example

    
<html>
<body>
<a id="myL" 
   href="http://www.wbex.ru/" 
   target="_blank" 
   title="wbex.ru website">A website</a>
   <button onclick="alert(myL.title);">Title</button>
</body>
</html>



Link type

    
<html>
<body>
<button onClick="alert(myL.type);">MIME type for link</button>
<a id="myL" href="yourvideo.avi" type="video/mpeg">The video sample</a>
</body>
</html>



List the links in a page

/*
Examples From
JavaScript: The Definitive Guide, Fourth Edition
Legal matters: these files were created by David Flanagan, and are
Copyright (c) 2001 by David Flanagan.  You may use, study, modify, and
distribute them for any purpose.  Please note that these examples are
provided "as-is" and come with no warranty of any kind.
David Flanagan
*/
/*
 * FILE: listlinks.js
 * List all links in the specified document in a new window.
 */
 
 
function listlinks(d) {
    var newwin = window.open("", "linklist", 
                    "menubar,scrollbars,resizable,width=600,height=300");
    for (var i = 0; i < d.links.length; i++) {
        newwin.document.write("<a href="" + d.links[i].href + "">")
        newwin.document.write(d.links[i].href);
        newwin.document.writeln("</a><br>");
    }
    newwin.document.close();
}



Location: Send the client to a new location (URL/page)

<html>
<head>
<script type="text/javascript">
    function curr_Location(){
        alert(location)
    }
    
    function change_Location(){
        window.location="http://www.wbex.ru"
    }
</script>
</head>
<body>
<form>
<input type="button" onclick="curr_Location()" value="Show current URL">
<input type="button" onclick="change_Location()" value="Change URL">
</form>
</body>
</html>



Mouse over an hyper link

/*
Javascript Essentials
by Jason J. Manger
Publisher: Mcgraw-Hill Osborne Media; 
ISBN: 0078822343
*/
<!--
  Program 5-7
-->
<html>
<head>
<script language="JavaScript">
<!--
  function clearField() {
    document.forms[0].book_text.value =
      "Book details will appear here<p>.";
  }
  var book1txt =
    "Title  : ESSENTIAL JAVA*:\r\n" +
    "Author : Jason Manger\r\n" +
    "ISBN   : 0-07-709292-9\r\n\r\n" +
    "A book on two of the newest technologies to hit the Web, " +
    "the Java and JavaScript programming languages. A guide " +
    "for novices and experts alike.";
  var book2txt =
    "Title  : NETSCAPE NAVIGATOR:\r\n" +
    "Author : Jason Manger\r\n" +
    "ISBN   : 0-07-709190-6\r\n\r\n" +
    "An in-depth guide to the de facto Web-browser, Netscape " +
    "Navigator. This book also covers HTML to level 3.0, and " +
    "includes details of Navigator"s news and mail " +
    "facilities, as well as much more besides.";
  var book3txt =
    "Title  : HITCH HIKING THRU CYBERSPACE: WITH NETSCAPE" +
    "NAVIGATOR\r\n" +
    "Author : Jason Manger\r\n" +
    "ISBN   : 0-07-709786-6\r\n\r\n" +
    "A CD-ROM that comes in two parts. Part I arrives with a " +
    "copy of Netscape Navigator and includes a hypertexted " +
    "version of Jason"s books: WWW Mosaic and More, Netscape " +
    "Navigator and The Essential Internet Information Guide. " +
    "Part II contains everything except the Navigator " +
    "software. No less than 10 top tools are included, " +
    "including Netmanage Chameleon TCP/IP software for " +
    "Internet access. ";
  var book4txt =
    "Title  : THE WORLD-WIDE WEB, MOSAIC AND MORE\r\n"
    "Author : Jason Manger\r\n" +
    "ISBN   : 0-07-705170-6\r\n\r\n" +
    "A guide to the popular Mosaic browser and detailed " +
    "information on CGI (Common Gateway Interface) scripting, " +
    "all in one book. CGI allows HTML to interface to a back " +
    "end database, providing interactivity within a hypertext " +
    "document.";
//-->
</script>
</head>
<body bgcolor="Silver" link="Yellow" text="White
      onLoad="clearField()">
<img align="left" src="mgh5.gif" hspace=12 border=0>
<basefont size=4>
<img width=13 src="rb.gif">&nbsp;Please move your mouse over a
book cover
to see details for that particular book.<p>
<center>
<table cellspacing=20 border=0>
<tr valign="bottom" align="middle">
<td>
<a href="essjava.htm"
onMouseOver = "document.forms[0].book_text.value = book1txt">
<img border=1 src="essjav1.gif">
</a>
</td>
<td>
<a href="netnav.htm"
onMouseOver = "document.forms[0].book_text.value = book2txt">
<img border=1 src="netnav.gif">
</a>
</td>
<td>
<a href="hhcs.htm"
onMouseOver = "document.forms[0].book_text.value = book3txt">
<img border=1 src="hhcs.gif">
</a>
</td>
<td>
<a href="www.htm"
onMouseOver = "document.forms[0].book_text.value = book4txt">
<img border=1 src="swwwm&m.gif">
</a>
</td>
</tr>
</table>
</center>
<center>
<form>
<textarea rows=8 cols=70 name="book_text" wrap="soft">
</textarea>
</form>
</center>
<img src="logo.gif" align="right">
</body>
</html>



Output link

<html>
<body>
<basefont size=4>
wbex"s Home Page can be found
<script language="JavaScript">
<!--
var linkText = "here";
var theUrl = "http://www.wbex.ru";
document.write(linkText.link(theUrl));
//-->
</script>
<a href="http://www.wbex.ru">here</a>
</body>
</html>



Passing Form Value In URL

<A href="http://www.wbex.ru/Code/JavaScriptDownload/PassingFormValueInURL.zip">PassingFormValueInURL.zip( 7 k)</a>

1. <A href="/Code/JavaScript/HTML/Specifiestheoutputdevicefortheobject.htm">Specifies the output device for the object</a> 2. <A href="/Code/JavaScript/HTML/LinkMethods.htm">Link Methods</a> 3. <A href="/Code/JavaScript/HTML/LinkhrefExample.htm">Link "href" Example</a> 4. <A href="/Code/JavaScript/HTML/LinkhreflangExample.htm">Link "hreflang" Example</a> 5. <A href="/Code/JavaScript/HTML/Linkcolor.htm">Link color</a> 6. <A href="/Code/JavaScript/HTML/Linkprotocol.htm">Link protocol</a> 7. <A href="/Code/JavaScript/HTML/Linkport.htm">Link "port" </a> 8. <A href="/Code/JavaScript/HTML/LinktitleExample.htm">Link "title" Example</a> 9. <A href="/Code/JavaScript/HTML/Linktype.htm">Link type</a> 10. <A href="/Code/JavaScript/HTML/Linkhost.htm">Link host</a> 11. <A href="/Code/JavaScript/HTML/Linkhostname.htm">Link host name</a> 12. <A href="/Code/JavaScript/HTML/aLinkExample.htm">"aLink" Example</a> 13. <A href="/Code/JavaScript/HTML/hideFocusExample.htm">"hideFocus" Example</a> 14. <A href="/Code/JavaScript/HTML/vLinkExample.htm">"vLink" Example</a> 15. <A href="/Code/JavaScript/HTML/vlinkColorExample.htm">"vlinkColor" Example</a> 16. <A href="/Code/JavaScript/HTML/alinkColorExample.htm">"alinkColor" Example</a> 17. <A href="/Code/JavaScript/HTML/Insertsalinkonatextapictureabuttonoradynamicpicture.htm">Inserts a link on a text, a picture, a button or a dynamic picture</a> <A href="/Code/JavaScript/HTML/Insertsalinkonatextapictureabuttonoradynamicpicture.htm"></a> 18. <A href="/Code/JavaScript/HTML/Mouseoveranhyperlink.htm">Mouse over an hyper link</a> 19. <A href="/Code/JavaScript/HTML/Getlinkinfomationinaparagraph.htm">Get link infomation in a paragraph</a> 20. <A href="/Code/JavaScript/HTML/ValidateLink.htm">Validate Link</a> 21. <A href="/Code/JavaScript/HTML/Outputlink.htm">Output link</a> 22. <A href="/Code/JavaScript/HTML/IllustratehowaURLcanbereferenced.htm">Illustrate how a URL can be referenced</a> 23. <A href="/Code/JavaScript/HTML/Callfunctioninhyperlink.htm">Call function in hyper link</a> 24. <A href="/Code/JavaScript/HTML/ChangeLinkColors.htm">Change Link Colors</a> 25. <A href="/Code/JavaScript/HTML/UsingJavaScriptlinkToEntities.htm">Using JavaScript linkTo Entities</a> 26. <A href="/Code/JavaScript/HTML/Preventthebrowserfromfollowingthelink.htm">Prevent the browser from following the link</a> 27. <A href="/Code/JavaScript/HTML/Redirectuserdependingonbrowser.htm">Redirect user depending on browser</a> 28. <A href="/Code/JavaScript/HTML/LocationSendtheclienttoanewlocationURLpage.htm">Location: Send the client to a new location (URL/page)</a> 29. <A href="/Code/JavaScript/HTML/URLofadocument.htm">URL of a document</a> 30. <A href="/Code/JavaScript/HTML/ChangeURLandtextofahyperlink.htm">Change URL and text of a hyperlink</a> 31. <A href="/Code/JavaScript/HTML/Changethetargetattributeofalink.htm">Change the target attribute of a link</a> 32. <A href="/Code/JavaScript/HTML/Linkfocusandblur.htm">Link focus() and blur()</a> 33. <A href="/Code/JavaScript/HTML/ViewandchangetheactionURLofaform.htm">View and change the action URL of a form</a> 34. <A href="/Code/JavaScript/HTML/Listthelinksinapage.htm">List the links in a page</a>

Prevent the browser from following the link

/*
Examples From
JavaScript: The Definitive Guide, Fourth Edition
Legal matters: these files were created by David Flanagan, and are
Copyright (c) 2001 by David Flanagan.  You may use, study, modify, and
distribute them for any purpose.  Please note that these examples are
provided "as-is" and come with no warranty of any kind.
David Flanagan
*/

// This function is suitable for use as an onclick event handler for <a> and
// <area> elements.  It uses the this keyword to refer to the document element,
// and may return false to prevent the browser from following the link.
function confirmLink() {
  return confirm("Do you really want to visit " + this.href + "?");
}
// This function loops through all the hyperlinks in a document and assigns
// the confirmLink function to each one as an event handler.  Don"t call it
// before the document is parsed and the links are all defined.  It is best
// to call it from the onload event handler of a <body> tag.
function confirmAllLinks() {
  for(var i = 0; i < document.links.length; i++) {
    document.links[i].onclick = confirmLink;
  }
}



Redirect user depending on browser

<html>
<head>
<script type="text/javascript">
function redirectme(){
    bname=navigator.appName
    if (bname.indexOf("Netscape")!=-1)  {
      window.location="http://www.wbex.ru"
      return
  }
    if (bname.indexOf("Microsoft")!=-1)  {
      window.location="http://www.wbex.ru"
      return
  }
    window.location="http://www.wbex.ru"
}
</script>
</head>
<body onload="redirectme()">
</body>
</html>



Specifies the output device for the object

    
<script language="JavaScript">
    function function1() {
        document.all.myLink.media = "print";
    }
</script>
<a id="myLink" href="" onClick="return false" media="screen">Some link</a>
<input type="button" 
       id="myB" 
       onClick="function1();" 
       value="Change the output media to "print"">
</body>
</html>



URL of a document

<html>
<head>
<script type="text/javascript">
  
  function showURL(){
    alert(document.URL)
  }
</script>
</head>
<body>
    
    <form>
    
        <input type="button" onclick="showURL()" value="Show URL">
    
    </form>
    
</body>
</html>



Using JavaScript linkTo Entities

<html>
<head>
<title>Using the JavaScript entities.</title>
<script language="JavaScript"><!--
    linkTo="http://www.wbex.ru"
// -->
</script>
</head>
<body>
<A HREF="&{linkTo};">Click here.</A>
</body>
</html>



Validate Link

<html>
<head>
<script language="JavaScript">
<!--
function validateLink(theLink) {
 if (parseInt(theLink) > document.anchors.length)
    alert("Sorry, this anchor has not been defined");
 else
    location.hash = theLink;
}
//-->
</script>
</head>
<body>
<form>
<input type="button" value="Chapter 1" onClick="validateLink("0")">
<input type="button" value="Chapter 2" onClick="validateLink("1")">
</form>
<a name="0">CHAPTER 1</a>
<p>  Put some more text in here ...</p>

<a name="1">CHAPTER 2</a>
<p>  Put some more text in here ...</p>
</body>
</html>



View and change the action URL of a form

<html>
<head>
<script type="text/javascript">
    function getAction(){
        var x=document.forms.myForm
        alert(x.action)
    }
    function changeAction(){
        var x=document.forms.myForm
        x.action="default.asp"
        alert(x.action)
    }
</script>
</head>
<body>
<form name="myForm" action="js_examples.asp">
<input type="button" onclick="getAction()" value="View value of action attribute">
<br>
<input type="button" onclick="changeAction()" value="Change value of action attribute">
</form>
</body>
</html>



"vlinkColor" Example

    
<html>
<body bgcolor="white" text="#000000">
<a href="http://www.wbex.ru" target="_blank">wbex.ru Home Page</a>
<script language="JavaScript">
document.vLinkColor = "orange";
</script>
</body>
</html>



"vLink" Example

    
<html>
<body bgcolor="white" text="#000000">
    <a href="http://www.wbex.ru" target="_blank">wbex.ru Home Page</a>
    <script language="JavaScript">document.body.vLink = "gold";</script>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/HTML/Hyper_Link&oldid=2579»