SlickBoard | CSS/XML Timeline (new) | XML/SWF Charts | Timeline Eons
Introduction
Gallery
Requirement
Download
Tutorial
Draw
Object
Interface
 
        Hit Area
 
        Button
        Checkbox
        Radio Button
 
        Menu
        Auto Menu
        Expanding Menu
        List Menu
 
        Controller
        Slider
        Tab
 
        Custom
 
Action
Sound
Web Page
FAQ
Buy
Contact Us

 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-2021, maani.us