javascript - 画像に対する jQuery ヒット テスト

Question

5 つの星の固定サイズの画像が 1 つあります (各星も固定幅です)。使用状況が 5 つの星のそれぞれの上にあるので、追跡して対応したいと思います。

私はいくつかのグーグルを実行しましたが、JavaScript/jQuery でこれにアプローチする明確な方法が見つかりませんでした。マウス座標を取得するための API があることは知っていますが、画像内の座標を取得するにはどうすればよいですか?

ホバーされている画像に関連するマウス座標を取得するためのヒントやリンクはありますか?

Answer 1

おそらく次のようなものです（最適化できます。急いだだけです）：

Javascript

var NUMBER_STARS = 5
$("img").click(function(e){
    var left = e.pageX-$(this).offset().left;
    var selected_stars = 0;
    for(var i = 0; i < NUMBER_STARS; i++){
        if($(this).width() / NUMBER_STARS * i < left){
            selected_stars++;
        }
    }
    alert(selected_stars);
});

カーソル用のちょっとした CSS: img{ width: 300px; カーソル: ポインタ; }

HTML

<img src="http://i.imgur.com/CwkF2Hr.jpg" />

jsfiddle: http://jsfiddle.net/wp7sg/1/