Click here to Skip to main content
12,450,089 members (44,450 online)
Click here to Skip to main content

Stats

51.5K views
378 downloads
63 bookmarked
Posted

MS Agent style critters for your web pages

, 13 Feb 2009 BSD
Implementing MS Agent style critters for your web pages.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>Example</title>
	<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.draw();
							myCritter.show();
							myCritter.onClick = function()
							{
								myCritter.say('Stop clicking me!');
								myCritter.onClick = function()
								{
									myCritter.say('I said stop it!');
								}
							}
						}
	</script>
</head>
<body onunload="myCritter.destroy()" style="background-color:#FFB27F">
<div>
	<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="myCritter.show();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>
<div style="width:900px;height:1000px;">This is a really tall and wide div to demonstrate position: fixed  Ready?  Go!  Mooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</div>
</body>
</html>

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.

License

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

Share

About the Author

Helbrax
Web Developer
United States United States
No Biography provided

You may also be interested in...

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