用戶點擊提交按鈕後，如何使圖像或圖標顯示在另一圖像上？

這個問題是用HTML編碼的網站。用戶點擊提交按鈕後，如何使圖像或圖標顯示在另一圖像上？

Mapquest服務形象

*我把從谷歌上面的圖片（位於mapquest.com），我沒有自己的這一形象。有了這個說法，請看這張圖片作爲參考去解決我的問題。假設這張圖片不是以星號開頭，只有在用戶點擊提交按鈕後纔會出現。

我該如何編碼在HTML（假設jQuery或JavaScript）讓用戶選中一個框。示例：類別：鞋子▢[提交]

然後，按下提交按鈕後，更改圖像以使圖像上出現圖標，如星號。我希望它有多個可用類別，並且在用戶選中類別框並點擊提交後。無論是圖像完全變化，以顯示圖標（明星，或任何我想要的圖標），或者它只是離開圖像，只是在圖像上添加圖標。

感謝您的回覆。

編輯：我加入這個，希望縮小我在尋找什麼迴應這個問題。如果你不希望一條一條地走，我不需要我的手，但即使是一個鏈接也足夠了。謝謝。

我正在尋找更多關於如何編碼的具體細節。我不認爲每次更改整個圖像效率都不高，那麼如何使用類似於圖像映射的方式將圖標放在圖像上，因此它會在圖像上的適當座標處下降？就像你在谷歌地圖上搜索並且圖標放在圖像上一樣（顯然不是那麼複雜，但你明白了）。

當前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>

來源

2013-06-18 JMan

你可以發佈你的HTML +任何你在JS做的嘗試嗎？ – lifetimes

正常情況下，提交按鈕會將您帶到另一個頁面。那麼這涉及到編碼你的HTML和jQuery代碼呢？ – jtheman

我只需要幫助從哪裏開始尋找HTML中的jQuery解決方案。我還沒有嘗試jQuery的這個功能，因爲我不知道從哪裏開始。我通常可以在google上找到答案，但我不知道要查看哪些功能。 – JMan

基於我明白你的問題的方式，也有需要，以對圖像的頂部動態添加圖標做了幾件事情。這是我會這樣做的方式。

首先，在圖像頂部移動圖標而不更改圖像的好方法是使用CSS的position規則。

在你的形象格，設置它的位置，相對的，和圖標對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。 （請注意，這些也可以與底部和右被取代）

希望我不需要告訴你，你還需要給每個的div的高度和寬度規則爲了讓他們出現。

確保您的ICON DIV IS INSIDE圖像DIV的：

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

其次，你需要一個JavaScript函數來調整的CSS規則。如果你想讓它使用一個提交按鈕是一個形式，你還需要回報的提交功能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>

來源

2013-06-18 23:13:22 David

謝謝你的迴應。我會跟你說的一起去看看別人在說什麼。稍後我會回到這裏跟進。 – JMan

用戶點擊提交按鈕後，如何使圖像或圖標顯示在另一圖像上？

回答

相關問題