http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_DHTML%2FHTML%2FAnchor
JavaScript DHTML/HTML/Anchor - История изменений
2026-04-05T04:38:25Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_DHTML/HTML/Anchor&diff=2628&oldid=prev
в 10:02, 26 мая 2010
2010-05-26T10:02:41Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 10:02, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=JavaScript_DHTML/HTML/Anchor&diff=2629&oldid=prev
Admin: 1 версия
2010-05-26T07:23:06Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>== A Document with Anchors==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<HTML><br />
<HEAD><br />
<TITLE>location.hash Property</TITLE><br />
<SCRIPT LANGUAGE="JavaScript"><br />
function goNextAnchor(where) {<br />
window.location.hash = where<br />
}<br />
</SCRIPT><br />
</HEAD><br />
<BODY><br />
<A NAME="start"><H1>Top</H1></A><br />
<FORM><br />
<INPUT TYPE="button" NAME="next" VALUE="NEXT" onClick="goNextAnchor("sec1")"><br />
</FORM><br />
<HR><br />
<A NAME="sec1"><H1>Section 1</H1></A><br />
<FORM><br />
<INPUT TYPE="button" NAME="next" VALUE="NEXT" onClick="goNextAnchor("sec2")"><br />
</FORM><br />
<HR><br />
<A NAME="sec2"><H1>Section 2</H1></A><br />
<FORM><br />
<INPUT TYPE="button" NAME="next" VALUE="NEXT" onClick="goNextAnchor("sec3")"><br />
</FORM><br />
<HR><br />
<A NAME="sec3"><H1>Section 3</H1></A><br />
<FORM><br />
<INPUT TYPE="button" NAME="next" VALUE="BACK TO TOP" onClick="goNextAnchor("start")"><br />
</FORM><br />
</BODY><br />
</HTML><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Anchor on click event==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>A Simple Page</title><br />
<script language="JavaScript"><br />
function yourMessage()<br />
{<br />
alert("You clicked on a link!");<br />
}<br />
</script><br />
</head><br />
<body><br />
<a href="http://www.wbex.ru" onClick="yourMessage()">My Website!</a><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Anchor on mouse over event==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<HTML><br />
<BODY><br />
<A HREF="http://www.wbex.ru" onMouseOver="window.alert("over!");">wbex!</A> <br />
<P><br />
<FORM><br />
Phone Number: <INPUT type="text" size="25" onFocus="window.alert("on focus");"> <br />
<BR><br />
Name: <INPUT type="text" size="25" onBlur="window.alert("focus lost");"><br />
<BR><br />
E-mail Address: <INPUT type="text" size="25"><br />
<P><br />
<INPUT type="button" value="Click Here." onClick="window.alert("on click")";><br />
</FORM><br />
</BODY><br />
</HTML><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Anchors array==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<body><br />
<script type="text/javascript"><br />
function linkToAnchor(num){<br />
var win2=open("http://www.wbex.ru","secondLinkWindow",<br />
"scrollbars=yes,width=250,height=200")<br />
win2.location.hash=num<br />
}<br />
</script><br />
<h3>Links and Anchors</h3><br />
<form><br />
<input type="button" value="0" onClick="linkToAnchor(this.value)"><br />
<input type="button" value="1" onClick="linkToAnchor(this.value)"><br />
<input type="button" value="2" onClick="linkToAnchor(this.value)"><br />
<input type="button" value="3" onClick="linkToAnchor(this.value)"><br />
</form><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Anchor "target" Example==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<script language="JavaScript"><br />
document.getElementById("yourAnchor").target = "_blank";<br />
</script><br />
</head><br />
<body><br />
<a id="yourAnchor" href="http://www.wbex.ru">wbex.ru website</a><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Create a hyper link element and set the id and href attributes==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<head><br />
<title></title><br />
</script><br />
</head><br />
<body><br />
<script type = "text/javascript" ><br />
var pTag = document.createElement("p");<br />
pTag.setAttribute("id","myP");<br />
document.body.appendChild(pTag);<br />
pTag.appendChild(document.createTextNode("This is a paragraph."));<br />
var hyperLinkTag = document.createElement("a");<br />
hyperLinkTag.setAttribute("id","myA");<br />
hyperLinkTag.setAttribute("href","http://www.google.org/");<br />
document.body.appendChild(hyperLinkTag);<br />
hyperLinkTag.appendChild(document.createTextNode("Web Site."));<br />
</script><br />
</body><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Create anchor tag and output==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
</head><br />
<body><br />
<script type="text/javascript"><br />
var dt = Date();<br />
var msg ="<a href="#">First Example</a>";<br />
document.writeln(msg);<br />
</script><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Links with Custom Status-Bar Messages==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html> <br />
<head> <br />
<title>window.status Property</title> <br />
</head> <br />
<body> <br />
<br />
<a href="http://www.wbex.ru" onmouseover="window.status = "Go to www.wbex.ru"; <br />
return true;">Home</a> <br />
<p><a href="http://mozilla.org" onmouseover="window.status = "Visit Mozilla Home page. (mozilla.org)"; return true;">Mozilla</a></p> <br />
</body> <br />
</html> <br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==List anchor in a document==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
/*<br />
Examples From<br />
JavaScript: The Definitive Guide, Fourth Edition<br />
Legal matters: these files were created by David Flanagan, and are<br />
Copyright (c) 2001 by David Flanagan. You may use, study, modify, and<br />
distribute them for any purpose. Please note that these examples are<br />
provided "as-is" and come with no warranty of any kind.<br />
David Flanagan<br />
*/<br />
/*<br />
* FILE: listanchors.js<br />
* The function listanchors() is passed a document as its argument and<br />
* opens a new window to serve as a "navigation window" for that<br />
* document. The new window displays a list of all anchors in the document.<br />
* Clicking on any anchor in the list causes the document to scroll to <br />
* the position of that anchor. A document should not call this<br />
* function on itself until it is fully parsed, or at least until all<br />
* the anchors in it are parsed.<br />
*/<br />
function listanchors(d) {<br />
// Open the new window.<br />
var newwin = window.open("", "navwin", <br />
"menubar=yes,scrollbars=yes,resizable=yes," +<br />
"width=600,height=300");<br />
// Give it a title.<br />
newwin.document.writeln("<h1>Navigation Window:<br>" +<br />
document.title + "</h1>");<br />
// List all anchors.<br />
for(var i = 0; i < d.anchors.length; i++) {<br />
// For each anchor object, determine the text to display. <br />
// First, try to get the text between <A> and </A> using a <br />
// browser-dependent property. If none, use the name instead.<br />
var a = d.anchors[i];<br />
var text = null;<br />
if (a.text) text = a.text; // Netscape 4<br />
else if (a.innerText) text = a.innerText; // IE 4+<br />
if ((text == null) || (text == "")) text = a.name; // Default<br />
// Now output that text as a link. Note the use of the location<br />
// property of the original window.<br />
newwin.document.write("<a href="#" + a.name + """ +<br />
" onclick="opener.location.hash=\"" + a.name + <br />
"\"; return false;">"); <br />
newwin.document.write(text);<br />
newwin.document.writeln("</a><br>");<br />
}<br />
newwin.document.close(); // Never forget to close the document!<br />
}<br />
<br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==on mouse over action for anchor link==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>A Simple Page</title><br />
<script language="JavaScript"><br />
function overMessage()<br />
{<br />
alert("click on it!");<br />
}<br />
</script><br />
</head><br />
<body><br />
<a href="http://www.wbex.ru" onMouseover="overMessage()">wbex.ru</a><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Presenting Different Content for Scriptable and Nonscriptable Browsers==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html> <br />
<head> <br />
<title></title> <br />
<script type="text/javascript" language="JavaScript"> <br />
function updatePage() { <br />
if (document.getElementById) { <br />
document.getElementById("mainLink").href = "http://www.wbex.ru"; <br />
document.getElementById("welcome").innerHTML = "value for inner html"; <br />
<br />
} <br />
} <br />
window.onload = updatePage; <br />
</script> <br />
</head> <br />
<body> <br />
<a id="mainLink" href="http://www.wbex.ru">Where?</a> <br />
</body> <br />
</html> <br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Properties of the Anchor Object==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
Property Description<br />
name A name that provides access to the anchor from a link.<br />
text The text that appears between the <a> and </a> tags.<br />
x The x-coordinate of the anchor.<br />
y The y-coordinate of the anchor.<br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Reading the Number of Anchors==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<HTML><br />
<HEAD><br />
<TITLE>document.anchors Property</TITLE><br />
<SCRIPT LANGUAGE="JavaScript"><br />
function goNextAnchor(where) {<br />
window.location.hash = where<br />
}<br />
</SCRIPT><br />
</HEAD><br />
<BODY><br />
<A NAME="start"><H1>Top</H1></A><br />
<FORM><br />
<INPUT TYPE="button" NAME="next" VALUE="NEXT" onClick="goNextAnchor("sec1")"><br />
</FORM><br />
<HR><br />
<A NAME="sec1"><H1>Section 1</H1></A><br />
<FORM><br />
<INPUT TYPE="button" NAME="next" VALUE="NEXT" onClick="goNextAnchor("sec2")"><br />
</FORM><br />
<HR><br />
<A NAME="sec2"><H1>Section 2</H1></A><br />
<FORM><br />
<INPUT TYPE="button" NAME="next" VALUE="NEXT" onClick="goNextAnchor("sec3")"><br />
</FORM><br />
<HR><br />
<A NAME="sec3"><H1>Section 3</H1></A><br />
<FORM><br />
<INPUT TYPE="button" NAME="next" VALUE="BACK TO TOP" onClick="goNextAnchor("start")"><br />
</FORM><br />
<HR><P><br />
<SCRIPT LANGUAGE="JavaScript"><br />
document.write("<I>There are " + document.anchors.length + <br />
" anchors defined for this document</I>")<br />
</SCRIPT><br />
</BODY><br />
</HTML><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Return the number of anchors in a document==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<body><br />
<a name="A">First anchor</a><br><br />
<a name="B">Second anchor</a><br><br />
<a name="C">Third anchor</a><br><br />
<br><br />
Number of anchors in this document:<br />
<script type="text/javascript"><br />
document.write(document.anchors.length)<br />
</script><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==String.link()==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<HTML><br />
<BODY><br />
<H1><br />
<SCRIPT><br />
linkText = "wbex";<br />
document.write(linkText.link("http://www.wbex.ru"));<br />
</SCRIPT><br />
</H1><br />
</BODY><br />
</HTML><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Using Anchors to Navigate Through a Page==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html> <br />
<head> <br />
<title>document.anchors Property</title> <br />
<script type="text/javascript"> <br />
function goNextAnchor(where) { <br />
window.location.hash = where; <br />
} <br />
function addEvent(elem, evtType, func) { <br />
if (elem.addEventListener) { <br />
elem.addEventListener(evtType, func, false); <br />
} else if (elem.attachEvent) { <br />
elem.attachEvent("on" + evtType, func); <br />
} else { <br />
elem["on" + evtType] = func; <br />
} <br />
} <br />
addEvent(window, "load", function() { <br />
addEvent(document.getElementById("next1"), "click", function(evt) {goNextAnchor("sec1")}); <br />
addEvent(document.getElementById("next4"), "click", function(evt) {goNextAnchor("start")}); <br />
}); <br />
</script> <br />
</head> <br />
<body> <br />
<a id="start" name="start">Top</a><br />
<form> <br />
<input type="button" id="next1" name="next" value="NEXT" /> <br />
</form> <br />
<a id="sec1" name="sec1">Section 1</a><br />
<form> <br />
<input type="button" id="next4" name="next" value="BACK TO TOP" /> <br />
</form> <br />
</body> <br />
</html> <br />
<br />
<br />
<br />
</source></div>
Admin