| Web Menus |
Expand Menu Studio
*NEW* Construct and maintain multi-level menus with this complete menu solution. Includes a menu editor and 50 menu design templates.
Read More...
Mercury Buttons
Dynamically build graphical web buttons and tabs in just minutes. No images required!
Read More...
Fission Menu
Quickly turn a single image into a stylish themed panel of web buttons with the minimum of effort!
Read More...
eXpand
The classic 2-level menu applet. Dynamically expand sub-menus as you move over top-level menus.
Read More...
|
| Banners |
Spotlight Banner
Create fantastic eye-catching lighting effects with the Spotlight applet.
Read More...
|
| Security |
Abstract e-mail
Abstract offers a truly simple solution to protecting e-mail addresses on your site.
Read More...
|
|
|
 | 2. Image | |
2.1 Loading An Image Spotlight has been designed to be used with a single image. You need to inform the Spotlight applet of your image's location through the PicImage parameter. The following example shows a sample PicImage parameter:
| |  | <applet code="WibbleSpotlight.class" height=174 width=396>
<param name="PicImage" value="spotex.gif"> <param name="PicDarkness" value="35">
<b>This page requires a java-capable browser</b> </applet>
|  |
| |
The PicImage parameter is simply the name of your image file. We recommend placing your image file in the same folder as the Spotlight applet, so you would normally not prefix this image name with a path.
Any JPG, GIF or BMP image file can be used. However, the main part of the image filename must not exceed 8 characters.
For the best results, you should also set the applet's Width and Height parameters to the same dimensions as the image you are using.
Note: When using the PicZoom parameter to magnify your image, you will also need to double the applet Width and Height parameters.
If you're not sure of your image's dimensions, load it up in a picture editing program (like Microsoft Paint or Paint Shop Pro) and take a look at the picture properties. Alternatively, if you are using Windows XP, simply right-click on the picture in Windows Explorer, select the 'Properties' menu option, and then click on the 'Summary' tab to see the dimensions.
2.2 Darkening A darkness filter can be automatically applied to the image you are using. This is useful if you do not have a picture editing program or you simply wish to experiment with different darkness levels.
The darkness filter can be adjusted through the PicDarkness parameter. For best results, we recommend a value in the range 30-35:
| |  | <applet code="WibbleSpotlight.class" height=174 width=396>
<param name="PicImage" value="spotex.gif"> <param name="PicDarkness" value="35">
<b>This page requires a java-capable browser</b> </applet>
|  |
| |
2.3 Magnification Spotlight can be instructed to automatically double the size of your image on your web page. This is great for speeding up your page loading times as you can use much smaller images that will only be one quarter of the displayed size. Additionally, it uses an anti-alias effect to smooth out any blocky edges.
To use the magnification effect, simply set the PicZoom parameter to "2". If you wish to keep your image at the original size, set the PicZoom parameter to "1".
You can also fine-tune the anti-alias effect with the PicSharpen parameter. This value can range from "1" (blurry) to "4" (sharp). This parameter has no effect on the Spotlight applet if the PicZoom parameter is set to "1" (no magnification).
The following example shows a magnified image with maximum anti-alias blur:
| |  | <applet code="WibbleSpotlight.class" height=174 width=396>
<param name="PicImage" value=""> <param name="PicDarkness" value="35">
<param name="PicZoom" value="2"> <param name="PicSharpen" value="1">
<b>This page requires a java-capable browser</b> </applet>
|  |
| |
2.4 Spotlight Dimensions You can alter the width of the spotlights on your banner, making them anywhere between 10 and 300 pixels wide, through the LightWidth parameter. Simply specify the spotlight width in pixels:
| |  | <applet code="WibbleSpotlight.class" height=174 width=396>
<param name="PicImage" value=""> <param name="PicDarkness" value="35">
<param name="PicZoom" value="2"> <param name="PicSharpen" value="1">
<param name="LightWidth" value="150">
<b>This page requires a java-capable browser</b> </applet>
|  |
| |
2.5 Moving Your Spotlights The spotlights can be automatically moved around your banner on pre-determined movement paths. The paths are:
0 - Stationary 1 - Follow the mouse cursor 2 - Left to right, left to right 3 - Left to right, right to left 4 - Top to bottom, top to bottom 5 - Top to bottom, bottom to top 6 - Left to right, drop down a line, left to right 7 - Bottom to top, moving right 8 - Left to right, moving down
2.6 Configuring Your Spotlights So, how do you get a spotlight moving around your image? Well, it's not too difficult...
The first thing you need to understand is that each spotlight is associated with a number (to identify it). The first spotlight will be spotlight 1, the second will be spotlight 2, and so on up to the tenth spotlight, which will be spotlight 10. With each Spotlight applet parameter, you'll need to append an underscore and the number to the parameter name - for instance '_1' - to identify that you're refering to spotlight 1. This'll be pretty obvious in the script we'll display later on in this section.
Each spotlight has up to five bits of information associated with it. These aren't scary at all - first you need to tell the Spotlight applet where the spotlight will start off on your image. The spotlight coordinates are standard x and y positions; the x value is how many pixels from the left to start the spotlight off at, the y value is how many pixels from the top to position the spotlight off at (note: these positions represent the top-left coordinates of the spotlight).
Okay, you now know where the spotlight will start off on your image...where's it going to move to? Well, you can tell it how to move around within your image by specifying a pre-determined movement path. The movement paths were discussed in section 2.5 (above).
You can even control how far the spotlight will move, enabling you to adjust the speed at which your spotlight will move around the screen! This is done through x and y step parameters.
So, wrapping the whole lot together, here is a scripted example that'll move a spotlight from the left-hand side to the right-hand side, then disappear and re-appear back on the left-hand side and move to the right again, over and over. Notice that the parameter names all have '_1' appended to them to identify the first spotlight:
| |  | <applet code="WibbleSpotlight.class" height=174 width=396>
<param name="PicImage" value=""> <param name="PicDarkness" value="35">
<param name="PicZoom" value="2"> <param name="PicSharpen" value="1">
<param name="LightWidth" value="150">
<param name="SpotMove_1" value="2"> <param name="SpotXPos_1" value="0"> <param name="SpotYPos_1" value="0"> <param name="SpotXStep_1" value="6"> <param name="SpotYStep_1" value="0">
<param name="URL" value="http://www.wibbleware.com"> <param name="Frame" value="_blank">
<b>This page requires a java-capable browser</b> </applet>
|  |
| |
2.7 Setting The URL Link You may have noticed the URL and Frame parameters in the above script example. These can be used to make the entire image/banner a clickable web link. The URL parameter is simply set to the full name of the web page to link to.
You can also instruct Spotlight where to open the new page after the user has clicked on the image. The Frame parameter performs this task. If you omit the parameter completely or set the value to "_self", the new page will be automatically shown in the same window and frame as the Spotlight applet. However, using a value of '_blank' will open the page in a brand new browser window.
|
|
|