Question

http://magic.cardbinder.com/

我正在修改我的网站......还在学习。我希望能够在图像上做出一些选择。具体来说，我想知道如何在menuButtons中选择最多2个选项。所以我可以在cardChoice中进行选择，然后输入搜索内容，并缩小搜索范围。

我想这样做，如果你点击menuButtons中的2个按钮，它将在数据库中进行这些选择。所以在第二次点击时，就像点击进入搜索框一样。

<div id="leftMenu">
<h1>CardBinder</h1>
<form name="mainMenu" action="cardChoice.php" method="post">
  <div>
    <select name="chooseSet">
    <option value="option1">Option 1</option>
    <option selected="selected" value="option2">Option 2</option>
    <option value="option3">Option 3</option>
    </select>
  </div>
  <div>
  <br/><img src="/menu.png" alt="Menu" usemap="#menuButtons" /> <br/><br/>
  <map name="menuButtons">
    <area shape="circle" coords="112,36,35" alt="White" href="/Mana/W.gif" />
    <area shape="circle" coords="189,93,35" alt="Blue" href="/Mana/U.gif" />
    <area shape="circle" coords="163,186,35" alt="Black" href="/Mana/B.gif" />
    <area shape="circle" coords="59,186,35" alt="Red" href="/Mana/R.gif" />
    <area shape="circle" coords="35,93,35" alt="Green" href="/Mana/G.gif" />
    <area shape="circle" coords="69,278,35" alt="Planeswalker" href="" />
    <area shape="circle" coords="149,278,35" alt="Creature" href="" />
    <area shape="circle" coords="34,347,35" alt="Enchantment" href="" />
    <area shape="circle" coords="111,347,35" alt="Artifact" href="" />
    <area shape="circle" coords="188,347,35" alt="Land" href="" />
    <area shape="circle" coords="74,413,35" alt="Instant" href="" />
    <area shape="circle" coords="153,413,35" alt="Sorcery" href="" />
  </map>
  </div>
  <div>
    <input name="search" type="text" placeholder="Card Name" size="20" maxlength="50" />
  </div>    
</form>
</div>

Answer 1

尽管图像地图仍然在html5的规格中，但它们难以匹配，并且它们似乎永远不会完美对齐。

如果您喜欢网络开发并想要更好地学习它，我建议学习jQuery。这很容易学习，它应该允许你用较少的像素数运算来解决你的图像映射问题。

如何在图像地图上进行选择？

1 个答案: