Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Flashlight effect

  1. #1
    Join Date
    Jan 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Flashlight effect

    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.

  2. #2
    Join Date
    May 2007
    Location
    Canada
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  3. #3
    Join Date
    Jan 2008
    Location
    Cincinnati
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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:

    Code:
    <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....

  4. #4
    Join Date
    Jan 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Jan 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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...

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by mohaakilla51 View Post
    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.
    Last edited by jscheuer1; 01-11-2008 at 08:54 PM. Reason: obvious
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    May 2007
    Location
    Canada
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by mohaakilla51 View Post
    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.

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •