許多網(wǎng)站設(shè)計需要使用非方形或矩形形狀來響應(yīng)點擊事件。也許您的網(wǎng)站有一些傾斜或彎曲的橫幅，如果使用直角矩形，點擊區(qū)域會顯得笨拙地過大?；蛘吣幸粋€形狀獨特的大型徽標(biāo)，您只想讓該獨特形狀可點擊?；蛘吣幸粋€交互式圖像，點擊其不同區(qū)域時會產(chǎn)生不同的響應(yīng)。

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

SVG形狀

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

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

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

圖片地圖

假設(shè)您無法控制SVG標(biāo)記，或者您需要向光柵圖像添加可點擊區(qū)域?？梢允褂脠D像地圖將可點擊目標(biāo)應(yīng)用於img標(biāo)籤的一部分。

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

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

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

您也可以在更複雜的形狀上實現(xiàn)圖像地圖。事實上，讓我們回到SVG示例中的相同目標(biāo)形狀，但這次使用光柵圖像。我們?nèi)匀幌Ｍ溄蛹^和靶心，但這次沒有SVG元素來幫助我們。對於靶心，我們知道底層圖像中的X和Y坐標(biāo)及其半徑，因此定義區(qū)域的圓形非常容易。箭頭形狀更複雜。我使用https://www.image-map.net繪製形狀並生成圖像地圖的區(qū)域——它由一個多邊形和一個圓形組成，用於頂部圓形邊緣。

剪輯路徑

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

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

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

我們還可以根據(jù)最適合特定點擊目標(biāo)形狀的方法混合和匹配不同的方法。在這裡，我結(jié)合使用了Bennet Freely的clippy創(chuàng)建的“關(guān)閉”形狀和SVG超鏈接元素來構(gòu)建可點擊井字遊戲。 SVG在這裡很有用，可以確?！癘”形狀中間的“孔”不可點擊。但是，對於“X”（這是一個多邊形），單個clip-path可以對其進行樣式設(shè)置。

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

沒有透明邊框的CSS形狀

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

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

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

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

以上是將形狀和圖像與HTML和CSS聯(lián)繫起來的許多方法的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！