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

Thread: The Spotlight Effect on a Div.

  1. #1
    Join Date
    Nov 2007
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default The Spotlight Effect on a Div.

    http://dynamicdrive.com/dynamicindex4/spotlight.htm

    is there any way to blend this effect with a div?

  2. #2
    Join Date
    Aug 2004
    Posts
    9,893
    Thanks
    3
    Thanked 966 Times in 954 Posts
    Blog Entries
    15

    Default

    Speaking in general terms, yes, as long as the DIV as a defined layout (ie: width/ height defined). There's a good reference page on the Light filter of IE here: http://www.javascriptkit.com/filters/light.shtml

    Are you asking basically for the exact same effect as in the Spotlight effect script, but instead of an image, substituted with a DIV?

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,994
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Spot Text</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    #odiv {
    color:#000;
    background-color:#fff; 
    width:140px;
    }
    </style>
    <!--[if gte IE 5.5]><style type="text/css">
    #odiv {
    cursor:hand;
    filter:progid:DXImageTransform.Microsoft.Light();
    }
    </style>
    <script type="text/javascript">
    
    /* SpotLight - adapted from:
     * Image spotlight effect- By Erik F (die_schlampe@hotmail.com)
     * Code enhancements by Dynamicdrive.com
     * Visit http://www.dynamicdrive.com for this script */
    
    function fnInit(){
    
    var s = 50; // the size of the spotlight
    var vp = 5; // the visibility percent of the area
    var startx = 0; // the top position of your sportlight into the area (on start)
    var starty = 0; // the left position of your spotlight into the area (on start)
    
    /////////////////////// Stop Editing ///////////////////////
    
    var moveIt=function(){
       var x = window.event.x
       var y = window.event.y
       odiv.filters[0].moveLight(0,x,y,s,1);
    };
       odiv.filters[0].addPoint(startx,starty,s,255,255,255,100);
       odiv.filters[0].addAmbient(255,255,255,vp);
       odiv.attachEvent( "onmousemove", moveIt);
    }
    if( document.documentElement.filters && typeof window.attachEvent != "undefined" )
        window.attachEvent( "onload", fnInit );
    </script><![endif]-->
    </head>
    <body>
    <div id="odiv">
    This text is highlighted by a white spotlight.
    This text is highlighted by a white spotlight.
    This text is highlighted by a white spotlight.
    This text is highlighted by a white spotlight.
    This text is highlighted by a white spotlight.
    This text is highlighted by a white spotlight.
    </div>
    </body>
    </html>
    Edit: Due to the loss of anti-aliasing of text (Clear Type) in IE 7 with filters, this more involved method may be preferred:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>SpotLight Text</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    body {
    color:#fff;
    background-color:#000;
    }
    #outer, #odiv, #text {
    color:#000;
    background-color:#fff; 
    width:265px;
    }
    #text {
    padding:1ex;
    text-indent:1em;
    text-align:justify;
    }
    </style>
    <!--[if gte IE 5.5]><style type="text/css">
    #outer, #odiv {
    height:expression(text.offsetHeight+'px');
    width:expression(text.offsetWidth+'px');
    }
    #outer {
    position:relative;
    }
    #text {
    position:absolute;
    z-index:10;
    height:auto;
    background-color:transparent;
    cursor:hand;
    }
    #odiv {
    position:absolute;
    filter:progid:DXImageTransform.Microsoft.Light();
    }
    </style>
    <script type="text/javascript">
    
    /* spotlight in IE 5.5 and above only - adapted from:
     * Image spotlight in IE 5.5 and above only effect- By Erik F (die_schlampe@hotmail.com)
     * Code enhancements by Dynamicdrive.com
     * Visit http://www.dynamicdrive.com for this script */
    
    function fnInit(){
    
    var s = 50; // the size of the spotlight in IE 5.5 and above only
    var vp = 0; // the visibility percent of the area
    var startx = 0; // the top position of your sportlight into the area (on start)
    var starty = 0; // the left position of your spotlight in IE 5.5 and above only into the area (on start)
    
    /////////////////////// Stop Editing ///////////////////////
    
    var moveIt=function(){
       var x = window.event.x
       var y = window.event.y
       odiv.filters[0].moveLight(0,x,y,s,1);
    };
       odiv.filters[0].addPoint(startx,starty,s,255,255,255,100);
       odiv.filters[0].addAmbient(255,255,255,vp);
       text.attachEvent( "onmousemove", moveIt);
    }
    if( document.documentElement.filters && typeof window.attachEvent != "undefined" )
        window.attachEvent( "onload", fnInit );
    </script><![endif]-->
    </head>
    <body>
    <h2>SpotLight Text</h2>
    <div id="outer">
    <div id="text">
    This text is highlighted by a white spotlight in IE 5.5 and above only.
    This text is highlighted by a white spotlight in IE 5.5 and above only.
    This text is highlighted by a white spotlight in IE 5.5 and above only.
    This text is highlighted by a white spotlight in IE 5.5 and above only.
    This text is highlighted by a white spotlight in IE 5.5 and above only.
    This text is highlighted by a white spotlight in IE 5.5 and above only.
    </div>
    <div id="odiv">
    </div>
    </div>
    </body>
    </html>
    Last edited by jscheuer1; 12-02-2007 at 05:17 PM. Reason: add info for IE 7
    - John
    ________________________

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

  4. #4
    Join Date
    Nov 2007
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    uhmm.. I REALLY REALLY THANK YOU FOR THAT! thanks.. uhm, i've got another question though..

    I want to insert the effect in 2 or more divs.. do i need to replace this?

    Code:
       odiv.filters[0].moveLight(0,x,y,s,1);
    div1 name = odiv | div2 name = odiv2

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,994
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    I've moved the IE specific styles to the script for ease of use with multiple divisions. The ordinary styles must remain to support browsers which cannot apply the effect. Hopefully they are self evident. If not, brush up on your css or ask questions. The initialization for each set of outer, odiv, and text divisions must now be spelled out, see the red section in the below. It must remain in the same position within the script that it currently occupies, but additional init lines may be added there as needed.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>SpotLight Text</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    body {
    color:#fff;
    background-color:#000;
    }
    #outer, #odiv, #text {
    color:#000;
    background-color:#fff; 
    width:265px;
    }
    #text, #text2 {
    padding:1ex;
    text-indent:1em;
    text-align:justify;
    }
    #outer2, #odiv2, #text2 {
    color:#000;
    background-color:#fff; 
    width:275px;
    }
    </style>
    <!--[if gte IE 5.5]>
    <script type="text/javascript">
    
    /* spotlight in IE 5.5 and above only - adapted from:
     * Image spotlight in IE 5.5 and above only effect- By Erik F (die_schlampe@hotmail.com)
     * Code enhancements by Dynamicdrive.com
     * Visit http://www.dynamicdrive.com for this script */
    
    function fnInit(){
    
    var s = 50; // the size of the spotlight in IE 5.5 and above only
    var vp = 0; // the visibility percent of the area
    var startx = 0; // the top position of your sportlight into the area (on start)
    var starty = 0; // the left position of your spotlight in IE 5.5 and above only into the area (on start)
    
    /////////////////////// Stop Editing ///////////////////////
    
    var moveIt=function(){
       this.filters[0].moveLight(0,window.event.x,window.event.y,s,1);
    };
    
    var init=function(o, d, t){
       o.style.height=d.style.height=t.offsetHeight+'px';
       o.style.width=d.style.width=t.offsetWidth+'px';
       o.style.position='relative';
       with(t.style){
       position='absolute';
       zIndex='10';
       height='auto';
       backgroundColor='transparent';
       cursor='hand';
       }
       with(d.style){
       position='absolute';
       filter='progid:DXImageTransform.Microsoft.Light()';
       }
       d.filters[0].addPoint(startx,starty,s,255,255,255,100);
       d.filters[0].addAmbient(255,255,255,vp);
       t.attachEvent( "onmousemove", function(){moveIt.apply(d);});
    };
       init(outer, odiv, text);
       init(outer2, odiv2, text2);
    }
    if( document.documentElement.filters && typeof window.attachEvent != "undefined" )
        window.attachEvent( "onload", fnInit );
    </script><![endif]-->
    </head>
    <body>
    <div>
    
    <h2>SpotLight Text</h2>
    <div id="outer">
    <div id="text">
    This text is highlighted by a white spotlight in IE 5.5 and above only.
    This text is highlighted by a white spotlight in IE 5.5 and above only.
    This text is highlighted by a white spotlight in IE 5.5 and above only.
    This text is highlighted by a white spotlight in IE 5.5 and above only.
    This text is highlighted by a white spotlight in IE 5.5 and above only.
    This text is highlighted by a white spotlight in IE 5.5 and above only.
    </div>
    <div id="odiv">
    </div>
    </div>
    <br>
    <div id="outer2">
    <div id="text2">
    This other text is also highlighted by a white spotlight in IE 5.5 and above only.
    This other text is also highlighted by a white spotlight in IE 5.5 and above only.
    This other text is also highlighted by a white spotlight in IE 5.5 and above only.
    This other text is also highlighted by a white spotlight in IE 5.5 and above only.
    This other text is also highlighted by a white spotlight in IE 5.5 and above only.
    This other text is also highlighted by a white spotlight in IE 5.5 and above only.
    </div>
    <div id="odiv2">
    </div>
    </div>
    
    </div>
    </body>
    </html>
    - John
    ________________________

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

  6. #6
    Join Date
    Nov 2007
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    uhh.. the script is working but, the last scripts wont work if the background is set to black and the text to white.

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,994
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    With a black background and a white text, if you 'shine' a white spotlight on that, you will have white text on a white background in the spotlight area.

    There may be ways to change the colors around so that a different colored spotlight could be used, I will have to look into that.

    Your post implies that this actually works with some other script. If so, which one?
    - John
    ________________________

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

  8. #8
    Join Date
    Nov 2007
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    the first script works on everything.. images, white texts, etc. but the problem is, you can't create another div inside it that has similar effect to it.. The others do but they don't give the effect to nonblack elements..

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,994
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    The trouble with the first version is that it doesn't fix the loss of Clear Type in IE 7. However, if you use bold text, it is hardly noticeable. So, with that in mind, here is a version of the first script that is multi-use:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Spot Text</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    #odiv {
    color:#fff;
    background-color:#000; 
    width:140px;
    padding:1ex;
    }
    #odiv2 {
    color:#000;
    background-color:#fff; 
    width:180px;
    padding:1ex;
    text-indent:1em;
    }
    .outer {
    font-weight:bold;
    }
    </style>
    <!--[if gte IE 5.5]><style type="text/css">
    .outer div {
    cursor:hand;
    filter:progid:DXImageTransform.Microsoft.Light();
    position:absolute;
    }
    .outer {
    position:relative;
    width:expression(this.firstChild.offsetWidth+'px');
    height:expression(this.firstChild.offsetHeight+'px');
    }
    </style><![endif]-->
    <script type="text/javascript">
    
    /* SpotLight - adapted from:
     * Image spotlight effect- By Erik F (die_schlampe@hotmail.com)
     * Code enhancements by Dynamicdrive.com
     * Visit http://www.dynamicdrive.com for this script */
    
    function fnInit(){
    
    var divs=[odiv, odiv2]; // set id's of divisions
    
    var s = 50; // the size of the spotlight
    var vp = 5; // the visibility percent of the area
    var startx = 0; // the top position of your spotlight into the area (on start)
    var starty = 0; // the left position of your spotlight into the area (on start)
    
    /////////////////////// Stop Editing ///////////////////////
    
    var moveIt=function(){
       this.filters[0].moveLight(0,window.event.x,window.event.y,s,1);
    };
    var init=function(d){
       d.filters[0].addPoint(startx,starty,s,255,255,255,100);
       d.filters[0].addAmbient(255,255,255,vp);
       d.attachEvent( "onmousemove", function(){moveIt.apply(d);});
    }
    for (var i = divs.length-1; i > -1; --i)
    init(divs[i]);
    }
    if( document.documentElement.filters && typeof window.attachEvent != "undefined" )
        window.attachEvent( "onload", fnInit );
    </script>
    </head>
    <body>
    <div>
    <div class="outer">
    <div id="odiv">
    This text is highlighted by a white spotlight.
    This text is highlighted by a white spotlight.
    This text is highlighted by a white spotlight.
    This text is highlighted by a white spotlight.
    This text is highlighted by a white spotlight.
    This text is highlighted by a white spotlight.
    </div>
    </div>
    <br>
    <div class="outer">
    <div id="odiv2">
    This other text is also highlighted by a white spotlight in IE 5.5 and above only.
    This other text is also highlighted by a white spotlight in IE 5.5 and above only.
    This other text is also highlighted by a white spotlight in IE 5.5 and above only.
    This other text is also highlighted by a white spotlight in IE 5.5 and above only.
    This other text is also highlighted by a white spotlight in IE 5.5 and above only.
    This other text is also highlighted by a white spotlight in IE 5.5 and above only.
    </div>
    </div>
    </div>
    </body>
    </html>
    - John
    ________________________

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

  10. #10
    Join Date
    Nov 2007
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    i found the error at the first code. you can try it by yourself. the script won't work if the element has a position(i.e: position:relative).

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
  •