2

さて、イメージ マップを作成する別の軽量な方法があるかどうか疑問に思っていました。

基本的に、私はこの画像を撮りたいです：

そして、ダイアグラムのセクションにカーソルを合わせると、このように点灯します (私はフォトショップでモックアップしました):

他のセクション (まだ名前を付けていません) でも同じことができるはずです。また、後で JavaScript を使用して、それらのセクションの後ろからスライド リンクを表示できるようにしたいと考えています (現在、その方法を大まかに知っているので、それで問題ありません)。

誰か提案はありますか？何を検索するかについての一般的な方向性は素晴らしいでしょう。

4

4 に答える 4

2

円は CSS で簡単に作成できます。次のようなものから始めることができます：

width: 140px;
height: 140px;
background: rgba(255, 0, 0, 0.3);
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;

フィドル

それが役立つことを願っています。

于 2013-10-18T10:09:46.437 に答える
1

真ん中に白い形を作るのは難しいですが、簡単な方法を試してみてください。

http://jsfiddle.net/w8zTz/

3つとdivいくつかのcssのみ:

HTML

<div class="rojo"></div>
<div class="azul"></div>
<div class="amar"></div>

CSS

div {width:100px; height:100px; border-radius:100px; position:absolute; opacity:0.5;}
.rojo {background:red; top:0; left:30px;}
.azul {background:cornflowerblue; top:60px; left:0;}
.amar {background:gold; top:60px; left:70px;}
div:hover {opacity:1; z-index:-1}

(Z-index は、div を他の背後にスタックし、透明度に到達するためのものです)。

お役に立てれば ：）

于 2013-10-18T10:22:25.333 に答える