Highlighting parts of the image on hover

Question

What is the best way to use the “fog of war” type when the image is obscured, but then when the mouse user over the image detects an area around the cursor. Therefore, there is probably some layer created using CSS over the image, which, as the mouse user, becomes transparent, so the image can be seen in the area around the mouse, but the rest of the image is still darkened.

Answer 1

If you just want to use javascript and css for this:

• Create a black image with a transparent hole in the middle.
• Use some javascript to get the mouse position.
• Update css to set the position of the foggy image to the mouse pointer

You will need to make sure that everything is correctly laid out so that your image is under the foggy image and the fog image is under the rest of the content if it does not occupy the entire browser window.

Answer 2

I found this to be a very good question, so for future visitors I will leave this as a link:

$(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())); });​ 

demo: http://jsfiddle.net/RUc5s/1/

Answer 3

On the canvas, you can make a layer on top of the transparent image, but the area next to the cursor will be completely transparent. Layers do not actually exist on the canvas, but there are frames that allow you to create layers.

on HTML / CSS you can make a “tile” of an image that has 2 layers, the image below and the partially transparent PNG above. When you hover the PNG for the tile, it is set to display:none to open the picture.