5,117,952 members and growing! (13,650 online)
Email Password   helpLost your password?
Web Development » Client side scripting » General     Intermediate License: The BSD License

MSAgent Style Critters for your Web Pages

By Helbrax

MSAgent Style Critters for your Web Pages
JScript, XML, CSS, HTML, Dev

Posted: 23 Oct 2007
Updated: 28 Apr 2008
Views: 6,269
Announcements



Search    
Advanced Search
Sitemap
9 votes for this Article.
Popularity: 3.44 Rating: 3.61 out of 5
2 votes, 22.2%
1
0 votes, 0.0%
2
2 votes, 22.2%
3
2 votes, 22.2%
4
3 votes, 33.3%
5
Note: This is an unedited contribution. If this article is inappropriate, needs attention or copies someone else's work without reference then please Report This Article
Screenshot - critter.jpg

Introduction

MS Agent style class for Web Pages. Uses javascript and (x)html only. No Active-X or other plug-ins required.

Background

I recently needed a way to communicate with the users of a web page via a somewhat "interactive" manner, without using flash or java. Alert boxes were simply too obtrusive. I thought about MS Agent, but then it would only be compatible with IE. So I decided to build my own that would, in part, mimic the functionality of MS Agent, but be as cross-browser as possible.

Using the code

The class itself is pretty easy to use. You supply your own image and small adjustments to make sure everything goes where you want it.

<script src="jcritter.js" type="text/javascript"></script>
<script type="text/javascript">
    var newCritter;
    window.onload =    function()
    {
    var monkey = 
    {
        width: 128,
        height: 128,
        src: 'monkey.gif',
        adjustTop: 15,
        adjustLeft: 20,
        speechTop: 45,
        speechLeft: 65
    }
    myCritter = new JCritter(monkey);
    myCritter.draw();
    myCritter.show();
    }
    
</script> 

Properties

//You shouldn't set any of these.  They are included so you can test
//the current state of your critter.  Changing them manually may cause
//unexpected results.
//Display JCritter version
critterObject.version
        
//Boolean value.  Shows current display state of the critter
critterObject.isHidden

//Boolean value.  Shows current speaking state of the critter
critterObject.isSpeaking

Methods

//Draws our critter and places it in the right place
//Shouldn't need to use it
critterObject.drawAgent
    
//Draws our speech balloon, relative to the citter and the speechTop/Left offsets
//Shouldn't need to use it
critterObject.drawBalloon
    
//Function that draws both balloon and citter
//This should be used when you create your object, otherwise, it won't position correctly on the page
critterObject.draw
    
//Make the word ballon appear and say foo
critterObject.say(foo)
    
//Stop talking critter!
critterObject.hush
    
//Show our Critter
critterObject.show
    
//Remove critter
critterObject.hide

//Mute critter
critterObject.mute

//Unmute critter
critterObject.unMute
    
//Remove and destroy critter
critterObject.destroy
    
//What happens when you click on the agent graphic.  Default is Hush
//set by doing: critterObject.Click = function() {...}
critterObject.onClick
    
//What happens when you move the mouse over the image.  Default is nothing;
//set by doing: critterObject.MouseIn = function() {...}
critterObject.onMouseIn
    
//What happens when you move the mouse away from the image.  Default is nothing;
//set by doing: critterObject.MouseOut = function() {...}
critterObject.onMouseOut

//Set font size
critterObject.setFontSize(size)

//Set font color
critterObject.setFontColor(color)
    
  
//Switches the the image you specify.  Useful for making animations
critterObject.Play('animationName') 

Custom

//Add your own custom critters!
    var tux = 
    {
        //image width
        width: 112,
        //image height
        height: 112,
        //image source
        src: 'tux.gif',
        //how far from the bottom of the page the image is
        adjustTop: 20,
        //how far from the right of the page the image is
        adjustLeft: 20,
        //you have to make some adjustments to the speech bubble
        //so that you can get it right where you want it
        speechTop: 0,
        speechLeft: 50 
        //You can supply your own images here, which can be called using the .Play('animation_name') method
        animations:
        {
            animation_name: 'animation_image.gif'
        }
    }  

Animations

If you supply numerous gif images(probably animated), you can fake some animation. The big drawback to this is that javascript is not capable of knowing when an animation "ends". Because of this, you will want to be careful using looping animations, and your animations should return to the default image you want to display when your critter is idle.

Compatibility

  • Firefox 2.0.0.7
  • IE6 SP2
  • IE7
  • Opera 9.23
  • Safari 3.03 (windows)

Bugs

  • Positioning can get screwed up when using targets. You have to use draw to fix or scroll/resize the page(forces a redraw)
  • Opera has a small bug. If you place the image too low on the page, you can continue scrolling indefinately. This can happen on other browsers as well, but seems more prominent in opera
  • I'm sure there are plenty of other bugs lurking around.

License

BSD License

Points of Interest

This code works best on "Web 2.0" sites, where pages are not forced to refresh as often.

Hompage

Please see the project website for current versions/bugfixes http://www.jcritters.com

History

  • Monday, April 28 2008 : Updated article
  • Wednesday, March 5 2008: Restored article(what the heck?)
  • Tuesday, October 23 2007: Restored article(deleted accidentally)
  • Tuesday, October 17 2007: Uploaded Version 0.5
    • Animation Support added
    • Removed event handlers on Destroy
  • Tuesday, October 16 2007: Uploaded Version 0.4

License

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

About the Author

Helbrax



Occupation: Web Developer
Location: United States United States

Other popular Client side scripting articles:

Article Top
Sign Up to vote for this article
You must Sign In to use this message board.
FAQ FAQ Noise ToleranceSearch Search Messages 
 Layout  Per page   
  (Refresh) 
Subject  Author Date 
-- There are no messages in this forum --

General General    News News    Question Question    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

PermaLink | Privacy | Terms of Use
Last Updated: 28 Apr 2008
Editor:
Copyright 2007 by Helbrax
Everything else Copyright © CodeProject, 1999-2008
Web16 | Advertise on the Code Project