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

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。 这是非常容易学习，它应该允许你解决你的图像映射问题，减少像素数量。