1

この質問は、HTML でコーディングされた Web サイトに関するものです。

マップクエスト画像

*上記の画像は Google (mapquest.com にあります) から引っ張ってきましたが、私はこの画像を所有していません。そうは言っても、この写真を参考にして、私の質問に沿ってください。この画像は星で始まっておらず、ユーザーが送信ボタンをクリックした後にのみ表示されると仮定します。

ユーザーがボックスをチェックできるようにするには、html (jquery または javascript を想定) でコーディングする方法を教えてください。例: カテゴリ: 靴 ▢ [送信]

次に、送信ボタンを押した後、画像を変更して、イメージマップに星などのアイコンが表示されるようにします。複数の利用可能なカテゴリがあり、ユーザーがカテゴリのボックスをチェックして送信をクリックした後、これが必要です。アイコン（スター、またはアイコンに必要なもの）を表示するように画像が完全に変更されるか、単に画像を残して画像の上にアイコンを追加するだけです。

編集：この質問に答えて探しているものを絞り込むために、これを追加しています。行ごとに調べたくない場合は、手を握る必要はありませんが、リンクでも十分です. ありがとう。

これをコーディングする方法について、より具体的な詳細を探しています。毎回画像全体を変更するのはそれほど効率的ではないと思うので、イメージマップのようなものを使用して画像にアイコンをドロップし、画像上の適切な座標にドロップするにはどうすればよいですか? たとえば、Google マップで検索したときにアイコンが画像に表示された場合のように (明らかにそれほど複雑ではありませんが、アイデアは得られます)。

現在の HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome | xxxxxx.com </title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body style="margin:0px; padding: 0px;">
<div class="container">
  <div class="header"><img src="images/bg_header1.png" width=950px usemap="#Map" border="0"/>
    <map name="Map" id="Map">
      <area shape="rect" coords="475,28,572,71" href="#" alt="about" />
      <area shape="rect" coords="609,27,746,71" href="#" alt="locations" />
      <area shape="rect" coords="783,27,894,73" href="#" alt="contact" />
      <area shape="rect" coords="55,23,278,61" href="index.html" alt="home" />
    </map>
  </div>
  <div class="content"><img src="images/parismap1.fw.png" width=950px/>
  </div>
  <div class="footer"><img src="images/bg_footer1.fw.png" width=950px/></div>
</div>
</body>
</html>
4

1 に答える 1

1

あなたの質問を理解する方法に基づいて、画像の上にアイコンを動的に追加するために必要なことがいくつかあります。これが私が行う方法です。

まず、画像を変更せずに画像の上でアイコンを移動する良い方法は、CSS のpositionルールを使用することです。

画像 div で、その位置を relative に設定し、アイコンを to に設定します。次のposition:absoluteようにします。

#imageDiv
{
    background: url("/images/image.png");
    position: relative;
}

#iconDiv
{
    background: url("/images/icon.png");
    position: absolute;
    top: 0px;
    left: 0px;
}

top次に、およびルールを調整することでleft、アイコンを画像 div 内の任意の場所に移動できます。(これらは、bottomとrightでも代用できることに注意してください)

div を表示するには、各 div に高さと幅のルールを指定する必要があることは言うまでもありません。

アイコン DIV がイメージ DIV の内側にあることを確認します。

<div id="imageDiv">
    <div id="iconDiv">
    </div>
</div>

次に、CSS ルールを調整するための JavaScript 関数が必要です。送信ボタンを使用するフォームにしたい場合は、送信機能で false を返して、actionページに移動しないようにする必要もあります。

$(document).ready(function(){
    $("form").submit(function(){
        //Update CSS Here in a way similar to this:
        $("#imageDiv").css({"top":someValue+"px", "left":someOtherValue+"px"});

        return false;
    }
}

それはそれを行う1つの方法です。それが役立つことを願っています。

注: このソリューションには jQuery が必要です。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
于 2013-06-18T23:13:22.280 に答える