0

左から右に「扇形」になっているさまざまな色のバーの非常にシンプルな画像があります。これは、ここのチョコバーに少し似ています。

http://www.lifeafterbagels.com/blog/wp-content/uploads/2012/05/Fanned-Bars.jpg

各バーをツールチップの「ポップアップ」付きの個別のボタンに変えたいのですが、カーソルをボタンの上に置くと色が変わります。この画像マップに非常によく似ています：

http://winstonwolf.pl/clickable-maps/europe.html

マップのソースコードを見ましたが、あまり役に立ちませんが、このフォーラムで検索すると、「クリック可能」になる領域を決定するためにx座標とy座標を使用する必要があるようです。これは正しいです？

2つの画像間のトランジションを作成できるコードを見つけました。これはすばらしいことですが、画像が正方形のdiv内の単純な正方形でない場合、問題が発生します。これは、単純な遷移のコードです。

jQuery(document).ready(function(){

jQuery("img.a").hover(
function() {
jQuery(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
jQuery(this).stop().animate({"opacity": "1"}, "slow");
});

});

およびCSS：

![div.fadehover {
    position:relative;
    }

img.a {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    }

img.b {
    position: absolute;
    left: 0;
    top: 0;
    }][2]

私を正しい方向に向けるための助けをいただければ幸いです。

ありがとう

J

4

1 に答える 1

1

コメントを詳しく説明すると、この JS フィドルは、画像を回転させてクリック/ホバー イベントを設定する方法である可能性があります。

http://jsfiddle.net/pSPX6/

このようにすると、自分でマウス座標を取得する必要がなくなります。jQuery/JavaScript に並べ替えてもらうだけです。:)

ツールチップについては、ホバー イベントで指定されたパラメーターに基づいていつでも配置できます。このイベントに渡されるパラメーターには、ツールチップの配置に使用できるマウスの x 座標と y 座標が含まれている必要があります。私が使用したホバー イベントの詳細については、jQuery のドキュメントを参照してください: http://api.jquery.com/hover/

お役に立てれば！

もっと明確にしたい場合はお知らせください！

于 2012-06-18T15:26:50.993 に答える