1

基本的に、たとえば 5 人の白黒写真を含むページを作成したいと考えています。さて、それぞれの人にカーソルを合わせると、その人が点灯し、その横に情報のダイアログが表示されるようにします。

誰でもこれを行う方法を教えてもらえますか?

前もって感謝します。:)

4

3 に答える 3

3

画像マップを使用するか、各人の上に「非表示」のdivを作成します。どちらにも長所と短所がありますが、イメージマップは必要なもののために特別に作成されました。

「ライトアップ」するには、.png画像（invisible divの：hover上）に、その人物を切り抜いた透明な背景をオーバーレイするだけですが、「ライト」に編集します。

于 2012-11-13T10:23:56.420 に答える
2

html：

 <a href="#" class="highlightit"><img border="0" src="http://twitter.github.com/bootstrap/assets/img/bootstrap-mdo-sfmoma-03.jpg"> 
   <span> something </span>
 </a>

css：

.highlightit img{
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
 }

.highlightit:hover img{
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
  -moz-opacity: 1;
  opacity: 1;
 }

.highlightit:hover span{
  display:block;
}


.highlightit span{
  font-size:20px;
  color:white;
  background:black;
  text-decoration:none;
  display:none;
  width:100%;
  padding:10px;
  position:relative;
  margin-top:-20px;
}

プレビューについては、このフィドルを確認してくださいhttp://jsfiddle.net/wandarkaf/cNC5G/。

于 2012-11-13T10:38:59.100 に答える
1

2つの可能な方法：

  1. CSSスプライト

    • 元の画像と、それぞれの異なるホバー状態（おそらく垂直に積み重ねられた）の画像を含む1つの大きな画像を作成します。

    • 元の画像（または図など）だけを表示するサイズのDIVの背景画像として画像を配置します。

    • DIV内のいくつかのリンクを目的の場所に絶対に配置します（コンテナDIVが比較的配置されていることを確認してください）。

    • リンクの1つにカーソルを合わせると、画像の背景位置を調整して、正しい画像を表示し、テキストダイアログを含む非表示のDIV / SPAN/WHATEVERを表示します。

  2. Javascript。

    • 上記と同じ方法ですが、ホバー/マウスなどで呼び出される個別の画像を使用して、非表示のダイアログを再度呼び出して表示します。この目的のために利用可能なツールチッププラグインがたくさんあります。
于 2012-11-13T10:24:54.683 に答える