Creating a Cycling Banner

elitesssInternet et le développement Web

16 févr. 2014 (il y a 3 années et 4 mois)

327 vue(s)

Creating a Cycling Banner

Dreamweaver

Cycling Banner


When you are surfing the Web, you
usually encounter commercial Web sites
containing advertisements that are
constantly changing. These cycling
banners (also known as ad banners) can
be created in various ways using different
Internet technologies. One of the easiest
and most efficient ways to create these
types of advertisements is by using
JavaScript events and functions.

Cycling Banner


A cycling banner is really nothing more
than a sequence of graphic images that
are displayed one after another with a
small pause between each image change.
After all of the images in the sequence
have been displayed, the browser will
cycle back to the first image and start the
sequence all over again. This is the
reason why it is called a “Cycling” Banner

Time and Effort!


You will use a single “JavaScript event”


You will use a simple “JavaScript function”


You will put these images in a folder
where you have been saving your web
images.

Source Code

<HTML>

<HEAD>

<TITLE> HTML AND JavaScript</TITLE>

<SCRIPT>

Var imgArray = new Array (4);

imgArray [0] = new Image;

imgArray [0].src=“lions.gif”;

Etc, etc

Function cycle ()

{


document.banner.src=imgArray[index].src;

</script>

</head>

</body>

</html>

Source Code


Array


an array is simply a collection of similar
objects that can be accessed by means of a variable
name and an index


An index is simply an integer variable that identifies
which element of an array is being referenced


Arrays are available in every modern computer
language


Our array will have four elements and its variable
name will be called imgArray


In this case the array will contain four Image objects,
but arrays can contain any other type of JavaScript
object as well


Source Code


Sac sets the property of objects


Vary index = 0 a variable named index and
a value must be assigned


Function cycle ()


JavaScript


A scripting language (not a program
language)


More powerful than HTML


Allows Web Page Developers to add
programming features to a web document
without knowing a programming language



JavaScript


Does not need a compiler


Programs automatically when the source
code is processed by the target program


When a document contains embedded
JavaScript code, the code is interpreted by
the browser


It is then converted into its machine
-
readable form “on the fly”



JavaScript


When “on the fly” programming
occurs….developers use the term
Interpretation

to describe the line
-
by
-
line
conversion process that automatically
occurs.

JavaScript: Power


Usually used for one or more strings of
text that are inserted into the main Web
Page


Text can change from day to day


Text can change from one computer to
another


Different looking Web Pages could be the
result of time, location, or the variable of a
Browser



JavaScript


To Begin


<SCRIPT>
-

beginning of document


</SCRIPT>
-

end of document



The Web Browser will interpret
everything between these 2 tags as
JavaScript Code, not HTML

JavaScript: Final Product


The browser then converts the script
(Interpretation Process)

into equivalent
machine
-
readable form called binary code.
Binary Code is then executed and output
will be inserted into the HTML text stream
& displayed.

JavaScript:

Not just any old Script


Your text must conform to certain rules


You must adhere to
Program Syntax


You must use JavaScript
Keywords and
Operators




JavaScript Properties


Made up of a number of invisible entities
called
Objects

that contain a well defined
set of capabilities


In order to make use of these capabilities,
the programmer must use known
methods

within objects

JavaScript


To invoke the service of a method or to
use a method; the programmer must key
the name of the object, followed by a
period
(the. character)

followed by the
method name [visualize a list of
ingredients to a recipe]


JavaScript


Method names are always followed by a
parameter list


[the parameter list provides the method
with the information it needs to perform
the function]

JavaScript


Syntax of the parameter list has an
opening parenthesis, zero or more
parameter items, a closing parenthesis


IN OTHER WORDS:

To “write” method of the JavaScript object
called “document” your code would be:



document.write(“A string of text.”):


Increment and Decrement


Java includes increment ( ++ ) operators


Java includes decrement (
-

-

)


operators


These increase or decrease a variable’s
value by one. A variable is a memory
location, referenced by an identifier, whose
value can be changed during execution of a
program.

HTML


<hr> is the Horizontal Rule Tag


By using the option


<hr size=N> you can allow for the size of the
thickness of the line in pixels


Example: <hr size=8>: or <hr size=20>;


If you were going to change the line width:


<hr width=X>


Example: <hr width=80 size=10>

Project


You will create a Cycling Banner or a Java
Script rotation of images.


You will collect 5 images and have them
cycle on a webpage utilizing JavaScript


You will write the code and show me the
script in Dreamweaver

JavaScript

Creating Rollover Buttons and
Image Rollovers

JavaScript

<html>

<head>

<title> Rollover Buttons </Title>

<SCRIPT language=“javascript”>

<!


var image1=new Image;

var image2=new Image;

image1.src=“images/picture.jpeg”;

image2.src=“images/picture2.jpeg”;

{


if (type == 1)


{


document.picture.src=image1src;


}

}

</Script>


HTML


HTML tag


Starting tag


Ending tag


Nested tag


Empty tag


Source code

HTML


Attributes using HTML


An attribute is an instruction that further specifies
a tag’s characteristics. Attributes allow you to
add colors, styles and alignment to a page


You place attributes in opening tags. The
attribue has a name, an equal sign (=), and a
descriptor that must appear in quotes to conform
to HTML specifications. The attribute must also
be lowercase to meet specifications


Background Color Attributes

<
BODY bgcolor
=
:#33CC33
”>

Attribute Name

Hexadecimal Color

HTML TAGS


src: specifies the source location of the image


alt: gives the browser an alternative text
message to display if the image is missing


align: wraps text around the image


border: places a border around an image


width and height: specifies the image’s width
and height

Text Links


A text link is a text a user clicks to activate
a hyperlink.

<A href=
http://www.centurypubliclibrary.org
>

Century Public Library</A>

Graphic Link


A graphic link is an image a user clicks to
activate a link.

<A href=
http://www.centurypubliclibrary.org
>

<IMG src=“images/book.gif”alt=“Books”align=“left”

border=“0”width=“40” height=“30”> </A>

Text and graphic Links


There are
relative

and
absolute

links


Relative Links contains the name of the
file being linked to


The link is relative because it links pages
within the same Web site


Absolute links contain the complete URL
or path of the file being linked to