---- CODE --------------------------------------------------------------------------------------------
<div id="wb_Shape1" style="position:absolute;left:235px;top:395px;width:115px;height:125px;z-index:1;" align="center">
<img src="images/img0001.gif"
id="Shape1" align="top" alt="" title="" border="0" width="115" height="125">
</div>
---- CODE --------------------------------------------------------------------------------------------
To get to the target, the path to the target, is by   selector   the more we know about selectors the more we can do with jor_aniMate
This is the div that holds our image element Shape1, that's why this code can have 2 id's, they are 2 elements
How do we know the name of the id ?
Simple... Webbuilder adds a prefix   wb_   in front of the id
So our Shape1, it's id is   #shape1  
(=img), the id of the div that holds our Shape1 is   #wb_Shape1.
This difference is important to remember when using jor_aniMateMASTERPACKv3.0
If we want to animate position we need to trigger the div that holds the object          #wb_Shape1
If we want to animate dimension of the object we need to trigger the object itself    #Shape1
The same applies for dragging an object, we drag the div that holds the object      #wb_Shape1


This might be confusing at first, but hold on it isn't that difficult ones you get your head around it ...
Multiple Selectors:

One more thing, and not unimportant to note about selectors is, we can use multiple selectors in row
Divide them with a comma.
Say we want to trigger a Shape1, Shape2 and an Image1, and we know, they all can be animated the same actions
We can use just one selector input like this   #Shape1,#Shape2,#Image1


NOTE:
Using multiple selectors can make it easier to work with wb_ and id as selector
But we can also animate the  wrong  element that way, USE multiple selectors with caution
I hope you will have a basic understanding of selectors by now
I also recommend reading a more in depth here
If you would like to know more about the full scope of selectors I recommend reading  ie. here jQuery library-selectors
IN DEPTH - SELECTORS SIMPLIFIED
SELECTORS SIMPLIFIED

Selectors  are probably they most important thing to understand to get anything out of jor_aniMate
jor_aniMateMASTERPACKv3.0 in large part is jQuery based, jQuery in large part is, target an object, manipulate the target
   selector is the path to the target  -  jor_aniMate is the manipulation tool
The full range on selectors is beyond the scope of this manual, the focus here will be on simple  id, class and element as selector
AN EXAMPLE:
Say we add a Shape to a project in Webbuilder, how can we find, identify, target that Shape ?
The HTML in Webbuilder would look something like this:
---- CODE --------------------------------------------------------------------------------------------
<div id="wb_Shape1" style="position:absolute;left:235px;top:395px;width:115px;height:125px; z-index:1;" align="center">
<img src="images/img0001.gif" id="Shape1" align="top" alt="" title="" border="0" width="115" height="125">
</div>
---- CODE --------------------------------------------------------------------------------------------
id="Shape1" ... not hard to find at all
That could be our selector for Shape1, and because it's an id we need to add a   
#    in front of it
The full  selector  would become    #Shape1
Those could be used as selectors too,   div   or   img
But we would be triggering all divs or all images on the page if we would do this, not just this image
Cause many objects have the element  div
and all images have the element   img
Which has it's own practical use of course, say we want to set opacity for all images on a page
Using a target selector  img  would set opacity for all images on a page
So now we have a new selector, we could use   myNewClass   as selector
It is a class so we need to place a 
.   in front of it, the full  selector  would become   .myNewClass

So now we have  3  ways of  targeting  our shape with selectors
By   id (#)   by   class (.)   and by   element
   target an object  -  manipulate the target
---- CODE --------------------------------------------------------------------------------------------
<div id="wb_Shape1" style="position:absolute;left:235px;top:395px;width:115px;height:125px;z-index:1;" align="center">
<img src="images/img0001.gif" id="Shape1" align="top" alt="" title="" border="0" width="115" height="125">
</div>
---- CODE --------------------------------------------------------------------------------------------
He ... there are no classes in our HTML at this point
What is a class ?
A class is just another way of identifying an object, or adding specific information to an object
The difference between an  id  and a  class  is, each element can only have one unique id, no more.
Even more so, an id should only be used ones per page, it's unique
But an element can have multiple classes, and one class can be used on multiple elements
Let's make this to use in our example
We would take our shape, right-click on it, open it's HTML, and inside   inside Tag   we would add ie.    class="myNewClass"
The HTML in Webbuilder would now look like this
---- CODE --------------------------------------------------------------------------------------------
<div id="wb_Shape1" style="position:absolute;left:235px;top:395px;width:115px;height:125px;z-index:1;" align="center">
<img src="images/img0001.gif" id="Shape1" align="top" alt="" title="" border="0" width="115" height="125"
class="myNewClass">
</div>
---- CODE --------------------------------------------------------------------------------------------
LET'S FIND A CLASS
LET'S FIND THE ID
LET'S FIND THE ELEMENTS
---- CODE --------------------------------------------------------------------------------------------
<
div id="wb_Shape1" style="position:absolute;left:235px;top:395px;width:115px;height:125px;z-index:1;" align="center">
<
img src="images/img0001.gif" id="Shape1" align="top" alt="" title="" border="0" width="115" height="125">
</div>
---- CODE --------------------------------------------------------------------------------------------
WEBBUILDER SPECIFIC
But ... he ... wait a minute, didn't we miss something ?
Let's get back to the code of Shape1 in our example
---- CODE --------------------------------------------------------------------------------------------
<div
id="wb_Shape1" style="position:absolute;left:235px;top:395px;width:115px;height:125px;z-index:1;" align="center">
<img src="images/img0001.gif" id="Shape1" align="top" alt="" title="" border="0" width="115" height="125">
</div>
---- CODE --------------------------------------------------------------------------------------------
Isn't that an id also, how can we have 2 id's on 1 object, we can only have 1 id per element ?!
That's right, 1 id per element
This is what Webbuilder does to place our object, Shape1, on stage
Webbuilder wraps a lot of his objects in a separate div, and places an absolute position on this div
Is that important for jor_aniMate ?
Yes, it is ... cause to animate our object in position movement, we would use left and top
If we want to animate our object Shape1 with ie. left position, we can not use the selector id    #Shape1
We need to trigger the div that holds Shape1
So what is the div that holds Shape1 ? ... let's see in our code example
---- CODE --------------------------------------------------------------------------------------------
<div id="wb_Shape1" style="position:absolute;left:235px;top:395px;width:115px;height:125px;z-index:1;" align="center">
<img src="images/img0001.gif" id="Shape1" align="top" alt="" title="" border="0" width="115" height="125">
</div>
---- CODE --------------------------------------------------------------------------------------------