Creating a Cycling Banner

elitesssInternet et le développement Web

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

387 vue(s)

Creating a Cycling Banner


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

Source Code





Var imgArray = new Array (4);

imgArray [0] = new Image;

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

Etc, etc

Function cycle ()







Source Code


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

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 ()


A scripting language (not a program

More powerful than HTML

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


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”


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

to describe the line
conversion process that automatically

JavaScript: Power

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

Text can change from day to day

Text can change from one computer to

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


To Begin


beginning of document


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
readable form called binary code.
Binary Code is then executed and output
will be inserted into the HTML text stream
& displayed.


Not just any old Script

Your text must conform to certain rules

You must adhere to
Program Syntax

You must use JavaScript
Keywords and

JavaScript Properties

Made up of a number of invisible entities

that contain a well defined
set of capabilities

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

within objects


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

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


Method names are always followed by a
parameter list

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


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


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 (




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


<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>


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


Creating Rollover Buttons and
Image Rollovers




<title> Rollover Buttons </Title>

<SCRIPT language=“javascript”>


var image1=new Image;

var image2=new Image;




if (type == 1)







HTML tag

Starting tag

Ending tag

Nested tag

Empty tag

Source code


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

Attribute Name

Hexadecimal Color


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=

Century Public Library</A>

Graphic Link

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

<A href=

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

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

Text and graphic Links

There are



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