JavaScript DHTML/HTML/Anchor

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

A Document with Anchors

   
<HTML>
<HEAD>
<TITLE>location.hash Property</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function goNextAnchor(where) {
    window.location.hash = where
}
</SCRIPT>
</HEAD>
<BODY>
<A NAME="start"><H1>Top</H1></A>
<FORM>
<INPUT TYPE="button" NAME="next" VALUE="NEXT" onClick="goNextAnchor("sec1")">
</FORM>
<HR>
<A NAME="sec1"><H1>Section 1</H1></A>
<FORM>
<INPUT TYPE="button" NAME="next" VALUE="NEXT" onClick="goNextAnchor("sec2")">
</FORM>
<HR>
<A NAME="sec2"><H1>Section 2</H1></A>
<FORM>
<INPUT TYPE="button" NAME="next" VALUE="NEXT" onClick="goNextAnchor("sec3")">
</FORM>
<HR>
<A NAME="sec3"><H1>Section 3</H1></A>
<FORM>
<INPUT TYPE="button" NAME="next" VALUE="BACK TO TOP" onClick="goNextAnchor("start")">
</FORM>
</BODY>
</HTML>



Anchor on click event

   
<html>
<head>
<title>A Simple Page</title>
<script language="JavaScript">
function yourMessage()
{
    alert("You clicked on a link!");
}
</script>
</head>
<body>
<a href="http://www.wbex.ru" onClick="yourMessage()">My Website!</a>
</body>
</html>



Anchor on mouse over event

   
<HTML>
<BODY>
<A HREF="http://www.wbex.ru" onMouseOver="window.alert("over!");">wbex!</A> 
<P>
<FORM>
Phone Number: <INPUT type="text" size="25" onFocus="window.alert("on focus");">  
<BR>
Name: <INPUT type="text" size="25" onBlur="window.alert("focus lost");">
<BR>
E-mail Address: <INPUT type="text" size="25">
<P>
<INPUT type="button" value="Click Here." onClick="window.alert("on click")";>
</FORM>
</BODY>
</HTML>



Anchors array

   
<html>
<body>
<script type="text/javascript">
function linkToAnchor(num){
    var win2=open("http://www.wbex.ru","secondLinkWindow",
                    "scrollbars=yes,width=250,height=200")
    win2.location.hash=num
}
</script>
<h3>Links and Anchors</h3>
<form>
<input type="button" value="0" onClick="linkToAnchor(this.value)">
<input type="button" value="1" onClick="linkToAnchor(this.value)">
<input type="button" value="2" onClick="linkToAnchor(this.value)">
<input type="button" value="3" onClick="linkToAnchor(this.value)">
</form>
</body>
</html>



Anchor "target" Example

   
    
<html>
<head>
<script language="JavaScript">
    document.getElementById("yourAnchor").target = "_blank";
</script>
</head>
<body>
<a id="yourAnchor" href="http://www.wbex.ru">wbex.ru website</a>
</body>
</html>



Create a hyper link element and set the id and href attributes

  
<head>
<title></title>
</script>
</head>
<body>
<script type = "text/javascript" >
var pTag = document.createElement("p");
pTag.setAttribute("id","myP");
document.body.appendChild(pTag);
pTag.appendChild(document.createTextNode("This is a paragraph."));
var hyperLinkTag = document.createElement("a");
hyperLinkTag.setAttribute("id","myA");
hyperLinkTag.setAttribute("href","http://www.google.org/");
document.body.appendChild(hyperLinkTag);
hyperLinkTag.appendChild(document.createTextNode("Web Site."));
</script>
</body>



Create anchor tag and output

   
<html>
<head>
</head>
<body>
<script type="text/javascript">
var dt = Date();
var msg ="<a href="#">First Example</a>";
document.writeln(msg);
</script>
</body>
</html>



Links with Custom Status-Bar Messages

   
<html> 
<head> 
<title>window.status Property</title> 
</head> 
<body> 

<a href="http://www.wbex.ru" onmouseover="window.status = "Go to www.wbex.ru"; 
return true;">Home</a> 
<p><a href="http://mozilla.org" onmouseover="window.status = "Visit Mozilla Home page. (mozilla.org)"; return true;">Mozilla</a></p> 
</body> 
</html>



List anchor in a document

   
/*
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: listanchors.js
 * The function listanchors() is passed a document as its argument and
 * opens a new window to serve as a "navigation window" for that
 * document. The new window displays a list of all anchors in the document.
 * Clicking on any anchor in the list causes the document to scroll to 
 * the position of that anchor.  A document should not call this
 * function on itself until it is fully parsed, or at least until all
 * the anchors in it are parsed.
 */
