1

私は狭い画像を持っているとしましょう

幅200ピクセル、高さ900ピクセル

画像の特定のセクションにカーソルを合わせると、その横にdivを表示するにはどうすればよいですか？

4

5 に答える 5

4

map要素を使用して画像の領域を定義します。長方形、円、ポリゴンなどのさまざまな形状を使用できるため、基本的には複雑な領域をマップできます。

たとえば、以下の例では、画像の左右の部分をマッピングします

HTML：

<html><body>
<img src="https://www.google.com/images/srpr/logo3w.png" usemap="gmap"/>

<map name="gmap">
  <area id="left" shape="rect" coords="0,0,135,95"  />
  <area id="right" shape="rect" coords="135,0,275,95"  />
</map>

</body></html>​

JavaScript（jQueryを使用）：

$('#left').hover(function(){
    alert("left")
})

$('#right').hover(function(){
    alert("right")
})

実際の動作をご覧くださいhttp://jsfiddle.net/anuraguniyal/GtMXk/3/

</ p>

于 2012-04-19T15:55:28.213 に答える
1

CSS で画像を配置してから、jquery .hover() と .fade() または .show() / .hide() を使用できます

于 2012-04-19T15:59:04.733 に答える
1

position:absoluteand/orを使用して画像に div を配置し、その上にイベントz-index:100をバインドします。.hover()

于 2012-04-19T15:53:43.083 に答える
1

マウスの位置を取得し、画像の位置を取得し、差を計算して、画像のどのセクションにいるのかを判断します。

于 2012-04-19T15:54:13.160 に答える
0

このプラグインをチェックアウトする必要があります。

http://plugins.jquery.com/project/maphilight

そしてデモ：

http://davidlynch.org/js/maphilight/docs/demo_usa.html

そこからいくつかのコードを使用できる場合があります。

于 2012-04-19T16:04:15.917 に答える