JavaScript DHTML/HTML/Hyper Link
Содержание
- 1 "alinkColor" Example
- 2 "aLink" Example
- 3 Call function in hyper link
- 4 Change Link Colors
- 5 Change the target attribute of a link
- 6 Change URL and text of a hyperlink
- 7 Get link infomation in a paragraph
- 8 "hideFocus" Example
- 9 Illustrate how a URL can be referenced
- 10 Inserts a link on a text, a picture, a button or a dynamic picture
- 11 JsLib 1.3
- 11.1 Exemple - liens.js
- 11.2 Link color
- 11.3 Link focus() and blur()
- 11.4 Link host
- 11.5 Link host name
- 11.6 Link "href" Example
- 11.7 Link "hreflang" Example
- 11.8 Link Methods
- 11.9 Link "port"
- 11.10 Link protocol
- 11.11 Link "title" Example
- 11.12 Link type
- 11.13 List the links in a page
- 11.14 Location: Send the client to a new location (URL/page)
- 11.15 Mouse over an hyper link
- 11.16 Output link
- 11.17 Passing Form Value In URL
- 11.18 Prevent the browser from following the link
- 11.19 Redirect user depending on browser
- 11.20 Specifies the output device for the object
- 11.21 URL of a document
- 11.22 Using JavaScript linkTo Entities
- 11.23 Validate Link
- 11.24 View and change the action URL of a form
- 11.25 "vlinkColor" Example
- 11.26 "vLink" Example
"alinkColor" Example
<source lang="html4strict">
<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>
</source>
"aLink" Example
<source lang="html4strict">
<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>
</source>
Call function in hyper link
<source lang="html4strict">
<html> <head> <script language="JavaScript">
</script> </head> <body> <a href="javascript:myFunction()">Click me</a> </body> </html>
</source>
Change Link Colors
<source lang="html4strict">
<html> <head> <script language="JavaScript">
</script> </head> <body> <basefont size=4> If it is a Sunday, <a href="http://www.wbex.ru">this</a> link will be colored Yellow. </body> </html>
</source>
Change the target attribute of a link
<source lang="html4strict">
<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>
Try the link before and after you have pressed the button!
</body> </html>
</source>
Change URL and text of a hyperlink
<source lang="html4strict">
<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>
</source>
Get link infomation in a paragraph
<source lang="html4strict">
<html> <head> <script language="JavaScript">
</script> <title>An introduction to the Web</title> </head> <body><basefont size=4> AN INTRODUCTION TO THE
WEB<a href="http://www.wbex.ru">www.wbex.ru</a>
<a href="http://www.wbex.ru">hyperlinks</a><form><input type="button" value="Quick Link Index" onClick="showLinks()"></form> </body> </html> </source>
"hideFocus" Example
<source lang="html4strict">
<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>
</source>
Illustrate how a URL can be referenced
<source lang="html4strict">
<html> <body> <basefont size=4> <img src="internal-gopher-menu"> Click <script language="JavaScript">
</script> for today"s news.<p> </body> </html>
</source>
Inserts a link on a text, a picture, a button or a dynamic picture
<source lang="html4strict">
<!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"> <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>
JsLib 1.3
Exemple - liens.js
<NOSCRIPT>
<P>Erreur : votre navigateur ne reconnait pas le Javascript ou est configuré pour ne
pas prendre en compte le code Javascript. Dans ce dernier cas, vous pouvez modifier la
configuration dans les préférences/options de votre navigateur.
</NOSCRIPT>
<P>Lien vers page Web sur texte (même cadre) :
<SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">
document.write(lienTexteWeb("Site Web JsLib", "http://www.wbex.ru/",
"_self", "Site Web de la bibliothè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è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être) :
<SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">
document.write(lienBoutonWeb("Site Web JsLib", "http://www.wbex.ru/",
"_blank", "Site Web de la bibliothè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ê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è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>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/extra.zip">extra.zip( 182 k)</a>
Link color
<source lang="html4strict">
<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>
</source>
Link focus() and blur()
<source lang="html4strict">
<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>
</source>
Link host
<source lang="html4strict">
<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>
</source>
Link host name
<source lang="html4strict">
<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>
</source>
Link "href" Example
<source lang="html4strict">
<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>
<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>
</source>
Link "hreflang" Example
<source lang="html4strict">
<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>
<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>
</source>
Link Methods
<source lang="html4strict">
<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>
</source>
Link "port"
<source lang="html4strict">
<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>
</source>
Link protocol
<source lang="html4strict">
<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>
</source>
Link "title" Example
<source lang="html4strict">
<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>
</source>
Link type
<source lang="html4strict">
<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>
</source>
List the links in a page
<source lang="html4strict">
/* 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>
");
}
newwin.document.close();
}
</source>
Location: Send the client to a new location (URL/page)
<source lang="html4strict">
<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>
</source>
Mouse over an hyper link
<source lang="html4strict">
/* Javascript Essentials by Jason J. Manger Publisher: Mcgraw-Hill Osborne Media; ISBN: 0078822343
- /
<html> <head> <script language="JavaScript">
</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"> Please move your mouse over a book cover to see details for that particular book.<p>
|
<a href="essjava.htm" onMouseOver = "document.forms[0].book_text.value = book1txt"> <img border=1 src="essjav1.gif"> </a> |
<a href="netnav.htm" onMouseOver = "document.forms[0].book_text.value = book2txt"> <img border=1 src="netnav.gif"> </a> |
<a href="hhcs.htm" onMouseOver = "document.forms[0].book_text.value = book3txt"> <img border=1 src="hhcs.gif"> </a> |
<a href="www.htm" onMouseOver = "document.forms[0].book_text.value = book4txt"> <img border=1 src="swwwm&m.gif"> </a> |
<form> <textarea rows=8 cols=70 name="book_text" wrap="soft"> </textarea> </form>
<img src="logo.gif" align="right"> </body> </html>
</source>
Output link
<source lang="html4strict">
<html> <body> <basefont size=4> wbex"s Home Page can be found <script language="JavaScript">
</script> <a href="http://www.wbex.ru">here</a> </body> </html>
</source>
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
<source lang="html4strict">
/* 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;
}
}
</source>
Redirect user depending on browser
<source lang="html4strict">
<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>
</source>
Specifies the output device for the object
<source lang="html4strict">
<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>
</source>
URL of a document
<source lang="html4strict">
<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>
</source>
Using JavaScript linkTo Entities
<source lang="html4strict">
<html> <head> <title>Using the JavaScript entities.</title> <script language="JavaScript"> </script> </head> <body> <A HREF="&{linkTo};">Click here.</A> </body> </html>
</source>
Validate Link
<source lang="html4strict">
<html> <head> <script language="JavaScript">
</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 ...<a name="1">CHAPTER 2</a>
Put some more text in here ...
</body> </html>
</source>
View and change the action URL of a form
<source lang="html4strict">
<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">
<input type="button" onclick="changeAction()" value="Change value of action attribute">
</form>
</body>
</html>
</source>
"vlinkColor" Example
<source lang="html4strict">
<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>
</source>
"vLink" Example
<source lang="html4strict">
<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>
</source>
