SiteExperts.com Logo Home | Community | Developer's Paradise | Jobs
User Groups | Site Tools | Site Information | Search

Inside Technique : Fun with Graphics
By Jon Perry

This program demonstrates a computer equivalent of the Fairground Cut-Out Amusements. It allows you to position any image inside a cut-out template, which means that you can record the necessary data and produce humerous effects on independently.

The program uses a few DHTML techniques to provide functionality, and uses the chroma filter to produce transparency.

Use the mouse to move the image around, the cursor keys to resize the image, and holds shift down to speed up the resize. Clicking the mouse switches between a fixed image, unresponsive to mouse movements, and the normal dynamic image.

The Code

The opening HTML statements. 

<HTML>
<HEAD>
<TITLE>Fairground-CutOut</TITLE>

The script allows you to move the image (fixed=false), or to fix it to prevent accidentally nudging it out of place (fixed=true). This is controlled by clicking the mouse, and is internally represented by the 'fixed' boolean variable. Initially it is set to false to prevent accidental reading of non-existent objects, and it is set to true with the body onload event. 

<SCRIPT>
fixed=true;

The program allows us to move and resize the image so that we can place it in the desired position. moveface() is controlled by the mousemove event, and if we are allowed to move the image, it adjusted the left and top style properties. Note that we use pos* as the pos* property returns integers for the left and top attributes, and not 100px, for example. displaystatus() displays the current data about the image. 

function moveface() {
if (fixed) return;
face.style.posLeft=event.clientX-(face.offsetWidth/2)+document.body.scrollLeft;
face.style.posTop=event.clientY-(face.offsetHeight/2)+document.body.scrollTop;
displaystatus();
}

resizeface() is therefore the resizing function. After checking if we can resize the image, we extract the key pressed and then adjust the size of the image within reasonable bounds. These bounds are arbitary, if you have a large image, you can change them. We also detect the shift key to allow rapid alterations, and use the with statement to group all the properties of the face.style object together. 

function resizeface() {
if (fixed) return;
ek=event.keyCode;
if (event.shiftKey) c=5; else c=1;
with (face.style) {
if (ek==37 && posWidth>0) posWidth-=c;
if (ek==39 && posWidth<200) posWidth+=c;
if (ek==38 && posHeight>0) posHeight-=c;
if (ek==40 && posHeight<200) posHeight+=c;
}
displaystatus();
}

This function displays the data about the image. It is fairly straightforward, and uses the with keyword again. 

function displaystatus() {
msg='';
with (face.style) {
msg+='Face Left : '+posLeft;
msg+=' ; Face Top : '+posTop;
msg+=' ; Face Width : '+posWidth;
msg+=' ; Face Height : '+posHeight;
}
status=msg;
}

The toggle() function switches the 'fixed' variable between true and false, which in turn determines whether the image is fixed on the screen or movable. 

function toggle() {
fixed=!fixed;
}

The remainder of the code contains all the details. There are a few important points to make here though. The <BODY> element contains the event handlers for all the events we want to capture, in this case we capture the mousemove, keydown and click events. We must use keydown, as keypress only detects visual keys. 

</SCRIPT>
</HEAD>
<BODY  
  onload="fixed=false;" 
  onmousemove="moveface();" 
  onkeydown="resizeface();" 
  onclick="toggle();">
<IMG SRC="cutout.png" 
  STYLE="position:absolute;top:10;left:10;filter:chroma(color=#808080)">
<IMG SRC="max.jpg" ID="face" 
  STYLE="position:absolute;top:30;left:30;height:100;width:100;z-index:-1">
</BODY>
</HTML>

Clicking the mouse button changes the image from static to movable and vice versa. This has a slightly annoying side-effect that when you click from static to movable, the image is immediately replaced where you clicked the cursor (well not exactly, but this will happen on the first mousemove event, which will be based around the cursor position at the time of the onclick event).

The important points are in how we present the images. The cutout image has a grey oval for a face. This oval is the only instance of grey in the entire cut-out image. The exact shade of grey I used is #808080. You are not limited to this shade, you can use any color, but this must be reflected in the chroma filter color value. The chroma filter makes its color value transparent, i.e. we can see the background through it. This is a commonly used technique, I used it extensively in my Arcade series.

Once we have the created the transparent area, the next trick is to place the face image underneath the cut-out image, in order to make the face image the background. This is done by setting the z-index of the face image to a lower one than the cut-out image.

Once you have decided on some data, the whole program may be reduced to: 

<HTML>
<HEAD>
<TITLE>Fairground CutOut</TITLE>
<BODY>
<IMG SRC="myCutOut.jpg" 
  STYLE="position:absolute;top:10;left:10;filter:chroma(color=#808080)">
<IMG SRC="myFace.jpg" 
  STYLE="position:absolute;top:30;left:30;height:100;width:100;z-index:-1">
</BODY>
</HTML>

and substitute in appropriate values for the top, left, height and width styles. If you need color #808080 in your cutout, then you will have to find another 'neutral' color, and uses this color value instead. The files and file extensions are up to you as well, you don't have to use .jpg, but remember that non-compressed images can take up a huge amount of file space, and therefore take a very long time to download. Have lots with funny face fun!

Jon Perry is a freelance Author and Programmer from England.

Page 1:Fun with Graphics
Page 2:Fairground Cutout Demo
Page 3:Weave
Page 4:Weave Demo

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.