Simplest Rollover ( nonJavaScript PowerPoint Presentation

Simplest Rollover ( nonJavaScript PowerPoint Presentation

2018-02-26 19K 19 0 0

Description

!). 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’”>. ID: 636408

Embed code:

Download this presentation



DownloadNote - The PPT/PDF document "Simplest Rollover ( nonJavaScript" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.

Presentations text content in Simplest Rollover ( nonJavaScript

Slide1

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

Slide2

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>

Slide3

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

Slide4

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.

Slide5

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

Slide6

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

Slide7

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.

Slide8

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.

Slide9

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>

Slide10

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.

Slide11

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

Slide12

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

}

}

Slide13

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


About DocSlides
DocSlides allows users to easily upload and share presentations, PDF documents, and images.Share your documents with the world , watch,share and upload any time you want. How can you benefit from using DocSlides? DocSlides consists documents from individuals and organizations on topics ranging from technology and business to travel, health, and education. Find and search for what interests you, and learn from people and more. You can also download DocSlides to read or reference later.