將形狀和圖像與HTML和CSS聯繫起來的許多方法

許多網站設計需要使用非方形或矩形形狀來響應點擊事件。也許您的網站有一些傾斜或彎曲的橫幅，如果使用直角矩形，點擊區域會顯得笨拙地過大。或者您有一個形狀獨特的大型徽標，您只想讓該獨特形狀可點擊。或者您有一個交互式圖像，點擊其不同區域時會產生不同的響應。

您可以用未設置樣式的<a></a>標籤包圍這些資源，以獲得大小大致合適的可點擊矩形。但是，您也可以使用不同的技術來控制該區域的形狀，確保點擊區域的目標與屏幕上顯示的內容完全匹配。

SVG形狀

如果您的點擊目標是圖像或圖像的一部分，並且您可以選擇SVG作為其格式，那麼您已經對該元素在頁面上的行為有了很大的控制權。使SVG的一部分可點擊的最簡單方法是向標記中添加SVG超鏈接元素。這就像用<a></a>標籤包裝目標一樣簡單，就像包裝嵌套的HTML元素一樣。您的<a></a>標籤可以包圍簡單的形狀或更複雜的路徑。它可以包圍一組SVG元素或只有一個。在這個例子中，靶心的鏈接包裝了一個單獨的圓形元素，但更複雜的箭頭形狀由兩個多邊形和一個路徑元素組成。

請注意，我在此演示中使用了已棄用的xlink:href屬性，以確保鏈接可在Safari上運行。僅使用href可在Internet Explorer、Chrome和Firefox中運行。

這裡唯一的技巧是確保<a></a>標籤位於SVG標記內，並且該標籤包裝了您想要可點擊的形狀。此SVG的視區仍然是矩形，因此包裝整個SVG元素不會產生相同的效果。

圖片地圖

假設您無法控制SVG標記，或者您需要向光柵圖像添加可點擊區域。可以使用圖像地圖將可點擊目標應用於img標籤的一部分。

圖像地圖與圖像源分開定義。地圖實際上會覆蓋整個圖像元素，但由您定義可點擊區域。與SVG示例中的超鏈接元素不同，圖像地圖中的坐標與源圖像的定義無關。圖像地圖自HTML 3以來就存在，這意味著它們具有出色的瀏覽器支持。但是，它們不能僅用CSS進行樣式設置以提供交互式提示，就像我們使用SVG在懸停時所做的那樣——光標是圖像目標區域可以點擊的唯一視覺指示器。但是，可以使用JavaScript對區域進行樣式設置。

W3Schools有一個使用太陽系圖片的圖像地圖的優秀示例，其中太陽和行星鏈接到這些目標的特寫圖像——圖像中的其他任何地方都不可點擊。這是因為圖像地圖中定義的區域坐標與基本圖像中太陽和行星的位置相匹配。

這是Derek Fogge的另一個示例，它使用地圖創建更有趣的點擊目標。它確實使用jQuery在點擊時設置區域樣式，但請注意地圖覆蓋圖像的方式以及如何使用坐標創建目標。

您也可以在更複雜的形狀上實現圖像地圖。事實上，讓我們回到SVG示例中的相同目標形狀，但這次使用光柵圖像。我們仍然希望鏈接箭頭和靶心，但這次沒有SVG元素來幫助我們。對於靶心，我們知道底層圖像中的X和Y坐標及其半徑，因此定義區域的圓形非常容易。箭頭形狀更複雜。我使用https://www.image-map.net繪製形狀並生成圖像地圖的區域——它由一個多邊形和一個圓形組成，用於頂部圓形邊緣。

剪輯路徑

如果您想使用CSS定義自定義點擊區域的形狀，而無需使用JavaScript進行樣式設置，該怎麼辦？ CSS clip-path屬性為定義和設置任何HTML元素上的目標區域的樣式提供了相當大的靈活性。

這裡我們有一個五角星形狀的點擊區域。該星形從技術上講是一個多邊形，因此我們可以像在前面的圖像地圖示例中那樣使用星形基本圖像和具有相應坐標的圖像地圖。但是，讓我們使用clip-path 。以下示例顯示應用於JPG圖像和絕對定位的超鏈接元素的相同clip-path 。

clip-path的瀏覽器支持已經好得多，但對於某些值仍然可能不一致。在依賴它之前，請務必檢查支持和供應商前綴。

我們還可以根據最適合特定點擊目標形狀的方法混合和匹配不同的方法。在這裡，我結合使用了Bennet Freely的clippy創建的“關閉”形狀和SVG超鏈接元素來構建可點擊井字遊戲。 SVG在這裡很有用，可以確保“O”形狀中間的“孔”不可點擊。但是，對於“X”（這是一個多邊形），單個clip-path可以對其進行樣式設置。

同樣，請注意瀏覽器支持，尤其是在混合和匹配技術時。上面的演示並非在所有地方都受支持。

沒有透明邊框的CSS形狀

clip-path屬性允許我們將預定義的形狀應用於我們選擇的HTML元素，包括超鏈接元素。還有許多其他選項可以創建不是正方形和矩形的HTML和CSS元素——您可以在《CSS的形狀》中看到其中一些。但是，並非所有技術都會像您預期的那樣影響點擊區域的形狀。 CSS形狀中的大多數示例都依賴於透明邊框，即使您的用戶看不到它們，DOM仍然會將它們識別為點擊目標的一部分。其他技巧，如定位、轉換和偽元素（如::before和::after ）將使您的樣式化超鏈接與其可見形狀保持一致。

這是一個不依賴透明邊框的CSS心形形狀。您可以看到紅色心形是元素中唯一可點擊的區域。

這是另一個使用透明邊框創建CSS三角形形狀的示例。您可以看到點擊區域最終位於實際形狀之外。將鼠標懸停在元素上，您將能夠看到點擊區域的真實大小。

希望這能讓您很好地了解使用HTML和CSS創建圖像和形狀上的可點擊區域的多種方法。您可能會發現需要使用JavaScript才能獲得更高級的交互式體驗。但是，HTML、CSS和SVG的組合功能為控制點擊目標的精確形狀提供了相當多的選項。

以上是將形狀和圖像與HTML和CSS聯繫起來的許多方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！