Question

第一篇文章，如果我在礼节上失败了，请原谅我。我对编程还比较陌生，尽管我了解一些基本知识，并且了解围绕android studio的方式。目前，我正在开发一个可通过android中的webview显示的Web应用程序。该应用程序本质上是一个简单的着色/颜色方案应用程序。它使用黑白图像作为模板，供用户在从颜色选择器中进行选择后填充onclick区域。用户将能够：

在模板中创建，查看和保存自己的颜色方案
加载保存的彩色模板以对其进行编辑
将鼠标悬停在区域上的工具提示以指示用户当前选中的

目前，我正在尝试通过使用Imagemaps来实现此应用。我知道我可以使用Jquery和Imagemapmaster来实现每个区域的点击填充，但是我对它的实际实现投入了很多精力，但我无法使其正常工作。如果有人可以帮助我，并简单地详细说明我如何将颜色从我的颜色选择器传递到onclick填充功能，我将永远是伟大的。 HTML如下：

    <!DOCTYPE html>

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href='spectrum.css' />
  <script src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="jquery.imagemapmaster.js"></script>
  <script type="text/javascript" src="spectrum.js"></script>
</head>

<body>

  <img style="display: block; margin-left: auto;
  margin-right: auto"  src="swatches.jpg" alt="Swatches image" usemap="#swatches"/>

  <map name="swatches">
  <area target="" alt="area1" title="area1" href="" coords="46,62,145,231" shape="rect">
   <area target="" alt="area2" title="area2" href="" coords="145,63,245,230" shape="rect">
    <area target="" alt="area3" title="area3" href="" coords="246,62,343,232" shape="rect">
    <area target="" alt="quad1" title="quad1" href="" coords="93,295,189,392" shape="rect">
    <area target="" alt="quad2" title="quad2" href="" coords="190,294,287,393" shape="rect">
    <area target="" alt="quad3" title="quad3" href="" coords="92,392,189,490" shape="rect">
    <area target="" alt="quad4" title="quad4" href="" coords="190,394,287,489" shape="rect">
  </map>


<input type='text' id="custom" />
<script>
$("#custom").spectrum({
    color: "#f00"
});
</script>

<script>
$('img').mapster();
</script>




</body>

</html>

感谢您的帮助。如果您认为有其他方法可以更轻松地实施此操作，我很想听听

为Android着色Web应用程序：Imagemap onclick填充

0 个答案: