|
Server : Apache/2.4.62 System : FreeBSD fbsdweb2.web.rcn.net 14.1-RELEASE FreeBSD 14.1-RELEASE releng/14.1-n267679-10e31f0946d8 GENERIC amd64 User : www ( 80) PHP Version : 8.3.8 Disable Function : NONE Directory : /domains/david.douglas/test/ |
Upload File : |
<html>
<head>
<title>Chameleon Introduction</title>
<Script Language="JavaScript">
<!--HIDE
function openwin()
{
targetURL = "Metal/Metal.html";
smwin = window.open(targetURL,"smwin", "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,copyhistory=yes,width=328,height=320");
}
function openwin2()
{
targetURL = "Stone/Stone.html";
smwin = window.open(targetURL,"smwin", "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,copyhistory=yes,width=328,height=320");
}
function openwin3()
{
targetURL = "Water/Water.html";
smwin = window.open(targetURL,"smwin", "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,copyhistory=yes,width=328,height=320");
}
function openwin4()
{
targetURL = "ToolBar/ToolBar.html";
smwin = window.open(targetURL,"smwin", "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,copyhistory=yes,width=328,height=320");
// smwin.focus();
}
//Stop Hiding-->
</Script>
</head>
<body bgcolor="#FFFFFF">
<div align=center><center>
<!-- Start IBM Header -->
<!-- the following 15 lines included from "../../../head_graphic.html" -->
<!-- Start of Header bar imbed file -->
<center>
<table border="0" cellpadding="0" cellspacing="0" width="584">
<tr>
<td valign="top" rowspan="2"><img
src="/ibm/hci/images/newmast.gif" width="514" height="72"></td>
<td valign="top"><img src="/ibm/hci/images/ani1.gif" width="70"
height="54"></td>
</tr>
<tr>
<td valign="top"><img src="/ibm/hci/images/newmast1.gif"
width="70" height="18"></td>
</tr>
</table>
<!-- End of Header bar imbed file -->
<!-- end of lines included from "../../../head_graphic.html" -->
<!-- End IBM Header -->
<table border="0" cellpadding="0" cellspacing="0" width="477">
<tr><td> </td></tr>
<tr>
<td>
<a href="../../../index.html"><img src="../../../images/navhci.gif" width="111"
height="43" border=0></a><a href="../../../exhibits/exhibits.html"><img
src="../../../images/navexib.gif" width="62" height="43" border=0></a><a
href="../../resource.html"><img src="../../../images/navres.gif" width="108"
height="43" border=0></a><a href="../../../guidelines/guidelines.html"><img
src="../../../images/navguid.gif" width="116" height="43" border=0></a><a
href="../../../ucd/user_centered_design.html"><img src="../../../images/navucd.gif" width="80" height="43" border=0></a></td>
</tr>
<tr>
<td><img src="../../../images/vspace.gif" width="10"
height="10"></td></tr>
<tr>
<td>
<h2>Animated, Multi-State Buttons</h2>
<p>
<font size="4" color="#F86712">Put some life into your web page buttons!</font>
Animated, multi-state buttons present attractive, meaningful graphics and sounds
to the user, virtually inviting the user to select them. Initiating and changing
button animations based on user actions such as pointing and clicking can provide helpful feedback to the user.
</p>
<table align="left" border="6" cellspacing="0" cellpadding="0">
<tr><td bgcolor="FFFFFF">
<applet code="ChButtonApplet.class" codebase="JavaClasses" width="36" height="36">
<param name="IDLE IMAGE1" value="Applet/Sleep1.gif">
<param name="IDLE IMAGE2" value="Applet/Sleep2.gif">
<param name="IDLE INTERVAL" value="2000">
<param name="HOVERING IMAGE1" value="Applet/Scratch1.gif">
<param name="HOVERING IMAGE2" value="Applet/Scratch2.gif">
<param name="HOVERING INTERVAL" value="500">
<param name="PENDING IMAGE1" value="Applet/Right1.gif">
<param name="PENDING IMAGE2" value="Applet/Right2.gif">
<param name="PENDING INTERVAL" value="200">
<param name="FIRING IMAGE1" value="Applet/Awake.gif">
<param name="FIRING IMAGE2" value="Applet/Stop.gif">
<param name="FIRING IMAGE3" value="Applet/Awake.gif">
<param name="FIRING IMAGE4" value="Applet/Stop.gif">
<param name="FIRING IMAGE5" value="Applet/Awake.gif">
<param name="FIRING INTERVAL" value="-100">
<param name="SUSPENDED IMAGE1" value="Applet/Stop.gif">
<param name="IDLE_FOCUS IMAGE1" value="Applet/Scratch1.gif">
<param name="IDLE_FOCUS IMAGE2" value="Applet/Scratch2.gif">
<param name="IDLE_FOCUS INTERVAL" value="1000">
<param name="HOVERING_FOCUS IMAGE1" value="Applet/Scratch1.gif">
<param name="HOVERING_FOCUS IMAGE2" value="Applet/Scratch2.gif">
<param name="HOVERING_FOCUS INTERVAL" value="300">
<param name="URL" value="http://www.ibm.com/ibm/hci">
<param name="TARGET" value="FrameName">
<param name="STATUS" value="IBM Human-Computer Interaction homepage">
</applet></td></tr></table>
<!-- img src="../../../images/vspace.gif" width="8" height="40" align="left" -->
<p>This button has 7 <i>states</i> that change based on the <i>events</i> or user
actions that it receives. Each state has an related graphic assigned to it as shown in
the HTML markup below. Try moving your mouse over the button (hovering state). The cat wakes up and starts to scratch. Now, press and hold down the mouse button to see the cat run (pending). Finally, release the button and the cat looks at you (firing). Move the cursor off the button and the cat slowly scratches (idle_focus). Move the cursor back over the button and the cats scratches faster (hovering_focus). To see the cat sleep again (idle), click on this text to "remove" the focus from the button. And now, if you want your button to link to another Web page or website, use the parameters designated at the bottom of this example. The following are the parameters used to animate this button:
<a name="code"><pre><code> </a>
<applet code="ChButtonApplet.class" width="36" height="36">
<param name="IDLE IMAGE1" value="Sleep1.gif">
<param name="IDLE IMAGE2" value="Sleep2.gif">
<param name="IDLE INTERVAL" value="2000">
<param name="HOVERING IMAGE1" value="Scratch1.gif">
<param name="HOVERING IMAGE2" value="Scratch2.gif">
<param name="HOVERING INTERVAL" value="500">
<param name="PENDING IMAGE1" value="Right1.gif">
<param name="PENDING IMAGE2" value="Right2.gif">
<param name="PENDING INTERVAL" value="200">
<param name="FIRING AUDIO" value="Cat.au">
<param name="FIRING IMAGE1" value="Awake.gif">
<param name="FIRING IMAGE2" value="Stop.gif">
<param name="FIRING IMAGE3" value="Awake.gif">
<param name="FIRING IMAGE4" value="Stop.gif">
<param name="FIRING IMAGE5" value="Awake.gif">
<param name="FIRING INTERVAL" value="-100">
<param name="SUSPENDED IMAGE1" value="Stop.gif">
<param name="IDLE_FOCUS IMAGE1" value="Scratch1.gif">
<param name="IDLE_FOCUS IMAGE2" value="Scratch2.gif">
<param name="IDLE_FOCUS INTERVAL" value="1000">
<param name="HOVERING_FOCUS IMAGE1" value="Scratch1.gif">
<param name="HOVERING_FOCUS IMAGE2" value="Scratch2.gif">
<param name="HOVERING_FOCUS INTERVAL" value="300">
<param name="URL" value="http://www.ibm.com/ibm/hci">
<param name="TARGET" value="FrameName">
<param name="STATUS" value="IBM Human-Computer Interaction homepage">
</applet>
</code></pre>
</p>
<div align="center"><center>
<table border=1 cellpadding=6 cellspacing=0 width=100%>
<tr><td bgcolor="ccffff">
<h2>Other Examples</h2>
<p>To help illustrate other ways that you might use animated, multi-state buttons, we've included the following examples:
<ul>
<li><a href="javascript:openwin()">Metal buttons</a></li>
<li><a href="javascript:openwin2()">Stone buttons</a></li>
<li><a href="javascript:openwin3()">Water buttons</a></li>
<li><a href="javascript:openwin4()">Tool bar</a></li>
</ul>
</p>
<p>To learn more about these buttons, and download the Java classes, see <a
href="paper.html">Using Animated, Multi-State Buttons</a>.</p>
</table>
</center></div>
</td>
</tr>
</table>
</center></div>
<!-- the following 16 lines included from "../../../footer.html" -->
<!-- start of navigation footer -->
<p align=center>
<font size=-1>
[ <a href="http://www.ibm.com/ibm/hci/" target="_parent">HCI Home</a> |
<a href="http://www.ibm.com/ibm/hci/exhibits/exhibits.html" target="_parent">Exhibits</a> |
<a href="http://www.ibm.com/ibm/hci/guidelines/guidelines.html" target="_parent">Guidelines</a> |
<a href="http://www.ibm.com/ibm/hci/resources/resource.html" target="_parent">Resources</a> |
<a href="http://www.ibm.com/ibm/hci/ucd/user_centered_design.html" target="_parent">UCD</a> |
<a href="http://www.ibm.com/ibm/hci/feedback/feedback.html" target="_parent">Feedback</a> ]<br>
[ <a href="http://www.ibm.com/" target="_parent">IBM Home</a> |
<a href="http://www.ibm.com/Orders/" target="_parent">Order</a> |
<a href="http://www.ibm.com/Search/" target="_parent">Search</a> |
<a href="http://www.ibm.com/Assist/" target="_parent">Contact IBM</a> |
<a href="http://www.ibm.com/Legal/" target="_parent">Legal</a> ]</p>
</font>
<!-- end of navigation footer -->
<!-- end of lines included from "../../../footer.html" -->
</body>
</html>