Inside Dynamic HTML - Puzzler Behavior


		Home \| Community \| Developer's Paradise \| Jobs User Groups \| Site Tools \| Site Information \| Search

Main Menu

IE5 Puzzler Behavior

-IE5 Puzzler Behavior
-Download the Behavior
-Discuss this Article

Categories
Client User Group
Internet Explorer, Internet Playground
Language
JavaScript
Product
IE5
Task
Fun Stuff, Image Manipulation
Technology
IE5 Behaviors, XML

Sponsored Links

Inside Technique : IE5 Puzzler Behavior
By Scott Isaacs

Our original puzzler wizard took any image on the web and turned it into a sliding puzzle. With help from Dave Massy our puzzler script has been converted to an Internet Explorer 5.0 behavior. By using behaviors, creating puzzles is so easy a wizard is no longer necessary. In addition, the puzzler degrades gracefully to display the initial image.

Below is a demonstration. If you are running Internet Explorer 5.0 (beta 2 or later) you will see a puzzle. If you are running a different browser, the standard image should be displayed.

Turning an image into a puzzle is easy:

FIrst, associate the behavior with a custom namespace and tag:

<HTML xmlns:puzzler>
<STYLE>
@media screen
 {
   puzzler\:img { behavior:url(puzz.htc) }
 }
</STYLE>

Next, wrap the image with the custom tag and specify the number of rows and columns:

<puzzler:img down=4 across=4>
  <IMG src="http://www.insidedhtml.com/gifs/robot.gif" 
       width=216 height=152>
</puzzler:img>

Behaviors and any CSS property can be associated with existing HTML tags or with your own tags defined by your own namespaces. The namespace defines the scope for the tag. For example, by default the existing HTML tags are all within the HTML namespace. For exposing our behavior we chose to define a custom puzz namespace. The puzz namespace is defined in the HTML element.

We defined the style of the puzzler's IMG element using CSS. While we only associated a behavior with the puzzler's img element, we also could have defined any of the other CSS properties.

Associating a behavior with a tag is done using Internet Explorer's CSS behavior property. This property is set to the URL of the file defining the behavior. We defined the puzzler behavior using script in puzz.htc.

Since this behavior makes sense only when viewing on the screen we define the behavior only for screen media. When printed, this element has no defined style and is essentially ignored causing the normal image to be printed instead.

To create the puzzle we use our puzzler namespace and its img tag. Our puzzler img tag supports two attributes, down to specify the number of rows, and across to specify the number of columns. In our example above we created a puzzle that is 4 rows across and 4 rows down. You can make the puzzle more difficult by increasing either of these values.

Internet Explorer 4.0 behaviors provide a great way to extend and enhance your web-page. They offer numerous advantages over including your script in-line. Behaviors

degrade gracefully,
are isolated from interacting with the rest of the page,
are easy to update without changing your html pages,
and no scripting knowledge is required to incorporate them into a page.

InsideDHTML also has a collection of Internet Explorer behaviors. Note that the syntax for behaviors has changed between Internet Explorer beta 1 and beta 2. Over the next few weeks, we are going to be reviewing and updating all our other behavior scripts and articles to use the latest syntax.

Page 1:IE5 Puzzler Behavior
Page 2:Download the Behavior