function listanchors(d) {
    // Open the new window.
    var newwin = window.open("", "navwin", 
                             "menubar=yes,scrollbars=yes,resizable=yes," +
                             "width=600,height=300");
    // Give it a title.
    newwin.document.writeln("<h1>Navigation Window:<br>" +
                            document.title + "</h1>");
    // List all anchors.
    for(var i = 0; i < d.anchors.length; i++) {
        // For each anchor object, determine the text to display. 
        // First, try to get the text between <A> and </A> using a 
        // browser-dependent property. If none, use the name instead.
        var a = d.anchors[i];
        var text = null;
        if (a.text) text = a.text;                          // Netscape 4
        else if (a.innerText) text = a.innerText;           // IE 4+
        if ((text == null) || (text == "")) text = a.name;  // Default
        // Now output that text as a link. Note the use of the location
        // property of the original window.
        newwin.document.write("<a href="#" + a.name + """ +
                              " onclick="opener.location.hash=\"" + a.name + 
                              "\"; return false;">"); 
        newwin.document.write(text);
        newwin.document.writeln("</a><br>");
    }
    newwin.document.close();   // Never forget to close the document!
}



on mouse over action for anchor link

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



Presenting Different Content for Scriptable and Nonscriptable Browsers

   
<html> 
<head> 
<title></title> 
<script type="text/javascript" language="JavaScript"> 
function updatePage() { 
    if (document.getElementById) { 
        document.getElementById("mainLink").href = "http://www.wbex.ru"; 
        document.getElementById("welcome").innerHTML = "value for inner html"; 
    
    } 
} 
window.onload = updatePage; 
</script> 
</head> 
<body> 
<a id="mainLink" href="http://www.wbex.ru">Where?</a> 
</body> 
</html>



Properties of the Anchor Object

   
  Property         Description
  name             A name that provides access to the anchor from a link.
  text             The text that appears between the <a> and </a> tags.
  x                The x-coordinate of the anchor.
  y                The y-coordinate of the anchor.



Reading the Number of Anchors

   
<HTML>
<HEAD>
<TITLE>document.anchors Property</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function goNextAnchor(where) {
    window.location.hash = where
}
</SCRIPT>
</HEAD>
<BODY>
<A NAME="start"><H1>Top</H1></A>
<FORM>
<INPUT TYPE="button" NAME="next" VALUE="NEXT" onClick="goNextAnchor("sec1")">
</FORM>
<HR>
<A NAME="sec1"><H1>Section 1</H1></A>
<FORM>
<INPUT TYPE="button" NAME="next" VALUE="NEXT" onClick="goNextAnchor("sec2")">
</FORM>
<HR>
<A NAME="sec2"><H1>Section 2</H1></A>
<FORM>
<INPUT TYPE="button" NAME="next" VALUE="NEXT" onClick="goNextAnchor("sec3")">
</FORM>
<HR>
<A NAME="sec3"><H1>Section 3</H1></A>
<FORM>
<INPUT TYPE="button" NAME="next" VALUE="BACK TO TOP" onClick="goNextAnchor("start")">
</FORM>
<HR><P>
<SCRIPT LANGUAGE="JavaScript">
document.write("<I>There are " + document.anchors.length + 
" anchors defined for this document</I>")
</SCRIPT>
</BODY>
</HTML>



Return the number of anchors in a document

   
<html>
<body>
    <a name="A">First anchor</a><br>
    <a name="B">Second anchor</a><br>
    <a name="C">Third anchor</a><br>
    <br>
    Number of anchors in this document:
    <script type="text/javascript">
        document.write(document.anchors.length)
    </script>
</body>
</html>



String.link()

   
<HTML>
<BODY>
<H1>
<SCRIPT>
   linkText = "wbex";
   document.write(linkText.link("http://www.wbex.ru"));
</SCRIPT>
</H1>
</BODY>
</HTML>



Using Anchors to Navigate Through a Page

   
<html> 
<head> 
<title>document.anchors Property</title> 
<script type="text/javascript"> 
function goNextAnchor(where) { 
    window.location.hash = where; 
} 
function addEvent(elem, evtType, func) { 
    if (elem.addEventListener) { 
        elem.addEventListener(evtType, func, false); 
    } else if (elem.attachEvent) { 
        elem.attachEvent("on" + evtType, func); 
    } else { 
        elem["on" + evtType] = func; 
    } 
} 
addEvent(window, "load", function() { 
    addEvent(document.getElementById("next1"), "click", function(evt) {goNextAnchor("sec1")}); 
    addEvent(document.getElementById("next4"), "click", function(evt) {goNextAnchor("start")}); 
}); 
</script> 
</head> 
<body> 
<a id="start" name="start">Top</a>
<form> 
    <input type="button" id="next1" name="next" value="NEXT" /> 
</form> 
<a id="sec1" name="sec1">Section 1</a>
<form> 
    <input type="button" id="next4" name="next" value="BACK TO TOP" /> 
</form> 
</body> 
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/HTML/Anchor&oldid=2629»