マウスオーバーで画像の一部を表示する

Question

画像が黒く塗りつぶされた「戦争の霧」型の物を持っているが、ユーザが画像の上にマウスを置いてカーソルの周りの領域を露呈させる最良の方法は何ですか？ 。だから、おそらく、画像の上にマウスを置くと、マウスの周りの領域に画像が見えるが、画像の残りの部分はまだ黒くなっているので、画像上にCSSでスタイル設定されたいくつかのレイヤーがあります。

Answer 1

あなただけのこれを行うには、JavaScriptとCSSを使用したい場合：

• マウス位置
• 更新インクルードを得るために、いくつかのJavaScriptを使用して、中央
• に透明穴と黒の画像を作成します。 CSSは、マウスポインタ

あなたは、あなたのイメージは、霧画像の下にあるように確認してくださいすべてが正しくレイヤードであることを確認する必要があります

と霧IMAGに霧画像の位置を設定しますこれがブラウザウィンドウ全体を占めていない場合、eは残りのコンテンツの下にあります。

Answer 2

キャンバスでは、画像の上に部分的に透明なレイヤーを作成できますが、カーソルの近くの領域は完全に透明になります。レイヤーは実際にはキャンバスには存在しませんが、レイヤーを行うためのフレームワークがあります。

HTML/CSSでは、2つのレイヤー、下の画像、上の部分的に透明なPNGを持つ画像の「タイル」を作成できます。ホバーでは、タイルのPNGがdisplay:noneに設定され、下の画像が表示されます。

Answer 3

私はリファレンスとしてこれを残して、将来の訪問者のためので、私は、これは非常にいい質問であることが判明：

$(window).on('load', function() { 
    var 
    ctx = $('#canvas')[0].getContext('2d'), 
    mouse = {x: -100, y: -100}; 

    // fill black 
    ctx.fillStyle = 'black'; 
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); 

    // track mouse 
    $('#canvas').on('mousemove.fog', function (evt) { 
    mouse.x = evt.offsetX; 
    mouse.y = evt.offsetY; 
    }); 

    (function animloop(now) { 
    var 
     frame = webkitRequestAnimationFrame(animloop), // use a polyfill here 
     x = mouse.x, 
     y = mouse.y, 
     r = 10, 
     grad = ctx.createRadialGradient(x, y, 0, x, y, r); 

    grad.addColorStop(0, "rgba(0, 0, 0, 255)"); 
    grad.addColorStop(1, "rgba(0, 0, 0, 0)"); 

    ctx.globalCompositeOperation = 'destination-out'; 
    ctx.fillStyle = grad; 
    ctx.arc(x, y, r, 0, 2 * Math.PI, true); 
    ctx.fill(); 
    }(Date.now())); 
});​ 

デモ：http://jsfiddle.net/RUc5s/1/