Q

如何使不同的斜切圖像塊作爲鏈接？

2017-07-25 34 views -1 likes

-1

我正在解決像響應式圖像地圖的問題，不知道哪種解決方案最好。如何使不同的斜切圖像塊作爲鏈接？

我有這個 desktop version

，並與背景這個 mobile version

整個圖像和文本塊必須鏈接到頁面。圖像和文本將由用戶編輯，所以我不認爲這種歪斜是最好的解決方案。

謝謝你的任何想法。使用圖像的響應式設計

2017-07-25 Karolina Volna

+1

https://css-tricks.com/clipping-masking-css/檢查了這一點，但保持記住瀏覽器支持，例如clip-path不支持Edge/IE – godblessstrawberry

+0

感謝您的建議，但我們需要支持所有標準瀏覽器。 –

A

回答

0

是很怪，但我想爲你做的最簡單的方法是使用imagemap

其他你能想象放置在你的形象透明的div，或者如果整個圖像只是一個鏈接，正確的把它放在一個'a'標籤，

如果你想要你的手機和桌面版本鏈接到2個不同的頁面，unse php $ _SERVER或javascript來獲取，例如url或width的屏幕取決於你的方式來改變你的設計

2017-07-25 10:48:37 Neil

+1

感謝您回答尼爾。好的，也許我說的不準確 - 圖片我不認爲img標籤。它也包含背景圖片。 imagemap是否響應？我不這麼認爲。我們項目中的響應方式不僅適用於2個不同的點（桌面，手機）。它也將在桌面和移動版本中進行擴展。所以這些塊不能有靜態區域。你如何想象渲染這些透明的div？它不能只是大矩形。我需要保存形狀。我不需要2個不同的鏈接。 –

+0

@KarolinaVolna可悲的imagemap沒有反應，即使jquery插件可以做到這一點https://github.com/stowball/jQuery-rwdImageMaps，透明的div，你可以，用css之前和之後變換一些很酷的形狀，但我同意它不會是一個真正的解決方案...如果只有6個圖像div和一個白色背景，它會更容易。 – Neil

相關問題