JSFiddle - React, Tailwind, and code Playground

by GaryC123

HTML

<div id="id-menu" class="c-menu">
		SPRITE<br/>
		<ul class="icone">
			<a href="#" id = "IMG1" ><li class="icone-1" id = "IMG1child" ></li></a>
			<a href="#" id = "IMG2" ><li class="icone-2" id = "IMG2child" ></li></a>
			<a href="#" id = "IMG3" ><li class="icone-3" id = "IMG3child" ></li></a>
			<a href="#" id = "IMG4" ><li class="icone-4" id = "IMG4child" ></li></a>
			</ul>
		</ul>
		</div>
<div id="canvas"></div>

CSS

.icone
{
margin-left:0px;
}


.icone-1 { background-position: left top }
.icone-2 { background-position: 14.2857% top }
.icone-3 { background-position: 28.5714% top }
.icone-4 { background-position: 42.8571% top }
.icone-5 { background-position: 57.1428% top }
.icone-6 { background-position: 71.4285% top }
.icone-7 { background-position: 85.7142% top }
.icone-8 { background-position: right top }





ul
{
padding:0px;
border:3px solid blue;
display: inline-block;
}

.icone li {
	margin:auto;
	text-align:center; /* non*/	
	vertical-align:bottom;
	padding:0px;
	width: 75px;
	height: 100px;
	border-radius:16px;
	border: solid white 5px;
	opacity: 1;
	background-image: url("http://www.davidinlove.com/img/sprite_menu_DT.jpg");
	background-repeat: no-repeat;
	display: inline-block;
	list-style-type:none;
}

#canvas {
    width:100%;
    height:100%
}
}

JavaScript

$(".icone li").click(function(){
    bgimage = $(this).css("background-image").replace(/"/g,"").replace(/url\(|\)$/ig, "");
    
    $("#canvas").css("background-image",bgimage).css("height",$(document).height()).css("width",$(document).width())
    ///alert(bgimage)
})