2017-07-25 3 views
-1

私は応答性のあるイメージマップのようなもので問題を解決していますが、どのソリューションが最適かわかりません。異なる斜めの画像ブロックをリンクとして作るには?

私はこの desktop version

を持っており、バックグラウンドでこの mobile version

全体画像とテキストブロックは、ページへのリンクである必要があります。画像とテキストはユーザーによって編集されるので、私はスキューが最良の解決策ではないと思います。

ありがとうございます。応答性の設計のための画像を使用して

+1

https://css-tricks.com/clipping-masking-css/これをチェックしてください例えば、クリップパスはEdge/IEでサポートされていません – godblessstrawberry

+0

お勧めしますが、すべての標準ブラウザをサポートする必要があります。 –

答えて

0

は奇妙なの一種であるが、私はあなたがそれを行うための最も簡単な方法は、あなたのイメージの上に配置される透明divを想像する、またはすることができ、他のimagemap

を使用していると思う全体の画像であればあなたのモバイルとデスクトップのバージョンを2つの異なるページにリンクさせる場合は、php $ _SERVERまたはjavascriptを使用してURLや幅などを取得するには、「a」タグに入れてください。

あなたのデザインを変更する方法に応じて画面の表示

+1

答えてくれてありがとうNeil。 私は不正確な言い方をしているのかもしれません - 画像では私はimgタグとは思わない。それは背景イメージも含んでいます。 イメージマップは応答しますか?私はそうは思わない。私たちのプロジェクトにおける反応的なやり方は、2つのブレークポイント(デスクトップ、モバイル)だけではありません。それはデスクトップ版とモバイル版でも拡張されます。したがって、これらのブロックは静的領域を持つことはできません。 これらの透明なdivをレンダリングするとどう思いますか?大きな四角形であってはなりません。私は形状を保持する必要があります。 2つの異なるリンクは必要ありません。 –

+0

@KarolinaVolna悲しいことに、たとえjqueryアドオンがhttps://github.com/stowball/jQuery-rwdImageMapsを使っても悲しいことにimagemapは反応しません。透明なdivの場合は、後にCSSを使用して変換してクールな形にしてくださいそれは本当の修正ではないことに同意してください...もしあなたが6つのイメージ部と白い背景を持っていれば、それは簡単になります。 – Neil

関連する問題