Annotating a Graphic with Flickr

I recently went to a conference where an English professor showed an interesting way to add notes to an image using the notes function of Flickr, a photo sharing site.  Adding notes will make it easy to demonstrate various elements of a graphic.   This method can be used in the teaching of art, graphic design, architecture and some science subjects.  A flickr account (free to sign up) is required in using this function.

Here is how to add notes:

  • Log in to your flickr account;
  • Upload the photo you want to show students (find ones created and shared under “Creative Commons” if it is not your own work);
  • Click on the photo after you have uploaded it;
  • Click on the “add note” icon on the upper left corner;
  • Drag around the frame box to wherever you want to highlight;
  • Start to type in your notes;

Add notes

Your notes can actually be a link if you type in an html code for it, and the code would be something like:  <a href=”past your URL here” target=”blank”>name of link </a>

You can include an audio or video as notes, as long as the audio/video files are available online to link to using the link method mentioned above.

Add link

After adding the notes, you can move your cursor away from the photo, and you won’t see any notes.  However when you move the cursor on the photo, you will be able to see all the highlight areas indicating that notes or comments are there.

Mouse away from picture

Once you have finished editing the graphic, you can share the link of the graphic with students directly, or embed it in a page:  copy and paste the html code for this graphic by clicking on “share this”, which will then reveal the code for the graphic.   If you want to embed it to a Blackboard page, look for the “< >” sign when adding or editing an item.   If you click on that sign, it will shift to  “toggle html source code mode” in which you can paste the html code you have just added.

Please let me know if you have any questions in using this function.

vol41

Here is a sample of what the annotated graphic look like.  Move your cursor on and off the graphic to see the difference.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>