Flashlight effect

[mohaakilla51]

OK, here's the deal. I am trying to create a script that pretty much turns your mouse into a flashlight. The general way I am doing it is this:

All text on my page is black, with a black background.
The z-index on the text is 3 and on the background is 1.
I created an image that was a white circle with a fuzzy border (thus looking like a flashlight), that was placed in a <div> with a z-index of one, so that the text will show up, because the white is under the text but over the background. So, my question is this. I am not sure if this is done in CSS or JavaScript or both, but how would I go about forcing the image to move with the mouse, without processing the onMouseMove event for every pixel.

[pman]

You can do it easily with CSS. Just use the custom image that you have as the mouse pointer

cursor: url(URL to the image);

You can use any image type, but I don't think IE will support all of them. Just use .cur format and you should be fine.

[emminar]

And just a note, people can easily cheat by highlighting the text...

Here's a simple javascript that will keep the average person from cheating:

<script type="text/javascript">

/***********************************************
* Disable select-text script- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//form tags to omit in NS6+:
var omitformtags=["input", "textarea", "select"]

omitformtags=omitformtags.join("|")

function disableselect(e){
if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
return false
}

function reEnable(){
return true
}

if (typeof document.onselectstart!="undefined")
document.onselectstart=new Function ("return false")
else{
document.onmousedown=disableselect
document.onmouseup=reEnable
}

</script>

All an experienced person has to do though is disable JS....

[mohaakilla51]

the cursor won't work, because it will be above the text, thus it will just cover up the text anyway.

[jscheuer1]

Tracking the mouse via the document.onmousemove event isn't really such a bad thing, and could work out well for this.

It's an accessibility nightmare though, that black text on a black background. You should make it so that, if javascript is disabled, or document.images is unavailable, or the particular image doesn't load, that the background is white.

[jscheuer1]

Here's a demo:

http://home.comcast.net/~jscheuer1/side/flashlight/

[mohaakilla51]

theres no image for the flashlight in the example, but I understand what you are saying. My problem with the onMouseMove event is that it does it everytime the mouse moves a single pixel, and thus Might not run on slower computers...

[jscheuer1]

theres no image for the flashlight in the example

Huh? The server that provides my 'free' personal pages isn't always the fastest at serving content or images, try again. Also, I will probably soon be updating the code to prevent added scollbars in certain situations, in most browsers.

Edit: You may have to refresh the page to get the new code.

but I understand what you are saying. My problem with the onMouseMove event is that it does it everytime the mouse moves a single pixel, and thus Might not run on slower computers...

They would have to be pretty darn slow, as the calculations for this are very simple.

Edit: A css positioning solution might be possible using the hover pseudo class, this would get somewhat complicated in IE 6 and less. In any case though, the CPU would still need to perform the math, so it wouldn't be all that much easier, if at all on a slow computer than the onmousemove method is anyway.

[pman]

the cursor won't work, because it will be above the text, thus it will just cover up the text anyway.

If you have an image in .png format, I think it will be fine. But that way, IE(the best browser ) will not present it well, since IE doesn't support .png format.

But I do remember seeing javascript suggestion in this forum that can make IE work with .png format. Never tried it though.

[jscheuer1]

The .png format works fine in IE 7 and also will in later IE versions, and it can be made to work with IE 5.5 through IE 6 using the AlphaImageLoader filter, as is done in my example code.