2

添付のように、ウェブサイトで奇妙な形のメニューを作成するには、どのようなアプローチを使用しますか? 円の各部分は個別のリンクである必要があります。マウスのホバリングは、特に中央付近でかなり正確になるはずです。(絶対的な 20 ピクセルの中央は、100% 正確であることが不可能である場合、まったくリンクではない可能性があります)

ここに画像の説明を入力

http://www.vanityclaire.com/形状は重なっています が、メニューは長方形でできており、少し不正行為が行われています。ただし、私の場合、オーバーラップの量が多すぎて、そのような手法を使用できません。フラッシュを使用する以外に、ブラウザ/デバイスと互換性のある方法でそれを行う機会はありますか?

4

3 に答える 3

4

実際には、CSS3 を使用してそれを行うことができます - 私のデモを参照してください: http://dabblet.com/gist/3116939 //

EDIT：IE9でも動作するバージョン http://dabblet.com/gist/3117278

.pieアイデアは、「スライス」を含む div を持つことです

<ul class="pie">
    <li class="slice" id="s1">
        <a class="slice-contents" href="#slice1"></a>
    </li>
    <li class="slice" id="s2">
        <a class="slice-contents" href="#slice2"></a>
    </li>
<!-- and so on -->
</div>

を使用してパイをディスクにしますborder-radius: 50%;

各スライスをゆがめたり回転させたりします。スライスの内容を、歪んでいない長方形の形状に戻し (これは、スライスにテキストを表示したい場合にも役立ちます)、背景を設定します。

于 2012-07-15T12:30:44.710 に答える
0

SVGはそれを行うことができます。ただし、古いブラウザでは利用できません。

于 2012-07-15T10:58:54.483 に答える
0

イメージ マップまたは SVG (フォールバック / ポリフィル付き)を試すことができます。

于 2012-07-15T11:00:15.033 に答える