Click here to Skip to main content
12,997,441 members (55,545 online)
Click here to Skip to main content


63 bookmarked
Posted 23 Oct 2007

MS Agent style critters for your web pages

, 13 Feb 2009
Implementing MS Agent style critters for your web pages.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="" xml:lang="en" lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<script src="jcritter-micro.js" type="text/javascript"></script>
	<script type="text/javascript">
		//This isn't necessarily the CORRECT way to do this.  Ideally
		//you want to be using attachEvent or addEventListener instead of
		//directly assigning functions to your links below.
		var myCritter;
		var penguin;
		window.onload =	function()
							var monkey = 
								width: 128,
								height: 128,
								src: 'monkey.gif',
								adjustTop: 15,
								adjustLeft: 20,
								speechTop: 45,
								speechLeft: 65
							penguin = 
								width: 128,
								height: 128,
								src: 'penguin.gif',
								adjustTop: 15,
								adjustLeft: 20,
								speechTop: 25,
								speechLeft: 65
							myCritter = new JCritter(monkey);
							myCritter.onClick = function()
								myCritter.say('Stop clicking me!');
								myCritter.onClick = function()
									myCritter.say('I said stop it!');
<body onunload="myCritter.destroy()" style="background-color:#FFB27F">
	<input type="text" id="foo"/><button onclick="if(document.getElementById('foo').value.match(/^\s*$/)){myCritter.say('You have to type <b>WORDS</b>, you banana head.')}else{myCritter.say(document.getElementById('foo').value)}">Say</button>
	<br/>Try these other commands too!<br/>
	<a href="#" onclick="myCritter.hide();return false;">Hide</a><br/>
	<a href="#" onclick=";return false;">Show</a><br/>
	<a href="#" onclick="myCritter.hush();return false;">Hush</a><br/>
	<a href="#" onclick="myCritter.mute();return false;">Mute</a><br/>
	<a href="#" onclick="myCritter.unMute();return false;">UnMute</a><br/>
	<a href="#" onclick="myCritter.setAgent(penguin);return false;">SetAgent(change to Penguin)</a><br/>
	<a href="#" onclick="myCritter.destroy();return false;">Destroy</a>
<div style="width:900px;height:1000px;">This is a really tall and wide div to demonstrate position: fixed  Ready?  Go!  Mooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</div>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.


This article, along with any associated source code and files, is licensed under The BSD License


About the Author

Web Developer
United States United States
No Biography provided

You may also be interested in...

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170622.1 | Last Updated 13 Feb 2009
Article Copyright 2007 by Helbrax
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid