使用 jQuery 和 html 地图

Question

我想在 96 孔板的图像上制作孔选择 table 并输出使用 html 地图和 jQuery 选择的结果。单击时，孔当前会亮起，但不会保持选中状态，也不会添加到结果列表中。如果需要，我还希望能够拖动多个井的范围。我是不是以正确的方式解决这个问题，代码中只有一些小的修复，或者是否有更好的方法来实现我想要的东西，也许是制作 table 而不是使用图像？这是当前使用的 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>

Answer 1

我建议使用示例中我评论中建议的列表项。这可能看起来像：

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));
      });
    }
  });
});

现在 Selectable 将按预期工作。

使用 jQuery 和 html 地图

Using jQuery with html map

html

jquery

jquery-ui

imagemap