Tutorial

Using Lightning Strike in Your Web Documents

Contents

1. Displaying an Embedded Lightning Strike Image

2. Embedded Image Sizing

3. Embedded Images in Tables

4. Multiple Image Types

5. Context-parsing in Netscape 3.0

6. Displaying Multiple Client-parsed Images

Introduction

This presentation assumes that you have downloaded the Lightning Strike 2.6 Compressor for Windows 95/NT, the Lightning Strike 2.6 Photoshop Plugin for the Mac PPC/68k, or the Lightning Strike 2.6 DeBabelizer Plugin for the Mac PPC. Any of these software packages must be used to create the Lightning Strike compressed images. You must also have the Lightning Strike 2.6 Plugin correctly installed into your browser. This plugin is available for either the Windows 95/NT or Mac PPC environments.

The Lightning Strike 2.6 Plugin Overview

The Lightning Strike 2.6 Plugin offers a number of new client side control features that include Brighten, Darken, Smooth, Sharpen, Invert, Zoom In, and Zoom Out. These controls are activated by pressing the right mouse button on a PC or Cmd-Click on the Mac. In addition, this plugin is fully backwards compatible to all earlier Lightning Strike compressed images. Images compressed with version 2.6 will also display incrementally in a fashion similar to progressive JPEG or interlaced GIF pictures.

Displaying an Embedded Lightning Strike Image

Lightning Strike images are displayed as inline images in the Netscape or Internet Explorer browsers. They must use the embed command to display properly. An example of this is now shown:

Lightning Strike Example 1

This image was created using the following embed command:

<embed
type="image/cis-cod"
src="http://www.infinop.com/html/java/car23.cod" height=240 width=320
pluginspage="http://www.infinop.com/html/extvwr_pick.html">

These commands will display a puzzle icon if a client lacks the Lightning Strike 2.6 plugin. However, clicking on the icon will redirect the browser to the plugin page describing Lightning Strike. The user now has the option of downloading the plugin for displaying the Lightning Strike imagery.

Note that both height and width are required parameters for the image to display correctly — without them, Netscape will display the image as a square, even if it is not, and Internet Explorer will not display the image at all. As the client performs the Zoom In command the image will increase resolution. Control of the image size is obtained by specifying the image width and height as shown in the next example:

Lightning Strike Example 2

This image was created using the following embed command:

<embed
type="image/cis-cod"
height=60 width=80
src="http://www.infinop.com/html/java/car23.cod"
pluginspage="http://www.infinop.com/html/extvwr_pick.html">

The more complex page design can be used by incorporating embedded Lightning Strike images into the table format of HTML. An example of this is now presented:

Lightning Strike Example 3

This image was created using the following embed command:

<table cellspacing=3>

<tr>
<td>
<embed type="image/cis-cod"
height=60 width=80
src="http://www.infinop.com/html/java/car21.cod"
pluginspage="http://www.infinop.com/html/extvwr_pick.html">
</td>

<td>
<embed type="image/cis-cod"
height=60 width=80
src="http://www.infinop.com/html/java/car23.cod"
pluginspage="http://www.infinop.com/html/extvwr_pick.html">
</td>
</tr>

<tr>
<td>
<embed type="image/cis-cod"
height=60 width=80
src="http://www.infinop.com/html/java/car24.cod"
pluginspage="http://www.infinop.com/html/extvwr_pick.html">
</td>

<td>
<embed type="image/cis-cod"
height=60 width=80
src="http://www.infinop.com/html/java/car25.cod"
pluginspage="http://www.infinop.com/html/extvwr_pick.html">
</td>
</tr>

</table>

Multiple Image Types

Lightning Strike 2.6 can be used on HTML pages containing various image types including JPEG, GIF and PNG. An example of this type of page is shown here:

Lightning Strike Example 4

This image was created using the following embed command:

<table cellspacing=3>

<font size=1>

<tr>
<td>
<embed type="image/cis-cod"
height=160 width=120
src="http://www.infinop.com/art/canyon.cod"
pluginspage="http://www.infinop.com/html/extvwr_pick.html">
<br>
<center>
Lightning Strike Image
</center
</td>

<td>
<img src="http://www.infinop.com/art/canyon.jpg" height=160 width=120>
<br>
<center>
JPEG Image
</center>
</td>
</tr>

<tr>
<td>
<img src="http://www.infinop.com/art/canyon.gif" height=160 width=120>
<br>
<center>
GIF Image
</center>
</td>

<td>
<embed 
src="http://www.infinop.com/art/canyon.png"
height=160 width=120>
<br>
<center>
PNG Image
</center>
</td>
</tr>

</table>

Context-parsing in Netscape 3.0

Lightning Strike can be used in conjunction with some new features of JavaScript 1.1 to produce pages that will automatically detect whether the Lightning Strike plugin is installed. An example can be found here:

Lightning Strike Example 5

Note that “View Source” may not correctly display the source of the above document. The JavaScript used to produce the above page is as follows:

  • In the document <HEAD> include the following:

    <script language=”JavaScript”> <!– function ldlsimg(imname, imht, imwid) { if (navigator.mimeTypes[“image/cis-cod”]) { var Struck = navigator.mimeTypes[“image/cis-cod”].enabledPlugin } else { var Struck = “null” } if (Struck == “[object Plugin]”) { document.writeln(“<EMBED TYPE=’image/cis-cod’ src='” + imname + “.cod’ height=” + imht + ” width=” + imwid + “>”) } else { document.writeln(“<IMG SRC='” + imname + “.jpg’ height=” + imht + ” width=” + imwid + “>”) } } // –> </script>
  • Then in the body, whenever you want to include an image, simply use the following (rather than <embed>):
    <script language=”JavaScript”> <!– var thisht=320 var thiswid=528 var thisimg=”../art/showcar” ldlsimg(thisimg, thisht, thiswid) // –> </script>
    Notice that the above example requires you to specify the image height and width. This is so that you can include multiple images on the same page, called with the same ldlsimg function. Also note that the “thisimg” in the above example is the complete pathname up until the . before the filename extension, and that it requires that you have both showcar.cod and showcar.jpg in the same directory on your web server.

  • The following is an example of multiple images of different sizes on a page using this context-parsing scheme:

Lightning Strike Example 6

Conclusion

Lightning Strike is a versatile image file format ideally suited for the Web. With the use of the embed command your page will soon be displaying Lightning Strike images and demonstrating that high compression and high quality imagery need not be incompatible.