0

不規則な (長方形ではない) ボタンを使用してナビゲーションをコーディングしようとしています。エッジが Y 軸上で重なり合っているため、HTML/CSS でこれを行う方法がわかりません。イメージマップを使用できますが、使用したくありません。誰かが私を正しい方向に向けることができますか? ありがとう！（ここに画像リンクを含めました）：

サンプル ナビゲーション イメージ

4

2 に答える 2

0

ここにいくつかのオプションがあります：

  1. 画像マップで単一の画像を使用する
  2. CSS回転変換が適用されているオーバーレイdivを使用します。これらのdivにクリックハンドラーを追加します。
  3. SVGシェイプを使用して、それらにリンクを適用します。例を追加しました。

デモンストレーション： http： //jsfiddle.net/Phu5x/

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<a xlink:href="/svg/index.html">
   <polygon points="15,10  95, 10  85, 30  5, 30"
        style="fill: red; stroke: black;"/>
 </a>
</svg>
于 2012-12-09T19:52:08.850 に答える
0

マウス オーバー効果が必要な場合は、イメージ マップを含む 1 つの透明な PNG 画像を試してください。<area>古い IE のサポートが必要な場合は、要素にイベント ハンドラーを配置します。

于 2012-12-09T20:09:23.880 に答える