<!DOCTYPE html>
<html>
<head>
<style>
.gen{
width:60px;
height:60px;
margin:5px;
float:left;
}
.full_size{
width:80px;
height:90px;
float:left;
}
.top{
width:40px;
height:30px;
border-radius: 50px 50px 50px 50px;
border:1px solid #000000;
margin:0px 0px 0px 18px;
}
.handl{
width:10px;
height:20px;
border:1px solid #000000;
float:left;
border-radius: 10px 0px 0px 0px;
margin:8px 0px 0px 0px;
}
.handr{
width:10px;
height:20px;
border:1px solid #000000;
float:left;
border-radius: 0px 10px 0px 0px;
margin:8px 0px 0px 0px;
}
.mid{
width:50px;
height:40px;
border-radius: 10px 10px 0px 0px;
border:1px solid #000000;
float:left;
}
.btn{
width:5px;
height:40px;
margin:0px auto;
}
.btns{
width:5px;
height:5px;
border: 1px solid #333333;
border-radius: 5px 5px 5px 5px;
margin:5px 0px 0px 0px;
}
.botl{
width:18px;
height:30px;
border:1px solid #000000;
float:left;
margin:0px 0px 0px 12px;
}
.botr{
width:18px;
height:30px;
border:1px solid #000000;
float:left;
margin:0px 0px 0px 10px;
}
</style>
http://code.jquery.com/jquery-latest.js
</head>
<body>
$(".gen").click(function () {
var color = $(this).css("background-color");
var classes = $(this).attr("class");
var classesArray = classes.split(' ');
var tot_class = classesArray.length;
tot_class = tot_class-1;
var which_elem = classesArray[tot_class];
if(which_elem == "t"){
$('.top').css("background-color",color);
} else if(which_elem == "m"){
$('.handl').css("background-color",color);
$('.handr').css("background-color",color);
$('.mid').css("background-color",color);
} else if(which_elem == "b"){
$('.botl').css("background-color",color);
$('.botr').css("background-color",color);
} else if(which_elem == "bt"){
$('.btns').css("background-color",color);
}
});
