Integrating Technology in the Second Language Classroom

  
Jean LeLoup & Bob Ponterio 
SUNY Cortland 
© 2013
Glossing or Annotating Image Popups
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.


 

Resize a Popup to Fit an Image’s Size: http://articles.sitepoint.com/article/resize-popup-fit-images-size

Auto-Sizing Image Popup Window Script: http://www.codelifter.com/main/javascript/autosizeimagepopup.html



Return to Syllabus