JSFiddle - React, Tailwind, and code Playground

by dav sev

HTML

<div id="demo"></div>

CSS

#demo{
position:relative;
margin: 0 0 0 30px;
}

.b{
width: 10px;
height: 10px;
background-image: url('http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg');
position: absolute;
  background-position-x: 0px;
  background-position-y: 0px;

}

.selected{
width: 10px;
height: 10px;
background-image: url('http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg');
position: absolute;
  background-position-x: 0px;
  background-position-y: 0px;

}

JavaScript

createLoop();


$('.b').bind('mouseenter', StartDragSelect);




function createLoop() {
	var length = 30;
	var text = "";
	var demo = $("#demo")
	for ( i = 0; i < length; i++) {
		var rowElement = $('<div class="a"></div>');
		demo.append(rowElement);
		for (var x = 0; x < length; x++) {
			createGridItem(rowElement, i, x);
		}
	}
}

function createGridItem(rootElement, i, x) {
	var pix = 10;
	var currItem = $('<div class="b" id="a' + i + x + '" style="top:' + i * pix + 'px; left: ' + x * pix + 'px;  background-position-x: -' + x * pix + 'px ; background-position-y:-' + i * pix + 'px";"></div>');
	$(rootElement).append(currItem);
}




var gridSize = length * length;
var letter = getParameterByName("letter");

function StartDragSelect(obj) {
	obj = obj.currentTarget;
	if (obj.className == "selected") {
		obj.className = "b";

	} else {
		obj.className = "selected";

	}

	$(obj).css({
		"background-image" : "url('http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg')"
	});
}