Spotlight Effect

Printable View

06-10-2011, 09:42 PM
Arkacaraka

1 Attachment(s)

Spotlight Effect

Simple Spotlight Effect using Jquery-1.4.2
By:Arka caraka

Using jQuery plugin Version 1.4.2.min.js.Generated by the script as a canvas element. Accordingly, the Internet Explorer is, unfortunately, only a square "light box" to Einsatz.1 The size of the spot may be on the options or automatically determined by the size of the graphic. Another option is the layer with the darkening per click, This visible on any browser .

Parameter setting:

spot_auto_val
This factor value of the radius of the spotlight, it is determined if the parameter was spot_radius set to 'auto '. The smaller the value, the greater will be the spot.
Possible values: number

spot_luminosity
This value determines the brightness of the spotlights. The smaller the value, the brighter will be the spot, the clearer and sharper the edges of the circle of light.
Possible values: number> 1004

spot_color
Sets the color of the spotlight and the layer is determined by the darkening. Please do not shortened color information (eg # 000), since the hex value is internally converted to an RGB value!
Possible values: Hexadecimal color code to, for example '# 000000 '

spot_alpha
With this option, the transparency of the spotlight and the layer is determined by the darkening.
Possible values: 0 - 1

spot_switch
If this parameter is active (1 or true), the layer with the darkening per click, one-or ausgefadet.
Possible values: 1, true, 0 or false

Firefox 3.6.x
Chrome 5.x
Safari 5.x
Opera 10.x
Flock 2.x
Internet Explorer 6, 7, 8

View demo at http://spotlightdemo.blogspot.com/

View last improvement at : http://slideprofilpnpm.blogspot.com/2011/06/5if.html

or, Download this demo
06-11-2011, 01:58 AM
jscheuer1

IE 5.5 and up have proprietary style filters that can do that with a circular spotlight. Perhaps you would consider implementing them for those browsers as a part of your script.

For some insight on what's involved, see the Dynamic Drive Image Spotlight effect script:

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

It's for IE only.

It may be of some interest as well that a similar effect can be achieved by superimposing a semi-transparent .png image over whatever you want to lend this effect to. This superimposed image can be made to follow the movement of the mouse. That will work cross browser except for IE 6 and less where .png support is more limited. I believe that can be worked out though using the alpha image loader filter for those browsers.
06-11-2011, 05:07 AM
Arkacaraka

Hey,jscheuer1........
You are very correct, and it's all a frustrating I want to display to all broswer, maybe you can help me?
06-11-2011, 12:21 PM
jscheuer1

Probably. Do you have a specific question?
06-12-2011, 08:15 PM
Arkacaraka

as we know, the spotlight-effect that my show did not work properly on IE browser and the spotlight effect that you show only works well in IE, how techniques to combine these two methods? In order for this effect could appear in all browsers.
06-12-2011, 10:39 PM
jscheuer1

1 Attachment(s)

Do we? The spotlight effect works fine in IE 9 standards mode.

I took the liberty of unpacking the Spot script and altering it slightly:

Attachment 3931

I was a little disappointed to see that browser sniffing was employed. I devised a means test by declaring the canvas variable earlier and then testing for its getContext property instead of $.browser.msie. That worked to allow IE 9 to display the effect If IE 9 was in standards mode as it is given this page:

HTML Code:

<!DOCTYPE html> <html> <head> <title>Standards Compliant Spotlight Demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>  <script type="text/javascript" src="jquery.Spot.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.spot').Spot({ spot_radius: 'auto', spot_auto_val: 2.10, spot_luminosity: 500, spot_color: '#000000', spot_alpha: 0.9, spot_switch: 1 }); }); </script> </head> <body> <img class="spot" src="Tri%20bhuana%20tungga%20dewi.jpg" style="width: 420px; height: 599px;" alt="" /> </body> </html>

Armed with this knowledge I would be inclined to either just wait out the death of IE 8 and less or use IE conditional comments to conditionally use one script or the other.

Edit: Added Later:

While testing this it appears that the packed version of the script doesn't work at all in IE 8 and less. Not even the square spotlight appears. It works OK in IE 9 in IE 9 mode, IE 8 mode and IE 7 mode, but not in the actual IE 8, 7 and 6 browsers.

For what I was saying before about using a .png image, see:

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

Oh, and here's a way to combine the filter approach with the modified jquery.Spot.js script:

http://home.comcast.net/~jscheuer1/side/spotlight/
06-13-2011, 01:34 AM
Arkacaraka

Very good ..!
You really surprised me.
It even works very well in IE 8, I have seen it.
Now is the perfect spotligt
I should like to thank you,... this is really great.
06-13-2011, 10:35 AM
Arkacaraka

In the example that you show as "flashlight DEMO"

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

Interestingly, you use the opposite attributes
of view!
like the white background in view, but black in attribute!
and black text in the display, but white on the attribute.
I think this will be problematic when we use another color!
Does this make the "flashlight DEMO" you, able to perform well in IE and other browsers?

While in the second example, "Standards Compliant Demo Spotlight",

http://home.comcast.net/~jscheuer1/side/spotlight/
It's really as expected.Changes that you do on the script spot.js, have made it perfect.
IE no longer displays a rectangle as a reaction rom mask PNG image.
06-13-2011, 02:46 PM
jscheuer1

Quote:

Originally Posted by Arkacaraka

In the example that you show as "flashlight DEMO"

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

Interestingly, you use the opposite attributes
of view!
like the white background in view, but black in attribute!
and black text in the display, but white on the attribute.
I think this will be problematic when we use another color!

I think you would have to make up a new .png image to accommodate another color, yes. With server side code like PHP and a GD library or similar + client side AJAX, this might be able to be done on the fly. But you could always just make different colored .png images and have them available for certain basic colors.

Quote:

Originally Posted by Arkacaraka

Does this make the "flashlight DEMO" you, able to perform well in IE and other browsers?

Does what? The alpha channel .png image has been fully supported in virtually all browsers except IE since like forever. In IE full support started with version 7. We don't really need to worry about any IE prior to 6, but this code works with IE 5.5 through IE 6 due to its use of the alpha image loader filter for those browsers. Unfortunately in those browsers you cannot click on or select objects illuminated with the flashlight. In all others you can.

Quote:

Originally Posted by Arkacaraka

While in the second example, "Standards Compliant Demo Spotlight",

http://home.comcast.net/~jscheuer1/side/spotlight/
It's really as expected.Changes that you do on the script spot.js, have made it perfect.
IE no longer displays a rectangle as a reaction rom mask PNG image.

The only changes I made to jquery.Spot.js were to unpack it and to declare the canvas variable earlier so that it's getContext property could be the test of whether or not a browser is capable of the effect or not, rather than browser sniffing.

Just unpacking it made it work - sort of (showed the rectangle) in IE 6, 7, and 8. For some reason the packed version was throwing a fatal error in those browsers. The packed version works OK in IE 9 - again sort of, regardless of the mode (IE 9, 7, or 8). But once you put the spotlight2.html page in one of those lesser version IE browsers - say in an actual IE 8 browser, it threw a fatal error and just showed the image with no effect at all.

Changing to a means test from a browser sniffing test allowed it to work in IE 9 standards mode which fully supports canvas and RGBA.

To get it to show the spotlight in IE 8 and less I simply took the Dynamic Drive script and made it a part of a front end that detects IE less than 9 or IE 9 in nonstandard mode and uses the DD script instead.

The two scripts are still separate to a great extent. To truly integrate them, one would need to determine what needs to be set to what in each to achieve a similar effect and set some variables at the beginning of the document ready function that could be used by either script.

I'm also concerned about how the jquery.Spot.js uses class as the selector. Does this mean that multiple images of the same class and/or images with id's or different classes could also be initialized? Probably. If so something more needs to be done with the DD script to give it that capability. Integrating some jQuery methods to it should fit the bill. But it also could have it's methods grafted into the jquery.Spot.js file for those cases when the browser fails the canvas.getContext test. When a browser fails that test, it could be tested for having the image element's filter property. If so the DD scripts methods could then be employed.