With the generosity of subscribers to Flickr for example who allow others to use their images free of charge, we users have a huge resource of excellent images at our finger tips.
The only requirement is compliance with the conditions of the CC license and attribution or referencing the creators work back to them somehow.

It maybe easiest to show the information that is associated with each CC licensed image and work from there.



 
This image has been taken from Flickr. I simply searched on "Japanese temples" then in the advanced tab I selected "Creative Commons" Licensed images and from the shorter list this was one. I downloaded the image as is and kept the Flickr name. Normally I rename it to something intuitive but for this exercise I am keeping the same.
The next step I took was to scroll down a little on the page and located the "Additional Information" There are some symbols and in blue writing the phrase: Some rights reserved. Clicking the blue writing then opens a page on the Creative Commons site and in the second section under the heading: Under the following conditions:
Within the section "Attribution" there is an easily seen box which when clicked will highlight the attribution conditions and the license details. Copying this and pasting it into Notepad or some non-formatting text editor displays the content contained. This in fact is our data to work with. Don't be put off by it. We don't need all of it.

<div xmlns:cc="http://creativecommons.org/ns#" about="http://www.flickr.com/photos/24443965@N08/2370768914/"><a rel="cc:attributionURL" href="http://www.flickr.com/photos/24443965@N08/">http://www.flickr.com/photos/24443965@N08/</a> / <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/2.0/">CC BY-NC-SA 2.0</a></div>
If we break it down a bit we can begin to see what is useful to us.
Let's look at the about:  http://www.flickr.com/photos/24443965@N08/2370768914/
The http://www.flickr.com/photos/ is the Flickr site and the general folder for all photos stored.
The next part: 24443965@N08 is the so called "photostream" of the owner of this image. The following number (2370768914) is the image ID within the photostream
The next part of the information: http://www.flickr.com/photos/24443965@N08/ is the display if we placed it in an HTML holder. This is the important attribution data and something we can use directly.
Following on we can see <a rel="license"href=" http://creativecommons.org/licenses/by-nc-sa/2.0/"> Creative Commons don't keep a register of licenses and the license which the owner elects to use with their image is one of a few options. The owner for this image has nominated the license "by-nc-sa" which is explained in the creative commons site.
The requirement for attribution is to link to the owner's photostream and to give the license class plus the details of the conditions of the license by providing a link.

So for the above image we need two key pieces of information:
The owner's photostream address and the Creative Commons License class.
In this case:
Photostream address: www.flickr.com/photos/24443965@N08
CC License Class: by-nc-sa
 That's really all we need to annotate the image.

I think very few of us really like additional details on our pages  things like Photostream addresses so the way we can reduce this is to place it as a link within the image. That fills the requirements of the license as I read it. I also have found that to include this in a tooltip is a very convenient way of highlighting the fact that it comes from a licensed source.

At this time I am placing the CC license as a badge under the image directly. This highlights again that there are conditions associated with the use and in fact another person who may copy this is required legally to follow the same conditions. Maybe I will change the way I do this in time. For some reason the small badge doesn't get under my skin. I use the badges provided by Creative Commons and each of the badges are hot linked to the CC page describing the conditions of the license.

So:


If you mouse-over the image you will see a tooltip displaying the photostream address of the image, this can be clicked to take you to the collection. If you click the CC badge you will be taken o the specific page for the license conditions specified by the owner. These things are in compliance with the CC license fully.

The code for the work is in two parts. The image with tooltip including the link to the photostream and secondly the badge and CC license.

1. The image coding:

<a href="http://www.flickr.com/photos/{photostream}/"><img style="border:0;" src="{folder}/{sub-folder}/{image}.jpg" onMouseover="ddrivetip('www.flickr.com/photos/{photostream}/','{hex code for tooltip bkgd colour}', {tooltip width in pixels})"; onMouseout="hideddrivetip()"></img></a>

This is the specific code for the image above:
<a href=http://www.flickr.com/photos/24443965@N08/"><img style="border:0;" src="resources/flickr_tutorial/2370768914_4ec1424c96.jpg" onmouseover="ddrivetip('www.flickr.com/photos/24443965@N08/','#013565', 200)" ; onMouseout="hideddrivetip()"></img></a>

2. The CC badge

You need to create a folder where you store images and then copy the CC buttons from the Creative Commons Downloads page. Name them by the License class, ie the characters on each button. This allows for easy  assignment.

<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/2.0/"><img  src="http://{domain where button image is filed}/{folder}/{sub-folder}/{button image file}.png"> (In this case: BY-NC-SA.png)

Finally because the tootltips is a javascript code you need to place the CSS style and the code in an HTML placeholder  at the top of your page. This then allows the Tooltip to function.

The link to this code is here
<style type="text/css">
#dhtmltooltip{ position: absolute; width: 150px; border: 2px solid
black; padding: 2px; background-color: lightyellow; visibility: hidden;
z-index: 100; /*Remove below line to remove shadow. Below line should
always appear last within this CSS*/ filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135); } </style>


<div id="dhtmltooltip"></div>

<!-- (Please delete and omit this when pasting into your site. This prevents the page from trying to interpret this as code)

/***********************************************
* Cool DHTML tooltip script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var offsetxpoint=-60 //Customize x offset of tooltip
var offsetypoint=20 //Customize y offset of tooltip
var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function ddrivetip(thetext, thecolor, thewidth){
if (ns6||ie){
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
tipobj.innerHTML=thetext
enabletip=true
return false
}
}

function positiontip(e){
if (enabletip){
var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20

var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000

//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<tipobj.offsetWidth)
//move the horizontal position of the menu to the left by it's width
tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
else if (curX<leftedge)
tipobj.style.left="5px"
else
//position the horizontal position of the menu where the mouse is positioned
tipobj.style.left=curX+offsetxpoint+"px"

//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight)
tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
else
tipobj.style.top=curY+offsetypoint+"px"
tipobj.style.visibility="visible"
}
}

function hideddrivetip(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}

document.onmousemove=positiontip


--> (please delete this when pasting into your site. It's part of protecting the code for display)

If you have any queries then please don't hesitate to post back here.