圖片地圖和HTML5

這個問題比技術更具哲理性。圖片地圖和HTML5

我訓練自己作爲一個Web開發人員回來時，Web開發人員被稱爲站長和我選擇的工具是FrontPage中，移動到Evrsoft第一頁2000

這是我使用的HTML圖像映射是最後一次。

現在是HTML5，AJAX，矢量畫布，CSS 3D，jQuery的，本地存儲，觸摸屏Safari瀏覽器，你的名字。圖像地圖已經變得晦澀難懂，Google甚至都沒有提供太多相關結果;一個強制性的W3C學校入口和2004年的一些論壇帖子。

明顯地使用圖像地圖創建網站導航或類似的小事情當時是一個壞主意，今天它肯定是不可原諒的。

但現在我有個任務與背景圖像的DIV的頂部創建多邊形可點擊區域。

我有沒有問題，在影像地圖這樣做，因爲它看起來像它被設計爲一個用例正是這樣，雖然我已經做了沒有測試，我無法想象任何瀏覽器放棄對的支持元素多年來一直非常漂亮。但我不禁認爲今天必須有更好的方式來做到這一點。

我的網絡創作理念是開發IE5.5，然後設計爲Chrome邊緣。這意味着該網站首先需要在基本級別上工作，即使是最陳舊的瀏覽器，然後開始添加CSS以使其更美觀，更實用，更快，更簡單，更友善，更好。因此，雖然我知道我可以在Raphaël中做一個畫布，並添加各種時髦的懸停效果和東西，但我認爲使功能變得簡單，因爲它不應該需要89 kb（或X kb）的JS庫。甚至甚至JS。

我不知道CSS3是否有能力定義多邊形區域，但在承認CSS3引入的巨大可能性的同時，我更願意將任何定義爲非基本天賦的東西都優雅地降級。

所以，在今天的Webdev的世界，這將是最佳的跨瀏覽器的方式來定義一個多邊形的點擊區域（最好的方式，就是grabbable由一個jQuery .hover()，或至少是CSS :hover），不依賴在少數瀏覽器中可用的JavaScript或CSS屬性？圖像映射真的是唯一的方法嗎？什麼是移動設備？

來源

2012-06-23 Emphram Stavanger

...從IE5.5開始是非常瘋狂的。真的，你只是在傷害自己。我有一個相當高的流量網站（每月約有500萬訪問者），在過去的3年中，我沒有一次訪問任何低於IE6的訪問量。在過去的一年中，IE6佔我用戶羣的大約2％。 – Loktar

這不是我使用IE5.5的目標用戶，也不是我的網站看起來很漂亮。我甚至沒有IE5.5的副本來檢查我的網站是什麼樣子的。然而，我在構建時使用這種思維模式，這樣我就可以保證我的網站即使在最原始的瀏覽器上工作，無論年齡如何（Lynx，Kindle，WAP /諾基亞導航器時代的瀏覽器，屏幕閱讀器等）。它有助於將內容和結構保持爲一體，並將時髦和天賦視爲另一個。 –

對哲學沒有任何說明 - 但是對於沒有JavaScript的最小公約的設計而言，將您的體系結構限制爲令人難以置信的原始模型。沒有ajax。所有通過HTTP帖子提交的數據？沒有客戶端邏輯驗證/邏輯/交互性？哎喲。除非您希望所有用戶都擁有20世紀90年代的Web體驗，否則您基本上都在談論設計兩個完全不同的網站實現。你不能「逐步降低」ajax客戶端/服務器模型;你會製作兩個版本的網站。這只是太多的額外工作，沒有回報。誰使用l？？ –

爲什麼使用圖像導航地圖不可原諒？這是一個像其他工具一樣的工具;它有時間和地點。與javascript增強功能一起使用imagemaps是向後兼容的，優雅地降級，並具有100％的瀏覽器支持。他們不需要像flash那樣的插件。自Web瀏覽器出現以來，它們幾乎得到了支持。僅僅因爲舊事並不意味着它沒有用;完全相反，這意味着它得到了很好的支持。

我編寫了一個名爲ImageMapster到效果添加到圖像映射，所以你可以不使用閃光燈的創建交互式圖像的jQuery插件。在這些情況下，通過替換列表來實現一個沒有Javascript支持的具有相同功能的工具將很容易。就個人而言，我認爲試圖在沒有javascript的情況下編寫網頁就像試圖在沒有輪胎的情況下駕駛汽車。如果沒有它，99％的網絡無法工作。這不是1995年。但如果你真的擔心，imagemaps的好處是基本的導航功能仍然有效。沒有辦法用CSS來完成 - 如果你有不規則形狀的區域，甚至不會有CSS3。

來源

2012-06-23 18:06:57

對於「老！=無用」+1。 ''仍然是[部分]（http://dev.w3.org/html5/markup/map.html）[HTML5規範]（http://www.w3.org/TR/html5/the -map-element.html＃the-map-element），所以「old」甚至不能用在「過時」的上下文中。在您的網站上注意：添加微調器（或任何頁面正在加載的指示）將改善用戶體驗。「在野外」：提及演示位於「住宅」鏈接下。我最初認爲鏈接被破壞，因爲屏幕截圖與着陸頁不匹配。 –

感謝您的反饋！演示頁面可能需要很長時間才能加載esp。在移動設備上。我應該優化它並且/或者按你說的去做。我真的需要對該網站進行徹底檢查並清理文檔......當天沒有足夠的時間！在「在野外」的鏈接，我確實說:) –

..其實我只是意識到我有一個微調網頁加載在現場導航 - 我懷疑它只是很微弱，你沒有看到它;看起來像快速不透明的修復會有所幫助。 –

圖片地圖和HTML5

回答

相關問題