PDA

View Full Version : The Spotlight Effect on a Div.



lordjeremiahs
12-02-2007, 07:29 AM
http://dynamicdrive.com/dynamicindex4/spotlight.htm

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

ddadmin
12-02-2007, 10:25 AM
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?

jscheuer1
12-02-2007, 03:38 PM
<!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>

Due to the loss of anti-aliasing of text (Clear Type) in IE 7 with filters, this more involved method may be preferred:


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

lordjeremiahs
12-03-2007, 12:06 PM
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?


odiv.filters[0].moveLight(0,x,y,s,1);

div1 name = odiv | div2 name = odiv2

jscheuer1
12-03-2007, 04:39 PM
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.


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

lordjeremiahs
12-13-2007, 08:46 PM
uhh.. the script is working but, the last scripts wont work if the background is set to black and the text to white.

jscheuer1
12-13-2007, 10:10 PM
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?

lordjeremiahs
12-14-2007, 05:19 AM
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..

jscheuer1
12-14-2007, 08:58 AM
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:


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

lordjeremiahs
12-14-2007, 11:55 AM
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).

jscheuer1
12-14-2007, 12:11 PM
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).

I don't see how that could matter all that much, as a container could be used to position it. In any case, the most recent script I've just put forth, how's that working for you?