a handy tool
Interactive Elements for Your Web Site
how to use javascript and shockwave

go to:


behind the scenes with shockwave
In this section, we will introduce you to the codes you will use to put shockwave applications into your own web pages. You should have a working knowledge of HTML tags.

nut and bolt embedding shockwave in HTML
The closest analogy for how you include Shockwave into the HTML code of a web page is the method for coding the display of inline images. The image (a GIF or JPEG file) stands outside of the HTML file and is referenced with a tag that inserts it into the content of a page:

  <img src="myimage.gif" width="340" height="240">
where "height" and "width" specify how many pixels the image will occupy on the screen.

Likewise, the Shockwave file (which always is a file that ends in "<tt>.dcr" sits outside the HTML file and appears in the web page at the point of an "<embed>" tag:

  <embed src="myshocker.dcr" width="400" height="240">

Note that the "height" and "width" parts of the "<embed>" tag are required for Shockwave but are optional for inline images. Therefore, at a minimum, you need to find a Shockwave file that you can use and you need to know its screen dimensions in pixels.

Like inline images, you can also add modifiers to align the shockwave left or right and "pad" the shockwave with horizontal and vertical spacing:

  <embed src="myshocker.dcr" width="400" height="240"
         align="right" hspace="10" vspace="4">

peeking at the source
The best way to learn about how Shockwave files are coded into web pages is visit some web sites and use your web browser's features to View Source. Likely you will find HTML code that is much more complicated than what we just showed! Don't panic! You will learn a few more things as we explore the examples.

the cross-platform mambo
For the most part, the <embed> tag will get your shockwave file running on most web browsers that support shockwave. However, to truly take advantage of the features of Microsoft Explorer, you will want to consider the more complicated structure:

  <OBJECT CLASSID="clsid:166B1BCA-3F9C-11CF-8075-444553540000"  
   CODEBASE="http://active.macromedia.com/director/cabs/sw.cab" 
   WIDTH="400" HEIGHT="240" NAME="shocked" ID="swmovie1">
   
   <PARAM NAME="SRC" VALUE="myshocker.dcr">
      
   <embed src="myshocker.dcr" width="400"  height="240">
   </OBJECT>
Internet Explorer will use the <OBJECT>...</OBJECT> information (and ignore the <embed> tag that NetScape uses.) Note that each method identifies the source file and the height/width dimensions of the Shockwave animation.

what's next?
Now that we've reviewed how you put shockwave files into a web page, we will look at sites where you can find shockwave files to use.