<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript">
var eleccion = [];
var img = [];
function fnc(id, src) {
eleccion.push(id);
img.push(src);
}
function fnc2(id) {
if ('des'+id == eleccion[eleccion.length-1]) {
document.getElementById(id).style.background = "url("+img[img.length-1].split('/')[img[img.length-1].split('/').length-1]+")";
document.getElementById(id).style.borderColor = 'green';
document.getElementById('des'+id).src = 'sprite_pixel.gif';
} else {
alert('error');
}
}
</script>
<style type="text/css">
#puzzle div, #desorden div {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="puzzle">
<div id="_1" onclick="fnc2(this.id);"></div>
<div id="_2" onclick="fnc2(this.id);"></div>
<div id="_3" onclick="fnc2(this.id);"></div>
<div id="_4" onclick="fnc2(this.id);"></div>
<div id="_5" onclick="fnc2(this.id);"></div>
</div>
<div id="desorden">
<div><img src="3.gif" id="des_3" alt="" onclick="fnc(this.id, this.src);" /></div>
<div><img src="1.gif" id="des_1" alt="" onclick="fnc(this.id, this.src);" /></div>
<div><img src="4.gif" id="des_4" alt="" onclick="fnc(this.id, this.src);" /></div>
<div><img src="2.gif" id="des_2" alt="" onclick="fnc(this.id, this.src);" /></div>
<div><img src="5.gif" id="des_5" alt="" onclick="fnc(this.id, this.src);" /></div>
</div>
</body>
</html>