I was thinking about how to go about building the image noting service built into flickr as seen above when I ran across the YUI Image Cropper Tool, which contained most of the functionality I wanted. You can view a functional example on YUI’s page at: http://developer.yahoo.com/yui/examples/imagecropper/feedback_crop.html

We are going to base our example from this, and contunie to build onto it throughout many articles.  In this article we will focus on creating the form that moves with the crop tool.

The first step that comes to mind is attaching a form to the selection tool. The first thing to do was to check to see if the crop too is rendered. You can check this by checking to see if the crop tools onready event has fired:

crop.on('contentReady', yourClosure(){});

The second step is fairly straight forward and to create the div with an id and insert the related html:

var tempnod=document.createElement('div');
tempnod.id='vote';
tempnoeinnerHTML='<input type="text" id="comment" value="Comment Here!!">
<br><button id="save" type="button">Save</button>
<button id="cancel" type="button">Cancel</button>';
Dom.get('yui_img_wrap').appendChild(tempnod);

The Third step is to add the event listeners for the save and cancel buttons:

Event.on('save','click',saveFun);
Event.on('cancel','click',cancelFun);

The forth step set the style dynamically in the image cropper’s move event in order to position the form with the crop tool.  Please note the additon of 10 pixels as a bit of buffer space.:

Dom.setStyle('vote','left',region.left+'px');
Dom.setStyle('vote','top',(region.top+region.height+10)+'px');

Don’t forget to set up your styles to reflect your changes and set the orginal cordinates of your comment box:

#vote {
position: absolute;
 left:20px;
 top:125px;
}
#comment{
 margin:2px;
 width:200px;
 background: #FFFFD3;
 text-align:center;
}
#save{
 background: #0063DC;
 color:#fff;
 font-weight:bold;
}
#cancel{
 background: #DDD;
 color:#666;
 font-weight:bold;
}

Feel free to check out a working example at: http://www.zomie.com/examples/imagecomment.html

Later on I will come up with something for the save and cancel functions…

I have cut up a simple version of the presentation that can be viewed here if you are interested:
http://www.zomie.com/examples/shinerte_simple.pdf

Also feel free to see a few pictures from the tech talk:
http://flickr.com/photos/14261072@N08/tags/ymgtalk/

I will work to publish a few articles about customizing the Rich Text Editor in upcoming months.

Dav Glass did a wonderful job on the talk and the widget.  If you want to learn something about Rich Text Editors I suggest watching. 

He starts talking about Shine around 7 mins remaining:

I got the opprunity to work in the Yahoo booth at this year’s Web 2.0 Expo.  Nick Fogler of the Juku program was looking for someone to go up to spread the word.  Hopefully we recruited a few promising new Front End’s for Yahoo!. 

The main focus of the booth was on the Yahoo Developer Network and on some new things like fire eagle which is an awesome geolocating service. 

If you are interested you can see a few pics at:
http://flickr.com/photos/14261072@N08/tags/web20expo/