質問: Webページ上で画像にカーソルを当てた際(マウスオーバーした際)に画像全体の透明度を操作するのではなく、画像の一部分を範囲指定して透明度を操作したり効果を与えたりすることはできるのでしょうか。 具体的にはWebページ上の画像でカーソルを当てた半径or直径〇〇pxのみを円形で透明化したいと思っています。 いろいろググってみたのですが、マウスオーバーした際に画像"**全体**"に効果を与えるCSSやJavaScript(jQuery)のコードはいろいろ分かったのですが、範囲指定のやり方が分からず・・・。(そもそも可能なのかも分からず・・・。) もし知見のある方がいらっしゃったらヒント等でもありがたいので、ご教示頂ければ幸いです。。。
回答: HTML5から追加されたCanvasでの実装を検討してみましょう。 例えば、Canvas上で透明化させたい画像を表示します。 JavaScriptでは要素からのマウスの相対位置を取得するメソッドがあるので、それらを使い、Canvas上の位置を把握します。 透明化と言うより、カバーする方が早いかもしれないので、 Canvasに描画するイメージでマウスの位置透かしたいイメージの相対位置を描画してみてはどうでしょうか? これらは恐らく足し算・引き算・掛け算で十分可能な範囲だと思いますよ