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>
      


Description

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.

 

Example

<slickboard>
   
   <!-- a transparent (invisible) rectangle over the top half of the board that links to google.com -->   
   <object>
      <rect x='0' y='0' width='480' height='150' fill_alpha='0' state='hit' />
      <action><item type='link' url='http://www.google.com' /></action>
   </object>
   
   
   <!-- 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 -->   
   <object>
      <circle x='330' y='225' radius='50' fill_color='ff4400' shadow='low' state='hit' />
      <action>
         <item type='sound_play' target='woosh' />
         <item type='drag' />
      </action>
   </object>
   
   
   <filter>
      <shadow id='low' alpha='.5' blurX='10' blurY='10' />
   </filter>
   
   <sound>
      <clip id='woosh' url="sounds/woosh.mp3" />
   </sound>
   
</slickboard>

 

 next > 


Copyright © 2010-2017, maani.us