用戶單擊“提交”按鈕后，如何使圖像或圖標出現在另一圖像上？

Question

這個問題是針對以HTML編碼的網站。

mapquest圖片

*我從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>

Answer 1

根據我對您問題的理解方式，您需要做一些事情才能在圖像頂部動態添加圖標。 這就是我要做的方式。

首先，一種在不更改圖像的情況下將圖標移動到圖像頂部的好方法是使用CSS的position規則。

在圖像div中，將其位置設置為relative，將圖標的position:absolute為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 id="imageDiv">
    <div id="iconDiv">
    </div>
</div>

其次，您需要一個javascript函數來調整CSS規則。 如果您希望使用提交按鈕將其顯示在表單中，則還需要在submit函數上返回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;
    }
}

那是做到這一點的一種方法。 希望能有所幫助。

注意：此解決方案將需要jQuery！

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

用戶單擊“提交”按鈕后，如何使圖像或圖標出現在另一圖像上？

問題描述

1 個解決方案

解決方案1
1 2013-06-18 23:13:22

用戶單擊“提交”按鈕后，如何使圖像或圖標出現在另一圖像上？

問題描述

1 個解決方案

解決方案1 1 2013-06-18 23:13:22

解決方案1
1 2013-06-18 23:13:22