Glossing or Annotating for the WWW

Integrating Technology in the Second Language Classroom

Jean LeLoup & Bob Ponterio
SUNY Cortland
© 2013

Glossing or Annotating Image Popups

Web pop-up windows with images

In a previous lesson, we saw how to use popup windows for glossing a text or providing feedback for student responses. It is possible to display images as well as text in such windows because they are essentially like tiny web pages.

A simple solution is just to link directly to the image, setting the link target to a new blank page.
Annie ate a <a href="glossing-popup-mille1.jpg" target="_blank">mille-feuille</a>.

Annie ate a millefeuille.

This works, but the popup window doesn't close automatically.

A more effective popup can be programmed in JavaScript. It is possible to use the same feedback.js utility to display an image by sending it HTML code instead of plain text:
<a href="javascript:feedback('<img src=\'glossing-popup-mille1.jpg\' >')">millefeuille</a>.

Annie ate a millefeuille.

But the code needed to make this work is more complicated than we might wish, and this format doesn't automatically adjust for the image size (fixing this would require editing the JavaScript file).

Instead of these approaches, we will use a modification of the feedback.js JavaScript utility that is made display images instead of text and that will automatically adjust to fit the image size.

Popimage.js

As we saw with the popup feedback.js, this popimage.js program is in a separate JavaScript file that resides in the same folder as the web page (or in a folder that the web page can point to). So first, our page must access the JavaScript function from the separate file. Next we can set up a special link for each gloss using this new function (or we could activate the function through an event such as onClick or onMouseover).

To incorporate a JavaScript function into a web page, we need to point to the script in a separate file. This is a JS file whose name is popimage.js. To be able to use the JavaScript function in your web page, you must use the <script></script> tag to tell your page where to find the script.

The src="popup.js" part of the tag tells the page where to find the source 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. The key to displaying an image is to resize the new popup to fit the image. Here we are using a JavaScript function by Peter Todorov, FitPic, that is inserted into our popimage popup page:
http://articles.sitepoint.com/article/resize-popup-fit-images-size

Here is the text in the popimage.js file. n.b. This is not currently working in new versions of Chrome.

function popimage(photo) {

var browser = navigator.appName;
var browserVersion = navigator.appVersion;

if ((browser.indexOf ("Netscape") >= 0) || (browser.indexOf ("Explorer") >= 0)) {

// This function opens a new window with the message text.
// The window will disappear when it loses focus.

msgWindow=window.open('','msgWindow','toolbar=no,location=no,directories=no, status=no,menubar=no,scrollbars=no,resizable=yes,copyhistory=no,width=480,height=320');
msgWindow.document.open();
msgWindow.focus();
msgWindow.document.write("<HEAD><TITLE>message</TITLE>");

msgWindow.document.write("<script language='javascript'> ");
msgWindow.document.write("var arrTemp=self.location.href.split('?'); ");
msgWindow.document.write("var picUrl = (arrTemp.length>0)?arrTemp[1]:''; ");
msgWindow.document.write("var NS = (navigator.appName=='Netscape')?true:false; ");

msgWindow.document.write("function FitPic() { ");
msgWindow.document.write("iWidth = (NS)?window.innerWidth:document.body.clientWidth; ");
msgWindow.document.write("iHeight = (NS)?window.innerHeight:document.body.clientHeight; ");
msgWindow.document.write("iWidth = document.images[0].width - iWidth; ");
msgWindow.document.write("iHeight = document.images[0].height - iHeight; ");
msgWindow.document.write("window.resizeBy(iWidth, iHeight); ");
msgWindow.document.write("self.focus(); ");
msgWindow.document.write("}; ");
msgWindow.document.write("</script> ");

msgWindow.document.write("</HEAD>");
msgWindow.document.write
("<BODY BGCOLOR='#FAE080' onblur='window.close()' onload='FitPic();' topmargin='0' marginheight='0' leftmargin='0' marginwidth='0'>");
msgWindow.document.write('<img src="' + photo + '" border=0>');

msgWindow.document.write("</BODY>");
msgWindow.document.close();

} else { // Not Netscape or Internet Explorer
alert(message);
}

} // end of JavaScript Function popimage

And here is a link to the popimage.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 popimage() function.

Activating the popup image 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.

In the Link dialog or property box, rather than inserting a link to a new web page, insert the JavaScript command to run the "popimage" utility. Include the image file name in single quotes:

javascript: popimage('glossing-popup-mille1.jpg')

Make sure that it looks EXACTLY like this. The image file name must be placed between the two single quotes. Naturally, you will change the file name between the quotation marks to the name of the individual file that you wish to show.

Annie ate a millefeuille.

You can use color and text-decoration styles to change the appearance of these popup links so as not to distract the student during reading.
http://web.cortland.edu/flteach/mm-course/link-styles.html

I prefer <a href="javascript:popimage('glossing-popup-croissant1.jpg')"
style="color: black; text-decoration: none;">croissants</a> for breakfast.

Sample:
I prefer croissants for breakfast. A religieuse is a great snack. My friends love a Paris-Brest for desert. We always get a bûche de noël for Christmas eve dinner.

You might also wish to put a gloss on an image or image map or a button. Here is an example using a link:

And here using onmouseover:
<img src="glossing-popup-mille-small.jpg" border="0 width="100" height="64" onmouseover="JavaScript:popimage('glossing-popup-mille1.jpg')" />

onMouseover can also be used instead of clicking to activate popups for expressions in text.
Annie ate a <a href="javascript:void(null)" onmouseover="popimage('glossing-popup-mille1.jpg')">millefeuille</a>.

Annie ate a millefeuille.

Sample without text markups:
I prefer croissants for breakfast. A religieuse is a great snack. My friends love a Paris-Brest for desert. We always get a bûche de noël for Christmas eve dinner.

Playing around with these options gives you more control over the possible kinds of feedback you can give to your students. There are also many other popup utilities that you can find on the Internet.

Return to Syllabus