如何根據用戶點擊圖像的不同部分在DIV字段中加載不同的HTML（文本）？

原諒我這個題目不太好的標題，但我不知道如何表達我在科技術語中要做的事情。如何根據用戶點擊圖像的不同部分在DIV字段中加載不同的HTML（文本）？

基本上，頁面上會有圖像，當用戶點擊圖像的某些部分時，用戶點擊的區域信息將顯示在「狀態」（prolly div container right？）旁邊的圖像。我可以參考的最接近的東西是SeatGuru的這個鏈接（http://www.seatguru.com/airlines/United_Airlines/United_Airlines_Canadair_CRJ700_C.php）。當用戶懸停在座位上時，會出現一個工具提示，其中包含座位懸停的信息。我試圖建立相同的功能，但行動將是一個點擊，而不是懸停，而不是在工具提示中顯示的信息，我希望它顯示在圖像旁邊的「狀態」區域，並每次刷新一個新的「座位「被點擊。我嘗試在SeatGuru上查看源代碼，並看到jQuery引用，是我應該如何實現這一目標？

不知道它是否重要，但它被用於Django（python）站點。

TIA。

來源

2013-05-28 user1347648

您可以嘗試圖像映射：https：//developer.mozilla.org/en-US/docs/Web/HTML/Element/map – elclanrs

如果你試圖讓你的內容變成動態的，jquery是你的朋友，是的！ ''您可以根據具有不同「敏感」座標的圖像向其他目標插入鏈接。但你可以使用map來設置不同的敏感部分，並讓jquery在點擊時對它作出反應。 –

我認爲使用jquery對它做出反應將是我想要做的，點擊之後顯示的文本將來自數據庫。打破這個問題： 1.確定點擊了什麼。 2.查詢基於點擊的數據庫。 3.將查詢結果返回頁面。你有一個例子或鏈接，你可以指向我？ – user1347648

您也可以輕鬆使用的影像地圖製作者這在這裏避免了很多工作;）例如： http://www.maschek.hu/imagemap/

來源

2013-05-28 05:37:37 xhallix

我喜歡這個，但是如何根據用戶點擊哪個區域來查詢API？在href或target字段中調用ajax/javascript？ – user1347648

在這裏你只需要上傳圖像 - >點擊接受鼠標左鍵在圖像上定義矩形。之後，您可以使用下面的嵌入代碼並添加所需的href。要查詢點擊次數，我會嘗試給每個區域提供一個Id或類，並用js跟蹤此點擊 – xhallix

您可以像使用HTML圖像映射定義可點擊區域：

http://www.w3schools.com/tags/tag_map.asp

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> 

<map name="planetmap"> 
    <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun"> 
    <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury"> 
    <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus"> 
</map>

另一種選擇是使用SVG圖像與超鏈接

來源

2013-05-28 05:23:29

我該如何配合javascript/ajax API調用？ – user1347648

如何根據用戶點擊圖像的不同部分在DIV字段中加載不同的HTML（文本）？

回答

相關問題