kenkeiter/image_placement.html

## image_placement.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>HTML5 boilerplate—all you really need…</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<!--[if IE]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<script type="text/javascript" charset="utf-8">
	  var drawCanvas = function(target, build_func){
	    $(target).each(function(){
	      // setup layering for the target
	      $(this).css('position', 'relative');
	      $(this).css('z-index', 0);
	      // create DOM container and setup layering.
	      var canvas = document.createElement('div');
	      canvas.setAttribute('id', this.getAttribute('id') + '_canvas');
	      $(canvas).css('position', 'absolute');
	      $(canvas).css('z-index', 999);
	      $(canvas).css('float', 'left');
	      $(canvas).css('left', $(this).offset().left);
	      $(canvas).css('top', $(this).offset().top);
	      $(canvas).css('width', $(this).width() + 'px');
	      $(canvas).css('height', $(this).height() + 'px');

	      document.body.appendChild(canvas);
	      build_func(canvas);
	    });
	  }

	  var placeImage = function(canvas, img_src, pos_x, pos_y){
	    var img = document.createElement('img');
	    canvas.appendChild(img);
	    img.setAttribute('src', img_src);
	    $(img).css('position', 'absolute');
	    $(img).css('left', pos_x);
	    $(img).css('top', pos_y);
	  }

	  var makeSuluLookLikeAHippie = function(target){
	    drawCanvas(target, function(canvas){
	      placeImage(canvas, 'http://www.vueladesign.com/storage/layoutelements/peace.png', 10, 10);
	      placeImage(canvas, 'http://www.vueladesign.com/storage/layoutelements/peace.png', 1, 1);
	    });
	  }

	  /*
	  Must use $(window).load because otherwise you'll try to get the size
	  of the image before it loads
	  */
	  $(window).load(function(){
	    makeSuluLookLikeAHippie('.draw-target');
	  });
	</script>
</head>
<body id="home">
	<h1>Cross-Browser Image Draw!</h1>
	<img class="draw-target" src="http://www.startrek.com/legacy_media/images/200307/sulu05/320x240.jpg" />
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>HTML5 boilerplate—all you really need…</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<script type="text/javascript" charset="utf-8">
	var drawCanvas = function(target, build_func){
	$(target).each(function(){
	// setup layering for the target
	$(this).css('position', 'relative');
	$(this).css('z-index', 0);
	// create DOM container and setup layering.
	var canvas = document.createElement('div');
	canvas.setAttribute('id', this.getAttribute('id') + '_canvas');
	$(canvas).css('position', 'absolute');
	$(canvas).css('z-index', 999);
	$(canvas).css('float', 'left');
	$(canvas).css('left', $(this).offset().left);
	$(canvas).css('top', $(this).offset().top);
	$(canvas).css('width', $(this).width() + 'px');
	$(canvas).css('height', $(this).height() + 'px');

	document.body.appendChild(canvas);
	build_func(canvas);
	});
	}

	var placeImage = function(canvas, img_src, pos_x, pos_y){
	var img = document.createElement('img');
	canvas.appendChild(img);
	img.setAttribute('src', img_src);
	$(img).css('position', 'absolute');
	$(img).css('left', pos_x);
	$(img).css('top', pos_y);
	}

	var makeSuluLookLikeAHippie = function(target){
	drawCanvas(target, function(canvas){
	placeImage(canvas, 'http://www.vueladesign.com/storage/layoutelements/peace.png', 10, 10);
	placeImage(canvas, 'http://www.vueladesign.com/storage/layoutelements/peace.png', 1, 1);
	});
	}

	/*
	Must use $(window).load because otherwise you'll try to get the size
	of the image before it loads
	*/
	$(window).load(function(){
	makeSuluLookLikeAHippie('.draw-target');
	});
	</script>
	</head>
	<body id="home">
	<h1>Cross-Browser Image Draw!</h1>
	<img class="draw-target" src="http://www.startrek.com/legacy_media/images/200307/sulu05/320x240.jpg" />
	</body>
	</html>