Handles

by jcreamer898

HTML

<div id="addHandles">
    <img src="//jcstuff.jcreamerlive.com/savesemicolon.jpg" />
</div>

CSS

#n{left:50%;margin-left:-4px;margin-top:-4px;top:0;}
#s{bottom:0;left:50%;margin-bottom:-4px;margin-left:-4px;}
#e{margin-right:-4px;margin-top:-4px;right:0;top:50%;}
#w{left:0;margin-left:-4px;margin-top:-4px;top:50%;}
#nw{left:0;margin-left:-4px;margin-top:-4px;top:0;}
#ne{margin-right:-4px;margin-top:-4px;right:0;top:0;}
#se{bottom:0;margin-bottom:-4px;margin-right:-4px;right:0;}
#sw{bottom:0;left:0;margin-bottom:-4px;margin-left:-4px;}

.handle { position: absolute; outline: 1px solid black; width: 5px; height: 5px; }
#addHandles { position: relative; margin: 10px; }

JavaScript

var handles = 'n s e w ne nw se sw'.split(' ');
$.each(handles, function () {
  $('#addHandles').append('<div id="' + this + '" class="handle"></div>');
})