我想在96孔板的图像上选择井，并输出使用html map和jQuery选择的结果。点击时，井当前点亮，但不会保持选中状态，也不会添加到结果列表中。如果需要，我还希望能够拖动多个井的范围。我是否以正确的方式进行此操作，代码中只有一些小的修复，或者是否有更好的方法来实现我想要的东西，可能是制作表而不是使用图像？这是目前正在使用的96孔板的图像：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>
我建议在示例中使用我的评论中建议的列表项。这可能看起来像：
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将按预期工作。