使用圖像映射的優點和缺點
在網頁設計的歷史中，有許多網站使用了一種稱為“圖像映射”的功能。 這是附加到頁面上特定圖像的坐標列表。 這些坐標在該圖像上創建超鏈接區域，必要時為圖形添加“熱點”，每個圖形都可以編碼以鏈接到不同的地方。 這與僅向圖像添加鏈接標記的方式大不相同，這會導致整個圖形成為到單個目標的大鍊接。
示例 - 想像一下帶有美國圖像的圖形文件。 如果你希望每個狀態都是“可點擊的”，以便他們轉到有關特定狀態的頁面，可以使用圖像映射來完成此操作。 同樣，如果您有一個音樂樂隊的圖像，您可以使用圖像映射讓每個成員都可以點擊該樂隊成員的後續頁面。
圖像地圖聽起來有用嗎？ 他們當然是，但他們已經在今天的網絡上失寵了。 這至少部分是因為圖像映射需要特定的坐標才能工作。 今天的網站建立在響應和圖像縮放基礎上的屏幕或設備的大小 。 這意味著當網站縮放並且圖像尺寸發生變化時，預先設置的坐標（圖像地圖的工作方式）會分崩離析。 這就是為什麼圖像地圖目前很少用在製作網站上，但是它們對於演示或強制大小頁面的實例仍然有優勢。
想知道如何創建圖像映射，具體如何使用Dreamweaver進行創建？ 。 這個過程並不是特別困難，但也不是那麼容易，所以在開始之前你應該有一些經驗。
入門
讓我們開始吧。 您需要採取的第一步是將圖像添加到您的網頁。 然後你會點擊圖片來突出顯示它。 從那裡，你需要進入屬性菜單（點擊三個熱點繪圖工具之一：矩形，圓形或多邊形。不要忘了命名你的圖像，你可以在屬性欄中進行命名。它就是你想要的任何東西。以“map”為例。
現在，使用這些工具之一在圖像上繪製所需的形狀。 如果您需要矩形斑點，請使用矩形。 圓圈也一樣。 如果您想要更複雜的熱點形狀，請使用多邊形。 這是美國地圖的例子中可能使用的，因為該多邊形將允許您放置點並在圖像上創建非常複雜和不規則的形狀
在熱點的屬性窗口中，輸入或瀏覽到熱點應鏈接的頁面。 這是創建該可鏈接區域的原因。 繼續添加熱點直到您的地圖完成，並添加您想要添加的所有鏈接。
完成後，請在瀏覽器中查看您的圖像地圖，以確保其正常工作。 點擊每個鏈接以確保它轉到正確的資源或網頁。
圖像映射的缺點
再一次，請注意，映像圖有幾個缺點，即使上述缺乏對響應式網站的支持也是如此。 冷杉，小的細節可能在圖像映射中被遮蔽。 例如，地理圖像地圖可能有助於確定用戶來自哪個大陸，但這些地圖可能不夠詳細以查明用戶的原籍國。 這意味著圖像地圖可能有助於確定用戶是來自亞洲，而不是來自柬埔寨。
圖像地圖也可能加載緩慢。 它們不應該在網站上多次使用，因為它們佔用了太多空間用於網站的每個頁面。 單個頁面上過多的圖像映射會造成嚴重的瓶頸和對網站性能的巨大影響。
最後，對於有視覺問題的用戶訪問圖像地圖可能並不容易。 如果您確實使用了圖像映射，則還應該為這些用戶創建另一個導航系統作為替代。
底線
當我試圖組裝一個設計的快速演示以及它如何工作時，我會不時使用圖像映射。 例如，我可能正在模擬移動應用程序的設計，我想使用圖像映射來創建熱點來模擬應用程序的交互性。 這比編寫應用程序更容易，甚至可以用HTML和CSS構建按照當前標準構建的虛擬網頁。 在這個特定的例子中，因為我知道什麼設備可以演示設計，並且可以將代碼擴展到該設備，但映射圖可以工作，但將它們放入生產站點或應用程序非常複雜，應該避免在今天網站。
Jennifer Krynin的原創文章。 9/7/17由Jeremy Girard編輯。