I want to make the wells on an image of a 96 well plate selectable and output the results of what has been selected using html maps and jQuery. The wells currently light up when clicked but do not remain selected nor do they get added to the result list. I also want to be able to drag over a range of multiple wells if need be. Am I going about this the right way and there is just a few small fixes in the code or is there a better way of implementing what I want by perhaps making a table instead of using an image? Here is the image of the 96 well plate currently being used: http://cocoandcashmere.me/well-plate-template/96-well-plate-com-showy-template/
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>Plate Map</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#image_map" ).selectable({
selected: function() {
var result = $( "#result" ).empty();
$( ".ui-selected", this).each(function() {
var wellID = $('area:selected', this).attr('title');
result.append( " #" + ( wellID ));
});
}
});
});
</script>
<style>
#image_map .ui-selecting { background: #FECA40; }
#image_map .ui-selected { background: #cedc98; color: lawngreen; }
.ui-widget-content {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
.result-area {
background: #DDDDDD;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
color: #333333;
font-size:14px;
}
</style>
</head>
<body>
<h3>Plate Map</h3>
<img src="96-well-plate.jpg" usemap="#image_map">
<map name="image_map" >
<area class = "ui-widget-content" alt="A1" title="A1" href="" coords="66,59,23" shape="circle">
<area class = "ui-widget-content" alt="A2" title="A2" href="" coords="118,59,23" shape="circle">
<area class = "ui-widget-content" alt="A3" title="A3" href="" coords="170,59,23" shape="circle">
<area class = "ui-widget-content" alt="A4" title="A4" href="" coords="222,59,23" shape="circle">
<area class = "ui-widget-content" alt="A5" title="A5" href="" coords="275,59,23" shape="circle">
<area class = "ui-widget-content" alt="A6" title="A6" href="" coords="326,59,23" shape="circle">
<area class = "ui-widget-content" alt="A7" title="A7" href="" coords="378,59,24" shape="circle">
<area class = "ui-widget-content" alt="A8" title="A8" href="" coords="429,59,24" shape="circle">
<area class = "ui-widget-content" alt="A9" title="A9" href="" coords="481,58,24" shape="circle">
<area class = "ui-widget-content" alt="A10" title="A10" href="" coords="533,59,23" shape="circle">
<area class = "ui-widget-content" alt="A11" title="A11" href="" coords="585,59,24" shape="circle">
<area class = "ui-widget-content" alt="A12" title="A12" href="" coords="637,58,23" shape="circle">
<area class = "ui-widget-content" alt="B1" title="B1" href="" coords="66,110,22" shape="circle">
<area class = "ui-widget-content" alt="B2" title="B2" href="" coords="118,109,23" shape="circle">
<area class = "ui-widget-content" alt="B3" title="B3" href="" coords="169,109,24" shape="circle">
<area class = "ui-widget-content" lt="B4" title="B4" href="" coords="221,110,24" shape="circle">
<area class = "ui-widget-content" alt="B5" title="B5" href="" coords="275,110,23" shape="circle">
<area class = "ui-widget-content" alt="B6" title="B6" href="" coords="326,110,24" shape="circle">
<area class = "ui-widget-content" alt="B7" title="B7" href="" coords="378,109,23" shape="circle">
<area class = "ui-widget-content" alt="B8" title="B8" href="" coords="430,110,23" shape="circle">
<area class = "ui-widget-content" alt="B9" title="B9" href="" coords="482,109,23" shape="circle">
<area class = "ui-widget-content" alt="B10" title="B10" href="" coords="533,109,23" shape="circle">
<area class = "ui-widget-content" alt="B11" title="B11" href="" coords="584,109,24" shape="circle">
<area class = "ui-widget-content" alt="B12" title="B12" href="" coords="637,109,23" shape="circle">
<area class = "ui-widget-content" alt="C1" title="C1" href="" coords="66,161,23" shape="circle">
<area class = "ui-widget-content" alt="C2" title="C2" href="" coords="117,161,24" shape="circle">
<area class = "ui-widget-content" alt="C3" title="C3" href="" coords="169,161,24" shape="circle">
<area class = "ui-widget-content" alt="C4" title="C4" href="" coords="221,160,23" shape="circle">
<area class = "ui-widget-content" alt="C5" title="C5" href="" coords="274,161,23" shape="circle">
<area class = "ui-widget-content" alt="C6" title="C6" href="" coords="326,161,23" shape="circle">
<area class = "ui-widget-content" alt="C7" title="C7" href="" coords="378,161,23" shape="circle">
<area class = "ui-widget-content" alt="C8" title="C8" href="" coords="430,161,23" shape="circle">
<area class = "ui-widget-content" alt="C9" title="C9" href="" coords="482,161,24" shape="circle">
<area class = "ui-widget-content" alt="C10" title="C10" href="" coords="533,160,23" shape="circle">
<area class = "ui-widget-content" alt="C11" title="C11" href="" coords="586,160,25" shape="circle">
<area class = "ui-widget-content" alt="C12" title="C12" href="" coords="637,160,24" shape="circle">
<area class = "ui-widget-content" alt="D1" title="D1" href="" coords="66,212,23" shape="circle">
<area class = "ui-widget-content" alt="D2" title="D2" href="" coords="118,212,22" shape="circle">
<area class = "ui-widget-content" alt="D3" title="D3" href="" coords="170,212,22" shape="circle">
<area class = "ui-widget-content" alt="D4" title="D4" href="" coords="221,211,24" shape="circle">
<area class = "ui-widget-content" alt="D5" title="D5" href="" coords="275,212,24" shape="circle">
<area class = "ui-widget-content" alt="D6" title="D6" href="" coords="326,212,23" shape="circle">
<area class = "ui-widget-content" alt="D7" title="D7" href="" coords="378,212,23" shape="circle">
<area class = "ui-widget-content" alt="D8" title="D8" href="" coords="430,212,23" shape="circle">
<area class = "ui-widget-content" alt="D9" title="D9" href="" coords="482,212,23" shape="circle">
<area class = "ui-widget-content" alt="D10" title="D10" href="" coords="534,212,23" shape="circle">
<area class = "ui-widget-content" alt="D11" title="D11" href="" coords="586,212,23" shape="circle">
<area class = "ui-widget-content" alt="D12" title="D12" href="" coords="637,212,23" shape="circle">
<area class = "ui-widget-content" alt="E1" title="E1" href="" coords="66,263,24" shape="circle">
<area class = "ui-widget-content" alt="E2" title="E2" href="" coords="118,264,23" shape="circle">
<area class = "ui-widget-content" alt="E3" title="E3" href="" coords="170,263,23" shape="circle">
<area class = "ui-widget-content" alt="E4" title="E4" href="" coords="222,263,23" shape="circle">
<area class = "ui-widget-content" alt="E5" title="E5" href="" coords="274,264,24" shape="circle">
<area class = "ui-widget-content" alt="E6" title="E6" href="" coords="326,263,23" shape="circle">
<area class = "ui-widget-content" alt="E7" title="E7" href="" coords="378,263,23" shape="circle">
<area class = "ui-widget-content" alt="E8" title="E8" href="" coords="430,263,24" shape="circle">
<area class = "ui-widget-content" alt="E9" title="E9" href="" coords="482,263,24" shape="circle">
<area class = "ui-widget-content" alt="E10" title="E10" href="" coords="534,263,24" shape="circle">
<area class = "ui-widget-content" alt="E11" title="E11" href="" coords="586,263,23" shape="circle">
<area class = "ui-widget-content" alt="E12" title="E12" href="" coords="637,264,23" shape="circle">
<area class = "ui-widget-content" alt="F1" title="F1" href="" coords="66,315,23" shape="circle">
<area class = "ui-widget-content" alt="F2" title="F2" href="" coords="118,315,23" shape="circle">
<area class = "ui-widget-content" alt="F3" title="F3" href="" coords="169,315,23" shape="circle">
<area class = "ui-widget-content" alt="F4" title="F4" href="" coords="221,314,24" shape="circle">
<area class = "ui-widget-content" alt="F5" title="F5" href="" coords="274,314,24" shape="circle">
<area class = "ui-widget-content" alt="F6" title="F6" href="" coords="326,315,23" shape="circle">
<area class = "ui-widget-content" alt="F7" title="F7" href="" coords="378,313,24" shape="circle">
<area class = "ui-widget-content" alt="F8" title="F8" href="" coords="430,314,23" shape="circle">
<area class = "ui-widget-content" alt="F9" title="F9" href="" coords="482,314,23" shape="circle">
<area class = "ui-widget-content" alt="F10" title="F10" href="" coords="533,314,24" shape="circle">
<area class = "ui-widget-content" alt="F11" title="F11" href="" coords="585,314,23" shape="circle">
<area class = "ui-widget-content" alt="F12" title="F12" href="" coords="637,313,24" shape="circle">
<area class = "ui-widget-content" alt="G1" title="G1" href="" coords="66,365,24" shape="circle">
<area class = "ui-widget-content" alt="G2" title="G2" href="" coords="118,365,24" shape="circle">
<area class = "ui-widget-content" alt="G3" title="G3" href="" coords="170,365,23" shape="circle">
<area class = "ui-widget-content" alt="G4" title="G4" href="" coords="221,365,23" shape="circle">
<area class = "ui-widget-content" alt="G5" title="G5" href="" coords="274,365,23" shape="circle">
<area class = "ui-widget-content" alt="G6" title="G6" href="" coords="326,365,23" shape="circle">
<area class = "ui-widget-content" alt="G7" title="G7" href="" coords="378,365,23" shape="circle">
<area class = "ui-widget-content" alt="G8" title="G8" href="" coords="430,365,23" shape="circle">
<area class = "ui-widget-content" alt="G9" title="G9" href="" coords="482,365,25" shape="circle">
<area class = "ui-widget-content" alt="G10" title="G10" href="" coords="533,365,23" shape="circle">
<area class = "ui-widget-content" alt="G11" title="G11" href="" coords="586,365,23" shape="circle">
<area class = "ui-widget-content" alt="G12" title="G12" href="" coords="637,365,23" shape="circle">
<area class = "ui-widget-content" alt="H1" title="H1" href="" coords="65,417,24" shape="circle">
<area class = "ui-widget-content" alt="H2" title="H2" href="" coords="118,417,24" shape="circle">
<area class = "ui-widget-content" alt="H3" title="H3" href="" coords="170,417,24" shape="circle">
<area class = "ui-widget-content" alt="H4" title="H4" href="" coords="222,416,24" shape="circle">
<area class = "ui-widget-content" alt="H5" title="H5" href="" coords="274,417,24" shape="circle">
<area class = "ui-widget-content" alt="H6" title="H6" href="" coords="326,417,24" shape="circle">
<area class = "ui-widget-content" alt="H7" title="H7" href="" coords="378,417,23" shape="circle">
<area class = "ui-widget-content" alt="H8" title="H8" href="" coords="430,417,23" shape="circle">
<area class = "ui-widget-content" alt="H9" title="H9" href="" coords="482,416,23" shape="circle">
<area class = "ui-widget-content" alt="H10" title="H10" href="" coords="533,416,23" shape="circle">
<area class = "ui-widget-content" alt="H11" title="H11" href="" coords="585,416,24" shape="circle">
<area class = "ui-widget-content" alt="H12" title="H12" href="" coords="638,416,24" shape="circle">
</map>
<span class = "result-area">Selected Product</span>
<span id = result class = "result-area"></span>
</body>
I would advise using List items as suggested in my comment, from the example. This could look like:
https://jsfiddle.net/Twisty/pok1wd8h/
HTML
<h3>Plate Map</h3>
<div class="plate_image">
<ol id="plates">
<li title="A1" class="ui-widget-content"></li>
<li title="A2" class="ui-widget-content"></li>
<li title="A3" class="ui-widget-content"></li>
<li title="A4" class="ui-widget-content"></li>
<li title="A5" class="ui-widget-content"></li>
<li title="A6" class="ui-widget-content"></li>
<li title="A7" class="ui-widget-content"></li>
<li title="A8" class="ui-widget-content"></li>
<li title="A9" class="ui-widget-content"></li>
<li title="A10" class="ui-widget-content"></li>
<li title="A11" class="ui-widget-content"></li>
<li title="A12" class="ui-widget-content"></li>
<li title="B1" class="ui-widget-content"></li>
<li title="B2" class="ui-widget-content"></li>
<li title="B3" class="ui-widget-content"></li>
<li title="B4" class="ui-widget-content"></li>
<li title="B5" class="ui-widget-content"></li>
<li title="B6" class="ui-widget-content"></li>
<li title="B7" class="ui-widget-content"></li>
<li title="B8" class="ui-widget-content"></li>
<li title="B9" class="ui-widget-content"></li>
<li title="B10" class="ui-widget-content"></li>
<li title="B11" class="ui-widget-content"></li>
<li title="B12" class="ui-widget-content"></li>
<li title="C1" class="ui-widget-content"></li>
<li title="C2" class="ui-widget-content"></li>
<li title="C3" class="ui-widget-content"></li>
<li title="C4" class="ui-widget-content"></li>
<li title="C5" class="ui-widget-content"></li>
<li title="C6" class="ui-widget-content"></li>
<li title="C7" class="ui-widget-content"></li>
<li title="C8" class="ui-widget-content"></li>
<li title="C9" class="ui-widget-content"></li>
<li title="C10" class="ui-widget-content"></li>
<li title="C11" class="ui-widget-content"></li>
<li title="C12" class="ui-widget-content"></li>
<li title="D1" class="ui-widget-content"></li>
<li title="D2" class="ui-widget-content"></li>
<li title="D3" class="ui-widget-content"></li>
<li title="D4" class="ui-widget-content"></li>
<li title="D5" class="ui-widget-content"></li>
<li title="D6" class="ui-widget-content"></li>
<li title="D7" class="ui-widget-content"></li>
<li title="D8" class="ui-widget-content"></li>
<li title="D9" class="ui-widget-content"></li>
<li title="D10" class="ui-widget-content"></li>
<li title="D11" class="ui-widget-content"></li>
<li title="D12" class="ui-widget-content"></li>
<li title="E1" class="ui-widget-content"></li>
<li title="E2" class="ui-widget-content"></li>
<li title="E3" class="ui-widget-content"></li>
<li title="E4" class="ui-widget-content"></li>
<li title="E5" class="ui-widget-content"></li>
<li title="E6" class="ui-widget-content"></li>
<li title="E7" class="ui-widget-content"></li>
<li title="E8" class="ui-widget-content"></li>
<li title="E9" class="ui-widget-content"></li>
<li title="E10" class="ui-widget-content"></li>
<li title="E11" class="ui-widget-content"></li>
<li title="E12" class="ui-widget-content"></li>
<li title="F1" class="ui-widget-content"></li>
<li title="F2" class="ui-widget-content"></li>
<li title="F3" class="ui-widget-content"></li>
<li title="F4" class="ui-widget-content"></li>
<li title="F5" class="ui-widget-content"></li>
<li title="F6" class="ui-widget-content"></li>
<li title="F7" class="ui-widget-content"></li>
<li title="F8" class="ui-widget-content"></li>
<li title="F9" class="ui-widget-content"></li>
<li title="F10" class="ui-widget-content"></li>
<li title="F11" class="ui-widget-content"></li>
<li title="F12" class="ui-widget-content"></li>
<li title="G1" class="ui-widget-content"></li>
<li title="G2" class="ui-widget-content"></li>
<li title="G3" class="ui-widget-content"></li>
<li title="G4" class="ui-widget-content"></li>
<li title="G5" class="ui-widget-content"></li>
<li title="G6" class="ui-widget-content"></li>
<li title="G7" class="ui-widget-content"></li>
<li title="G8" class="ui-widget-content"></li>
<li title="G9" class="ui-widget-content"></li>
<li title="G10" class="ui-widget-content"></li>
<li title="G11" class="ui-widget-content"></li>
<li title="G12" class="ui-widget-content"></li>
<li title="H1" class="ui-widget-content"></li>
<li title="H2" class="ui-widget-content"></li>
<li title="H3" class="ui-widget-content"></li>
<li title="H4" class="ui-widget-content"></li>
<li title="H5" class="ui-widget-content"></li>
<li title="H6" class="ui-widget-content"></li>
<li title="H7" class="ui-widget-content"></li>
<li title="H8" class="ui-widget-content"></li>
<li title="H9" class="ui-widget-content"></li>
<li title="H10" class="ui-widget-content"></li>
<li title="H11" class="ui-widget-content"></li>
<li title="H12" class="ui-widget-content"></li>
</ol>
</div>
<span class="result-area">Selected Product</span>
<span id="result" class="result-area"></span>
CSS
.plate_image {
background-image: url('http://cocoandcashmere.me/wp-content/uploads/96-well-plate-com-showy-template.jpg');
background-repeat: no-repeat;
width: 687px;
height: 462px;
padding: 33px 40px;
}
#plates {
padding: 0;
margin: 0;
list-style-type: none;
width: 627px;
}
#plates li {
width: 48px;
height: 48px;
border-radius: 50%;
float: left;
margin: .04em .065em;
}
#plates .ui-selecting {
background: #FECA40;
}
#plates .ui-selected {
background: #cedc98;
color: lawngreen;
}
.ui-widget-content {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
.result-area {
background: #DDDDDD;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
color: #333333;
font-size: 14px;
}
JavaScript
$(function() {
$("#plates").selectable({
selected: function() {
var result = $("#result").empty();
$(".ui-selected", this).each(function() {
var wellID = $(this).attr('title');
result.append(" #" + (wellID));
});
}
});
});
Now Selectable will work as expected.