0

http://magic.cardbinder.com/

私は自分のウェブサイトをいじっています...まだ学んでいます。画像上でいくつかの選択を行えるようにしたいと思います。具体的には、menuButtons で最大 2 つのオプションを選択する方法を知りたいです。したがって、cardChoice で選択を行い、何か検索を入力して、結果を絞り込むことができます。

menuButtons の 2 つのボタンをクリックすると、データベースでそれらの選択が行われるようにしたいと思います。2 回目のクリックは、検索ボックスで Enter キーを押すようなものです。

<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>
4

1 に答える 1

1

イメージ マップはまだ html5 の仕様に含まれていますが、それらを一致させるのは非常に難しく、完全に整列しているようには見えません。

Web 開発が好きで、さらに上達したい場合は、jQueryを学習することをお勧めします。学ぶのは本当に簡単で、ピクセル数の計算を少なくして画像マップの問題を回避できるはずです。

于 2012-09-05T03:59:08.050 に答える