| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> |
| <!-- $Id$ --> |
| <html> |
| <head> |
| <title>Rollover</title> |
| <link rel="stylesheet" type="text/css" href="Tapestry.css" title="style"> |
| <script language="JavaScript" type="text/javascript"> |
| <!-- |
| var preload = new Array(); |
| preload[0] = new Image(); |
| preload[0].src = "images/tapestry-logo.gif"; |
| preload[1] = new Image(); |
| preload[1].src = "images/inspector-rollover.gif"; |
| |
| function rollover(image, index) |
| { |
| image.src = preload[index].src; |
| } |
| --> |
| </script> |
| </head> |
| |
| <body> |
| <table border="0" cellpadding="0" cellspacing="0" width="100%"> |
| <tr> |
| <td align="left"><A href="RenderBody.html"><IMG alt=RenderBody src="common-images/prev.png"></a></td> |
| <td align="middle"><A href="index.html"><IMG alt="Component Index" src="common-images/home.png" ></a></td> |
| <td align="right"><A href="Script.html"><IMG alt=Script src="common-images/next.png"></a></td> |
| <tr> |
| <tr> |
| <td colspan="3"><hr></td> |
| </tr> |
| <tr> |
| <td colspan="3"> |
| <table border="0" cellpadding="4" cellspacing="4" width="100%"> |
| |
| <tr valign="top"> |
| <td> |
| <table> |
| <tr> |
| <td><font size="+2"><b>Rollover</b></font></td> |
| </tr> |
| <tr> |
| <td> |
| <A href="../api/org/apache/tapestry/html/Rollover.html">org.apache.tapestry.html.Rollover</a> |
| </td> |
| </tr> |
| </table> |
| </td> |
| <td> |
| <table align="right" valign="middle" bgcolor="#c0c0c0" cellpadding="8"> |
| <tr> |
| <td> |
| <A onmouseover="javascript:rollover(document.button, |
| 1);" onmouseout |
| ="javascript:rollover(document.button, 0);" href="Rollover.html" > |
| <IMG src="images/tapestry-logo.gif" name=button> |
| </a> |
| </td> |
| </tr> |
| </table> |
| </td> |
| </tr> |
| |
| <tr valign="center"> |
| <td colspan="2"> </td> |
| </tr> |
| |
| <tr> |
| <td colspan="2"> |
| <b>Description</b> |
| <br> |
| The Rollover component provides a rollover image button for use with any kind |
| of <A href="../api/org/apache/tapestry/components/IServiceLink.html">link</a> |
| component. A rollover button image changes when the mouse move over it or off |
| of it. A Rollover is disabled if the link that wraps it is disabled (in which |
| case it doesn't respond to the mouse). If this dynamic behavior isn't required |
| use the simpler <A href="Image.html">Image</a> component. |
| <p> |
| The component provides all the necessary JavaScript to swap the image when the |
| mouse enters and exits the button. However, the Rollover must be wrapped |
| (ultimately) by a <A href="Body.html">Body</a> component.</p> |
| |
| </td> |
| </tr> |
| |
| <tr> |
| <td colspan="2"> |
| <b>See Also</b> |
| <br> |
| <A href="Body.html">Body</a>, |
| <A href="GenericLink.html">GenericLink</a>, |
| <A href="Image.html">Image</a>, |
| <a href="PageLink.html">PageLink</a>, |
| <A href="Script.html">Script</a> |
| </td> |
| </tr> |
| |
| <tr> |
| <td colspan="2"> |
| <b>Parameters</b> |
| <br> |
| <table border="1" cellpadding="4" cellspacing="4" class="parameters"> |
| <tr> |
| <th>Name</th> |
| <th>Type</th> |
| <th>Direction</th> |
| <th>Required</th> |
| <th>Default</th> |
| <th>Description</th> |
| </tr> |
| <tr> |
| <td>image</td> |
| <td><A href="../api/org/apache/tapestry/IAsset.html"><tt>IAsset</tt></a></td> |
| <td>in</td> |
| <td>yes</td> |
| <td> </td> |
| <td> |
| The initial image to show, if the surrounding link component is not |
| disabled. |
| </td> |
| </tr> |
| <tr> |
| <td>focus</td> |
| <td><A href="../api/org/apache/tapestry/IAsset.html"><tt>IAsset</tt></a></td> |
| <td>in</td> |
| <td>no</td> |
| <td> </td> |
| <td> |
| If provided (and the component is not disabled), then a JavaScript |
| onMouseOver event handler is added to change the image. An onMouseOut event |
| handler is also provided, to change the button to either it's base image, |
| or its blur image. |
| </td> |
| </tr> |
| <tr> |
| <td>blur</td> |
| <td><A href="../api/org/apache/tapestry/IAsset.html"><tt>IAsset</tt></a></td> |
| <td>in</td> |
| <td>no</td> |
| <td> </td> |
| <td> |
| If provided (and the component is not disabled), then a JavaScript |
| onMouseOut event handler is added to change the image when the mouse is |
| moved off of the image. |
| </td> |
| </tr> |
| <tr> |
| <td>disabled</td> |
| <td><A href="../api/org/apache/tapestry/IAsset.html"><tt>IAsset</tt></a></td> |
| <td>in</td> |
| <td>no</td> |
| <td> </td> |
| <td> |
| Image used when the Rollover is disabled. A Rollover is disabled when the |
| <A href="../api/org/apache/tapestry/components/IServiceLink.html"> |
| <tt>IServiceLink</tt></a> containing it is disabled. Note the Rollover |
| component is wrapped by a |
| <A href="../api/org/apache/tapestry/components/IServiceLink.html">link</a> |
| component such as the <a href="PageLink.html">PageLink</a> component. |
| <p> |
| If no disabled asset is specified, |
| then image asset is used instead. A disabled Rollover does not |
| respond to the mouse.</p> |
| |
| |
| </td> |
| </tr> |
| </table> |
| <P>Body: <STRONG>removed</STRONG><BR>Informal parameters: |
| <STRONG>allowed</STRONG> |
| <br> |
| Reserved |
| parameters: "name", "src", "border" </P> |
| |
| </td> |
| </tr> |
| |
| <tr> |
| <td colspan="2"> |
| <b>Examples</b> |
| <p> |
| This example is under construction.</p> |
| |
| |
| </td></tr></table> |
| </td></tr> |
| <tr> |
| <td colspan="3"><hr></td> |
| </tr> |
| <tr> |
| <td align="left"><A href="RenderBody.html"><IMG alt=RenderBody src="common-images/prev.png"></a></td> |
| <td align="middle"><A href="index.html"><IMG alt="Component Index" src="common-images/home.png" ></a></td> |
| <td align="right"><A href="Script.html"><IMG alt=Script src="common-images/next.png"></a></td> |
| </tr> |
| </table> |
| |
| </body> |
| </html> |
