Simplest Rollover ( nonJavaScript PowerPoint Presentation

Simplest Rollover (nonJavaScript!)

We’re going to change the image’s source when the event, “

onmouseover

” occurs:

<

img

src

= “pic.jpg” height = “250” width = “250”

onmouseover

= “

src

= ‘pic2.jpg’”>

Note the quotes!!

What if we want to change the image back when the mouse pointer leaves the image?

<

img

src

= “pic.jpg” height = “250” width = “250”

onmouseover

= “

src

= ‘pic2.jpg

’”

onmouseout

= “

src

= ‘pic.jpg’”>

Text Rollover (nonJavaScript!)

Text doesn’t have attributes (like

onmouseover

)

So we use an anchor tag (<a>)

The

onmouseover

attribute can change the

src

attribute of the <

img

> tag, so we need an image tag

And we need to identify an image tag explicitly using the “name” attribute

E.g.,

<

img

height = “100” width = “100”

src

= “pic3.jpg” name = “

textrollover

”>

<a

onmouseover

= “

document.textrollover.src

= “pic4.jpg”><b>Text Rollover Example</b></a>

document.images

The

document.images

object reflects the images on a web page.

This is basically an array of all the images in a document

each image is also an object of its own.

you can refer to an image in one of the following ways:

document.images

[

i

] // array notation

document.images.

imageName

// property notation

Document.images

Consider the following HTML definition:

<IMG SRC="anything.gif" NAME="anything" HEIGHT="100" WIDTH="100">

If this is the

third image on the

page, the

following references reflect that image:

document.images

[2] // array notation

document.images.anything

//

using the name

document.anything

//

using the name (a

shortcut)

Array notation drawback: If you change the number of images on the page, the index number of your images

In general, use the name.

document.images.length

document.images.length

Returns the number of images on the page.

if there are 10 images on the page,

document.images.length

evaluates to 10,

document.images

[9] reflects the last image

Browser Compatability (reminder)

Not all browsers support the

document.images

object.

only Navigator 3.0x, 4.0x, and IE 4.0x have rollovers.

To make sure the browser supports the

document.images

object :

if (

document.images

)

{

…

}

This statement determines whether or not the

document.images

object exists.

If the object does not exist

document.images

is null, so it evaluates to false

if an object is not null, it evaluates to true

Creating an Image Object

var

variableName

= new Image();

The following statement preloads the desired image:

variableName

.src = "

imageURL

.gif";

T

he

src

property enables you to associate an actual image with an instance of the

I

mage

object.

Creating a Rollover

A rollover requires at least 2 images.

For example, take a look at the following images:

<IMG SRC="advann.gif" HEIGHT="24" WIDTH="120" NAME="

advan

">

<IMG SRC="advana.gif" HEIGHT="24" WIDTH="120" NAME="

advan

">

Note that the active and inactive images in a rollover

must

both be

the same size. Otherwise, the active image is automatically adjusted to the size of the inactive image.

Code for a rollover

To combine these two images into a rollover:

if (

document.images

)

{

var

advanoff

= new Image(); // for the inactive image

advanoff.src = "advann.gif";

var

advanon

= new Image(); // for the active image

advanon.src = "advana.gif"; }

function act()

{

if (

document.images) {document.images.advan.src = advanon.src; } }function inact() { if (document.images) {document.images.advan.src = advanoff.src; } }

The corresponding HTML code for this rollover is:

<A HREF="advantages.html"

onMouseOver

="act()"

onMouseOut

="

inact

()">

<IMG SRC="advann.gif" HEIGHT="24" WIDTH="120" NAME="

advan

" BORDER="0" ALT="

Netscent

Advantages">

</A>

Several Rollovers

Now consider a "menu" consisting of several rollovers.

Use a

standard naming scheme

for the variables and image names.

For example:

advan

= the image name,

advann

= name of a variable

Rule of thumb: use a constant suffix for inactive images, and another one for the active images.

function act(

imgName

)

{

if (document.images) {

document.images

[

imgName

].src = eval(imgName + "a.src"); }} function inact(imgName) { if (document.images) {document.images[

imgName

].

src

=

eval

(

imgName

+ "n.src");

}

}

The parameter,

imgName

, is used in two expressions:

document.images

[

imgName

].

src

// the instance

imgName

+ "n.src" // the URL

the argument is a string. By wisely choosing the variables and image names for our rollovers, we can use two general functions to activate and inactivate any image in the document.

<SCRIPT LANGUAGE="JavaScript">

<!–

if (

document.images

)

{

var

homen

= new Image();

homen.src = "homen.gif";

var

homea

= new Image();

homea.src = "homea.gif";

var advann

= new Image();

advann.src = "advann.gif";

var advana = new Image(); advana.src = "advana.gif"; var packn = new Image(); packn.src = "packn.gif"; var packa = new Image(); packa.src = "packa.gif"; var hebrewn = new Image(); hebrewn.src = "hebrewn.gif";

var

hebrewa

= new Image(); hebrewa.src = "hebrewa.gif"; } function act(imgName) { if (document.images) {document.images[imgName].src = eval(imgName + "a.src");} } function inact(imgName) { if (document.images) {document.images[imgName].src = eval(imgName + "n.src");} } // --> </SCRIPT>

In body:

<A HREF="home.html"

onMouseOver

="act('home')"

onMouseOut

="

inact

('home')">

<IMG SRC="homen.gif" HEIGHT="24" WIDTH="120" NAME="home" BORDER="0" ALT="Home"></A><

br

>

<A HREF="advantages.html"

onMouseOver

="act('

advan

')"

onMouseOut

="

inact

('

advan

')">

<IMG SRC="advann.gif" HEIGHT="24" WIDTH="120" NAME="

advan

" BORDER="0" ALT="Advantages"></A><

br

>

<A HREF="pack.html"

onMouseOver

="act('pack')"

onMouseOut

="

inact

('pack')">

<IMG SRC="packn.gif" HEIGHT="24" WIDTH="120" NAME="pack" BORDER="0" ALT="Packages"></A><

br

>

<A HREF="hebrew.html"

onMouseOver

="act('

hebrew

')"

onMouseOut

="

inact

('

hebrew

')">

<IMG SRC="hebrewn.gif" HEIGHT="24" WIDTH="120" NAME="

hebrew

" BORDER="0" ALT="Hebrew"></A><

br

>

Example:

first image is named “home”

Its

onMouseOver

event invokes act()

with"home

".

The same rule applies to the image's

onMouseOut

event handler.

Note: the variables are named

homen

and

homea

, for the inactive and active image (respectively).

Rollover that swaps 2 images

if (

document.images

)

{

var

homen

= new Image();

homen.src = "homen.gif";

var

homea

= new Image();

homea.src = "homea.gif";

var

advann

= new Image();

advann.src = "advann.gif";

var advana = new Image(); advana.src = "advana.gif"; var packn = new Image(); packn.src = "packn.gif"; var packa = new Image(); packa.src = "packa.gif"; var hebrewn = new Image(); hebrewn.src = "hebrewn.gif";

var

hebrewa

= new Image(); hebrewa.src = "hebrewa.gif"; var homeinfo = new Image();homeinfo.src = “homeinfo.gif”;var advaninfo = new Image();advaninfo.src = “advantagesinfo.gif”;var packinfo = new Image();packinfo.src = “packagesinfo.gif”;var hebrewinfo = new Image();hebrewinfo.src = “hebrewinfo.gif”;} function act(imgName) {

if (

document.images

)

{

document.images

[

imgName

].

src

=

eval

(

imgName

+ "a.src");

document.images

[“holder”].

src

=

eval

(

imgName

+ “info.src”);

}

}

function

inact

(

imgName

)

{

if (

document.images

)

{

document.images

[

imgName

].

src

=

eval

(

imgName

+ "n.src");

document.images

[“holder”].

src

= “clear.gif”;

}

}

In Body

In body:

<A HREF="home.html"

onMouseOver

="act('home')"

onMouseOut

="

inact

('home')">

<IMG SRC="homen.gif" HEIGHT="24" WIDTH="120" NAME="home" BORDER="0" ALT="Home"></A><

br

>

<A HREF="advantages.html"

onMouseOver

="act('

advan

')"

onMouseOut

="

inact('advan')"> <IMG SRC="advann.gif" HEIGHT="24" WIDTH="120" NAME="advan" BORDER="0" ALT="Advantages"></A><br><A HREF="pack.html" onMouseOver="act('pack')" onMouseOut="inact('pack')"> <IMG SRC="packn.gif" HEIGHT="24" WIDTH="120" NAME="pack" BORDER="0" ALT="Packages"></A><

br

>

<A HREF="hebrew.html"

onMouseOver="act('hebrew')" onMouseOut="inact('hebrew')"> <IMG SRC="hebrewn.gif" HEIGHT="24" WIDTH="120" NAME="hebrew" BORDER="0" ALT="Hebrew"></A><br><IMG SRC = “clear.gif” Name = “holder” Height = “100” width = “100”>Example:first image is named “home” Its onMouseOver event invokes act() with"home". The same rule applies to the image's onMouseOut event handler.

Note: the variables are named

homen

and

homea

, for the inactive and active image (respectively).