Answer
| Jean LeLoup & Bob Ponterio
SUNY Cortland © 2008 |
Annotating text in a web page with anchors
|
In this example each of the glossed words links to a target (anchor)
in the annotation page corresponding to the text for that particular
word. The anchors each have a name, and it is this name that
allows the web browser to identify the location within the page
referenced by the link.
To create the anchors in Dreamweaver or Nvu, use Insert / Named Anchor. Don't forget to give each anchor a unique name (no spaces or punctuation please). If two anchors have the same name, your computer will be very confused, like two houses having the same address.
When creating a link to a target in your web page editing program, use the target web page name just as you usually do, but add a pound sign "#" followed by the anchor name (no spaces). gloss-annotation.html#annotation or for an absolute link: http://www.cortland.edu/flteach/mm-course/gloss-annotation.html#annotation
|
When the user clicks on a hyperlink to one of these targets in an annotation page of this sort, the browser will bring the line containing the targeted text to the top of the new page. This will work better if enough blank lines are added to the bottom of the annotation page to allow space for the targets at the bottom of the listing to rise to the top of the browser window.
Creating links to targeted cues in an annotation page of this sort is fairly simple and can provide a quick and dirty text annotation method. The disadvantage of using this system is that the original text disappears from view when the annotation appears. This can be distracting to the reader, and in some cases might lose the reader's place in the original document.
One solution to this problem is to force the annotation or glossary page to open in a new window, leaving the text in place in its original window. To do this, edit the HTML code of the link properties to add a new target window specification. For example, for the link:
<a href="gloss-annotation.html#annotation">annotate</a>
You could add in the code:
<a href="gloss-annotation.html#annotation" target="_blank">annotate</a>
|
In Dreamweaver, you could simply place the cursor on the link and then select "_blank" from the Target property for the link.
In Nvu, the target "in a new window" is set in the link properties under More Properties.
|
Now you can annotate a word without losing you place in the original document.
A different solution to text glossing involves opening a new pop-up browser window displaying each annotation rather than replacing the document by the annotation in the original browser window. Although this function is not a normal part of HTML, a JavaScript utility can provide this function. We will look at three different ways to add such a JavaScript function to a web page. The first places the SCRIPT in a separate file so that it is easy for any of your pages to use this same function; the second places the SCRIPT in the header section of the individual page, making it easier to alter the script if needed for that particular page; the third uses a built-in Alert function to create a popup window without a SCRIPT. We generally prefer the first method.
The first technique involves two steps. First access a JavaScript function from a separate file (We saw this before when using the modo.js utility). Next set up a special link for each gloss using this new function.
To incorporate a JavaScript function into a web page, first place the script in a separate file. This is a JS file whose name will be something like feedback.js. The JS file is a text file that can be edited with Windows' Notepad program or any text editor, but it must be saved as a simple text file with the required extension .JS. The JS file should NOT include the <script> and </script> tags. To be able to use the JavaScript function in your web page, you must use the <script> tag to tell your page where to find the script.
<script src="feedback.js">
</script>
The src="feedback.js" part of the tag tells the page where to find the sources of the JavaScript function. Don't forget the quotation marks. This technique allows you to use a single copy of the script from the same file in a number of different web pages. If you need to make a change, it can then be made in only a single place instead of changing all of your pages. This is the technique used in this web page. Here is the text in the feedback.js file.
| function feedback(message) {
var browser = navigator.appName; if ((browser.indexOf ("Netscape") >= 0) || (browser.indexOf ("Explorer") >= 0)) { msgWindow.document.write("</BODY>"); } // end of JavaScript Function feedback |
And here is a link to the feedback.js file for downloading. You can just right click and save the file where you want it, probably in the same folder with the web site where it will be used.
Next set up your individual glosses using the feedback() function.
Activating the popup window in your text
Once your web page has the JavaScript function, your next step is to activate it by clicking on something.
Select a word or expression or image to gloss. Create a Link using the selected text or image.
javascript: feedback('gloss = annotate')
Make sure that it looks EXACTLY like this. Everything between the two single quotes will appear in the popup window. Naturally, you will change the text between the quotation marks to suit each individual annotation. If you need to use a single quote (i.e. an apostrophe) in your popup window, it must be immediately preceded by an "escape" character " \" .
javascript: feedback('All the president\'s men')
JavaScript link for Dreamweaver
JavaScript link for Nvu
Once the gloss is in place, test it to be sure it is working. There is also more than one way to encode the gloss in HTML. For example:<a href="javascript:void(null)" onclick="feedback('test = test');">gloss</a>
You can also use links from images or buttons, mouseover, any event that can be used as a trigger.
The second technique also requires two separate steps. The first step is to put the JavaScript utility in place in your web page header. The second step is to create a link that does not go to another web page, but rather sends the annotation information to the JavaScript utility, just as we did in the example above.
To insert a JavaScript utility in a web page, we will need to edit the page's HTML Source. In Dreamweaver and Nvu, this is done by pasting the JavaScript code into the Code window, as we will see below.
- First, copy the JavaScript code for the "feedback" utility from this page. Be sure that you have copied everything in the file. JavaScript is a computer programming language, and any error will surely result in complete failure to function. The JavaScript utility in a web page must include a <script> tag, a </script> tag, and everything in between.
- Next, edit the web page in which you wish to use the utility. The JavaScript utility should be inserted in the HTML header of the page. To do this, you will have to edit the HTML Source Code of the page. In Dreamweaver, use the Code tab at the top of your web page window.
Near the top of your page, you will see some code that will look something like the following:
| <!doctype html public "-//w3c//dtd html 4.0
transitional//en"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="GENERATOR" content="Mozilla/4.6 [en] (Win98; I) [Netscape]"> <title>page title</title> </head> |
You should insert the JavaScript utility somewhere between the <head> tag and the </head> tag. I like to put them right before the</head> tag. Make sure that you do not put it inside another tag. The result should look something like:
| <!doctype html public "-//w3c//dtd html 4.0
transitional//en"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="GENERATOR" content="Mozilla/4.6 [en] (Win98; I) [Netscape]"> <title>page title</title> <script> </head> |
Save the web page and continue working. Remember that some older web page editors do not handle this well, so you may need to use the separate text file technique if that is the case for you.
Finally use the techniques given above for activating the popup window in your text.
The third technique for popup windows uses the built-in alert('message') function. This technique is much simpler because we do not need to bother with making a separate JavaScript program or function available in our web page, but it is also more limited and not as esthetically pleasing. What we are doing is using the built-in JavaScript alert function instead of the feedback function that we used in our first two examples:
<a href="javascript: alert('gloss = annotate')">gloss</a>
Now we can gloss a word without bothering with the SCRIPT tags.
A fourth technique for glossing a text does not employ pop-up windows but makes use of the tooltip. When you place your mouse over the link below, a tooltip will open and display the gloss. The tooltp text is stored in the title property of an html tag.
<a href="javascript:void(null)" title="information about an expression">gloss</a>
Tooltips are not limited to links like some of the other techniques we have seen. A title property can be added to any number of html tags such as format markup that span text or images. In the example below, we have a tooltip created by addint a title property to the image, to the bold <strong></strong> and green <font color='green'></font> markup, and by using a <span></span> tag.
In the following line, the words "kora", "n'goni" and "rendez-vous" are glossed.
La kora et le n’goni sont aussi au rendez-vous.
La <strong title='12 string instrument (cora)'>kora</strong> et le <font color="green" title='3-4 string instrument'>n’goni</font> sont aussi au <span title='They are at the get-together.'>rendez-vous</span>.
In Nvu, you can edit title properties in the HTML Tags view.
Double-clicking on the SPAN tag brings up the Advanced Properties Editor.
Here we can add the title attribute by editing its value. The value is the text that will appear ("sample").
This is a test of glossing.
Caveat! Using format tags to gloss text presents an inherent danger. If at some point you change the format, you might accidentally delete all of your glosses!
Don't forget that the link that opens your popup window can be the word that you are glossing, but it could also be any image.
<a href="javascript: alert('gloss = annotate')"><img src="gloss-5.jpg" width="310" height="57" border="0"></a>
A mouseover event or indeed practically any event could be used.
Fancier tricks for those who want to take it up a notch
There are also many free or inexpensive programs for making more sophisticated popup windows popup windows using Dynamic HTML (DHTML). These can create Layers that look like windows which remain inside of your main browser window. These can be hidden, moved, displayed, resized. Their contents can be altered using JavaScript. The popup on this page could be moved using your cursor, except that I made it disappear when the cursor touches it.
The first US president was:
Washington. Jefferson. Lincoln. Roosevelt. Reagan DHTML is beyond the scope of this course, so this little taste is purely optional. If you wish to explore these kinds of popup windows, search for "dhtml popup".
Note that the contents of some of the table cells above change when certain events (onmouseover, onmouseout) occur. Just to whet your appetite, we can change the contents of many objects (e.g. <Div></Div> demarked areas of a page, or a paragraph <p></p> or Table Cells) in a way that is similar to the little JavaScript commands that we have used previously to copy text into a Text Box. To do this, we need to give the DIV or table cell or paragraph a unique ID. For instance, the code used in the example above simply inserts the name "ansE" as the ID of the lower right table cell.
<td id="ansE">Reagan</td>
We could do the same thing with any area of the screen located between DIV tags and use any object to trigger the change. The code to set this up might look something like this:
<Div id="answerE">
This text will change if I modify the properties of "answerE".
</Div>Actually making the change involves some Javascript that looks just a bit more complex than what we did when changing the Text Box contents:
onmouseover="document.getElementById('answerE').innerHTML='Don\'t you dare!'"
Adding in red and green color:
onmouseover="document.getElementById('answerE').innerHTML='<font color=\'#FF0000\'>This is Bob !</font>'" onmouseout="document.getElementById('answerE').innerHTML='<font color=\'#00FF00\'>Did that work?</font>'"
Let's put that in an image tag (We could put these in many other objects as well):
<img src="bob1.jpg" onmouseover="document.getElementById('answerE').innerHTML='<font color=\'#FF0000\'>This is Bob !</font>'" onmouseout="document.getElementById('answerE').innerHTML='<font color=\'#00FF00\'>Did that work?</font>'" width="200" height="290" />
Note that the use of single and double quotation marks needs to be precise and that any single quote or apostrophe used in the text itself must be preceded by an escape character (\).
This text will change if I modify the properties of "answerE".The preceding sentence will change when you mouseover the photo.And we could also put the Javascript code into a function in our page head (changeContent) to simplify our web page if we are planning to change the contents of many named objects on the page.
<Script>
function changeContent(id,shtml) {
if (document.getElementById || document.all) {
var el = document.getElementById? document.getElementById(id): document.all[id];
if (el && typeof el.innerHTML != "undefined") el.innerHTML = shtml;
}
}
</Script>This makes our source easier to read and to proof. As we have said before, you don't have to understand it to use it. Here it is again, using the function and different colors:
<img src="bob1.jpg"
onmouseover="changeContent('answerE','<font color=\'#AAAA00\'>This is Bob !</font>')"
onmouseout="changeContent('answerE','<font color=\'#FF00FF\'>Did that work?</font>')"
width="100" height="145" />I repeat: This is only a taste for those who might want to explore this aspect of web page design. A good place to start is to take a couple of simple tricks like the ones on this page and play around with them to see what kinds of different things you can make them do. To learn more, look for tutorials on DHTML, CSS style, and JavaScript.
JavaScript tutorial for the total non-programmer from WebTeacher: http://webteacher.com/javascript/
Language Interactive: A Trailguide to Creating Dynamic Web Pages by Bob Godwin-Jones, Virginia Commonwealth University: http://www.fln.vcu.edu/cgi/interact.html
