0

タイトルが十分に説明されていない場合は申し訳ありませんが、私の質問を表すのに最適なタイトルです。

だから私は2つのdivを持っています:

.div-arrow
{
    position: absolute;
    float: left;
    cursor: pointer;
    display:block;
    width: 136px;
    height: 54px;
    vertical-align: middle;
    border-radius: 4px;
    background: url(ImagePathHere) no-repeat scroll 0px 0px transparent;
    zoom: 50%;
}

.div-diamond
{
    position: absolute;
    float: left;
    cursor: pointer;
    display: block;
    width: 83px;
    height: 54px;
    vertical-align: middle;
    border-radius: 4px;
    background: url(ImagePathHere) no-repeat scroll -272px 0px transparent;
    zoom: 50%;
}

そして、それらを使用して次のようなレイアウトを作成します: http://i.stack.imgur.com/htFRd.png

赤いマークの場所をクリックすると、クリックしているように見えるひし形ではなく、緑のひし形がアクティブになります。クリックしているように見えるdivを実際にクリックできるように、画像/ divの見えないセクションをどのようにトリミングするのか疑問に思っていました。

4

1 に答える 1

2

Web ページのすべての要素は基本的にブロックです。つまり、円やひし形などの外観を作成することはできますが、実際には 4 面のブロック要素です。

あなたの問題については、イメージマップを使用することを検討できます：

http://www.w3.org/TR/html401/struct/objects.html

または、HTML5 CANVAS メソッドを使用することもできます。

https://developer.mozilla.org/en-US/docs/HTML/Canvas

于 2013-03-28T17:09:49.860 に答える