SlickBoard | CSS/XML Timeline (new) | XML/SWF Charts | Timeline Eons

 next > 


Hit Area


<circle ... state='hit' />
<image ... state='hit' />
<line ... state='hit' />
<polygon ... state='hit'>...</polygon>
<rect ... state='hit' />
<text ... state='hit'>...</text>


A hit area is an area defined by a graphical element, the purpose of which is to detect a mouse click and then execute one or more actions. A hit area is the foundation of any interactive element and must be added to any component designed to respond to the mouse (buttons, checkboxes, menus, tabs, etc.).

A hit area is created by adding state='hit' to any drawing tag: circle, image, line, polygon, rect, and text. This makes their graphics responsive to the mouse.

To assign one or more actions to a hit area, see Action.



   <!-- a transparent (invisible) rectangle over the top half of the board that links to -->   
      <rect x='0' y='0' width='480' height='150' fill_alpha='0' state='hit' />
      <action><item type='link' url='' /></action>
   <!-- A blue rectangle that responds to the mouse (cursor changes to a hand), but does not perform an action-->   
   <rect x='75' y='175' fill_color='8888ff' shadow='low' state='hit' />
   <!-- a red circle that responds to the mouse and performs 2 actions: plays a sound and makes the circle draggable -->   
      <circle x='330' y='225' radius='50' fill_color='ff4400' shadow='low' state='hit' />
         <item type='sound_play' target='woosh' />
         <item type='drag' />
      <shadow id='low' alpha='.5' blurX='10' blurY='10' />
      <clip id='woosh' url="sounds/woosh.mp3" />


 next > 

Copyright © 2010-2021,