how can i make a selection on an image map?

Question

http://magic.cardbinder.com/

I'm tinkering on my website... still learning. I'd like to be able to make some selections on an image. Specifically, I'd like to know how to choose up to 2 options in menuButtons. So I can make a selection in cardChoice, then type something search, and narrow my results.

I'd like to make it so that if you click 2 of the buttons in menuButtons, it will make those selections in the database. So on the second click, it's like hitting enter in the search box.

<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

Although image maps are still in the spec for html5, they can be incredibly difficult to match and they never seem to be aligned perfectly.

If you enjoy web development and want to get better at it, I would suggest learning jQuery. It is really easy to learn and it should allow you to get around your image map problem with less pixel number crunching.