|
|
|
|
|
|
Lesson#12
|
SOME USEFUL STYLE SHEETS PROPERTIES
|
|
|
|
SOME USEFUL STYLE SHEETS PROPERTIES
Example position style
<HTML>
<STYLE>
DIV {font-size: 18pt}
</STYLE>
<BODY>
<DIV STYLE="position: absolute; left: 700px; top: 200px">Books
Section</DIV>
<DIV STYLE="position: absolute; left: 200px; top: 150px">Toys
Section</DIV>
<DIV STYLE="position: absolute; left: 500px; top: 100px">Music
Section</DIV>
<DIV STYLE="position: absolute; left: 100px; top: 0px">Clothes
Section</DIV>
We must believe in luck. For how else can we explain the success
of those we do'nt like?
<p STYLE="position: static; left: 200px; top:30px">
This is an example of position styles.
</BODY></HTML>
Result is shown in Fig. 1 below.
Fig. 1
<HTML>
<STYLE>
DIV {font-size: 18pt}
</STYLE>
<BODY>
<DIV STYLE="position: absolute; left: 700px; top: 200px">Books
Section</DIV>
<DIV STYLE="position: absolute; left: 200px; top: 150px">Toys
Section</DIV>
<DIV STYLE="position: absolute; left: 500px; top: 100px">Music
Section</DIV>
<DIV STYLE="position: absolute; left: 100px; top: 0px">Clothes
Section</DIV>
We must believe in luck. For how else can we explain the success
of those we do'nt like?
<p STYLE="position: relative; left: 200px;top:5px">
This is an example of position styles.
</BODY></HTML>
Positioning in the 3rd dimension
We can use the property ‘z-index’ for positioning in the third
dimension. For example,
<HTML>
<HEAD>
<TITLE>Style Sheet 3-D Positioning</TITLE>
</HEAD>
<STYLE>
DIV {font-size: 16pt; Color:red}
</STYLE>
<BODY>
<IMG SRC="image2.gif" STYLE="z-index: 0;position: absolute;
left: 95px; top: 10px">
<DIV STYLE="z-index: 1; position: absolute; left: 10px; top:
60px">
<B>This text appears on top of the image.</B>
</DIV>
</BODY>
</HTML>
Introduction to java script
Although JavaScript bears the name of java, it is a very
different language that is used for a very different
purpose. It supports both web browser and server side scripting.
Browser scripts are used to create dynamic
web pages that are more interactive, more responsive. Before
discussing JavaScript, you should know some
basics. A variable defines a value stored at a location address
in the computer that may be accessed through
the variable. For example Var i=3; means
i Location name
Value at the location
65895 Location address
Rules for variables
Variable names can begin with an uppercase letter (A-Z), lower
case letter (a-z), an underscore character (_),
or dollar sign ($). Remaining characters can be any of the above
or from digits (0-9). In JavaScript variables
are case sensitive. It means that if you have a variable ‘money’
you cannot write ‘Money’ or ‘mONEY’. You
don’t need to define the variable with the data type (rather it
is not allowed in JavaScript)
General data types
They are as follows:
int or integer: This
indicates the whole numbers like 78 or 98 etc.
float : It is a
decimal fractions like 8.9 or 6.6 etc.
Char : It is any
alphabet from A-Z or any digit or for that matter any of the characters on the
key board you can see. Digits defined as chars cannot have
mathematical operation on them.
String: When more than
one chars join they make a string.
Boolean: It just has
true or false value. For example if you have variable ‘pass’ as boolean it
can be true or false only.
These data types vary in exact definition depending on the
language and tool you are using.
Some might have more data types then the ones discussed above.
JavaScript Data types are
Number, Boolean, String, Null and Undefined.
Event handler
Events describe actions that occur as the result of user
interaction with a web page or other browser-related
activities. For example, when a user clicks a hyperlink or a
button or enters data in a form, an event is
generated informing the browser that action has occurred and
that further processing is required. The
3
55
keywords responsible for activating certain actions on HTML
document are called Event handlers. Some
common event handlers are as follows: onclick, ondbclick,
onfocus , onload, onsubmit, onselect, onblur,
onchange, onmousedown, onmousemove, onmouseout, onmouseover.
Changing images using event handlers
Consider following examples:
<HTML>
<BODY>
<IMG SRC=contents.gif
WIDTH=170
HEIGHT=50
BORDER=0
NAME=picture
onmouseover="picture.src='search.gif';picture.width=250;
picture.height=100"
onmouseout="picture.src='contents.gif';picture.width=170;
picture.height=50">
</BODY>
</HTML>
Result is shown in Fig. 4 below.
Note that we can change the width and height of the
resulting picture, that is, ‘search.gif’.
Fig. 4
<HTML>
<BODY>
<A href=image2.gif
onmouseover="picture.src='search.gif';picture.width=250;
picture.height=100"
onmouseout="picture.src='contents.gif';picture.width=170;
picture.height=50">
<IMG SRC=contents.gif
WIDTH=170
HEIGHT=50
BORDER=0
NAME=picture>
56
</A>
</BODY>
</HTML>
Result is shown in Fig. 5 below. Note that using <A> we can make
the resulting image
‘search.gif’ clikable such that when a user clicks at it he
opens a different image ‘image2.gif,
as shown below.
Objects
In computer language an object consists of certain properties
and functions, exclusive to the object. In all
object oriented languages we can create objects of our own. In
Java Script we are provided with certain
already defined objects which are ready to use.
|
|
|
|
|