HTML圖像映射與多個div元素

我正在實現一個Angular組件，其中有很多用戶可以點擊的小區域。我看到2種方式如何做到這一點：HTML圖像映射與多個div元素

使用背景圖片並定義用戶可以點擊，在圖像上添加單擊處理程序映射區域。
爲每個可點擊的部分使用div並將點擊處理程序附加到父元素（所以我沒有多個點擊處理程序在每個div）。使用CSS來設置每個div的樣式，使其看起來像1中的圖像。

1.的問題是，當圖像發生變化時，我也必須更改地圖座標。這裏的優點是它在許多瀏覽器中應該沒有問題。

2.的優點是我可以根據需要設計組件的樣式（所以它可以更小，更大，不同的字體等），但是當我需要顯示多個組件時它可能會對性能產生影響這樣的組件。

你會選擇哪種方式，爲什麼？或者還有其他的可能嗎？

編輯：忘了提及該組件還應該在移動設備上

來源

2014-01-29 Ludevik

無論哪種方式，如果圖像發生變化，您需要調整座標。也許其中一些可以很容易地通過CSS實際處理座標或座標，但實際上可以歸結爲基於您的用例的意見和判斷調用。出於這個原因，我投票結束這主要是基於意見。 – zzzzBov

我不記得在哪裏，但我只是讀到一篇好文：

DIV（WebKit的變換） VS SVG VS 帆布

爲簡單：

1-50 elements = divs &張圖片
50-500元= SVG
500多元素= 帆布

這在這裏只給你一個想法......然後一切取決於每個元素和設備。

帆布將是一切的最佳解決方案。

畫布上的問題是點擊處理程序。您需要創建一個碰撞檢測腳本。（我用一個背景圖（世界地圖）的畫布，以實時顯示當前用戶的點），但它不是可點擊的......（在地圖下/上方有一個可點擊的圖例）

SVG是prbably你的情況最好的解決方案

像@mainguy稱u能借鑑的東西，並添加事件處理器（或一個類似的父元素）。而性能比div的更好。

DIVS

大多數我使用DIV套與一個eventhanlder的時間。他們很容易使用和風格..但只有正方形或圓圈..如果你開始設計他們，你會失去很多的表現（盒子陰影..）。如果你不設置div的樣式，你可以使用其中的很多。特別是如果你把事件處理器放在parentNode上。這樣你可以處理元素的1000年沒有問題。（但不使用position:absolute）

影像地圖

再次...如果沒有太多的元素，這是prolly也是一個很好的解決方案..最簡單的...（最簡單的方法來繪製簡單的形狀）。很快你有你靜態MAP值，然後你可以轉換你的圖像重新計算地圖與比率..所以這不是一個問題。

如果沒有很多元素，我會去圖像映射。

else SVG。

一切都取決於你有多少元素。

是，當圖像變化我必須要改變的地圖座標太

，如果你使用的div你不必改變COORDS？

** 移動設備支持多個瀏覽器。

來源

2014-01-29 16:44:13 cocco

當我使用divs時，我不需要coords，因爲我不需要它們。在JS處理程序中，我知道哪個元素觸發了單擊事件。 – Ludevik

是啊對...我想你改變X - Y位置的divs ...如果是的話還有另一個問題...幾年前我停下來增加位置絕對的div（或所有hmmlelements）。因爲這是一個巨大的性能損失...當你滾動或動畫。 – cocco

我將與SVG庫，它是速度快，易於風格和大多數瀏覽器suporrted做好這項工作。

D3.js 可用於Angular作爲指令。還沒有與他的工作。但它似乎很受歡迎。只要看看他們的主頁上的WOW！影響。

Raphaël JS 在很多項目中，我都使用過它。它具有很大的優勢，它甚至支持舊的IE（sic！）。

只需要搜索Angular SVG和/或JS，你就會發現很多解決方案。

來源

2014-01-29 16:02:56 mainguy

不知道確切的要求，我的默認選擇是2

也有缺點，比如我們無法輕鬆地映射非矩形區域。然而，這些優勢非常巨大，包括易於維護，可能的響應能力，更強大的造型可能性等等。

div的唯一數量不應該引起任何問題，我不會擔心它。

雖然有些情況下我會尋找不同的實現。

來源

2014-01-29 16:03:02

HTML圖像映射與多個div元素

回答

相關問題