1 Lesson 7 Using Images with JavaScript HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.

Slides:

Advertisements

Similar presentations

Chapter 08: Adding Adding Interactivity Interactivity With With Behaviors Behaviors By Bill Bennett Associate Professor MSJC CIS MVC.

Advertisements

Principles of Web Design 5 th Edition Chapter Nine Site Navigation.

1 Lesson 5 Introduction to Cascading Style Sheets HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.

1 Lesson 9 Using JavaScript with Frames HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.

1 Lesson 10 Using JavaScript with Styles HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.

Create slices and hotspots Create links in Web pages Create rollovers from slices Create basic animation Add tweening symbol instances to create animation.

CIS101 Introduction to Computing Week 10 Spring 2004.

Computer Science 103 Chapter 4 Advanced JavaScript.

CIS101 Introduction to Computing Week 10. Agenda Your questions Final exam and final project CIS101 Student Survey Class presentations: Your Mad Libs.

JavaScript 101 Lesson 5: Introduction to Events. Lesson Topics Event driven programming Events and event handlers The onClick event handler for hyperlinks.

JavaScript, Third Edition

Chapter 9 Introduction to the Document Object Model (DOM) JavaScript, Third Edition.

Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.

Lesson 4 HTML Structural Design Techniques

1 Lesson 1 Quick HTML Know-How HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.

Lesson 8 Creating Forms with JavaScript

Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive.

JavaScript Events and Event Handlers 1 An event is an action that occurs within a Web browser or Web document. An event handler is a statement that tells.

© 2011 Delmar, Cengage Learning Chapter 11 Adding Media and Interactivity with Flash and Spry.

Spring Quarter 2002 De Anza College1 Chapter 10 – Rollovers Simple Rollovers Swap images  Stack two images on top of one another  When mouse over an.

Lesson 4-7 Arithmetic Sequences.

INTRODUCTION TO FRONTPAGE. TOPICS TO BE DISCUSSED……….  Introduction Introduction  Features Features  Starting Front Page Starting Front Page  Components.

Web Development Using ASP.NET CA – 240 Kashif Jalal Welcome to week – 4-1 of…

JavaScript II ECT 270 Robin Burke. Outline JavaScript review Processing Syntax Events and event handling Form validation.

Chapter 10 Creating Pop-Up Windows, Adding Scrolling Messages, and Validating Forms HTML5 & CSS 7 th Edition.

Dreamweaver – Dreamweaver Extras Web Design Section 8-4 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.

Adding User Interactivity – Lesson 51 Adding User Interactivity Lesson 5.

CSS Class 7 Add JavaScript to your page Add event handlers Validate a form Open a new window Hide and show elements Swap images Debug JavaScript.

Intro to Dreamweaver Web Design Section 7-1 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course.

Starter. Objectives: To examine the ways of making a product interactive To start designing the interactive features of your multimedia product.

1 Introduction to Javascript Peter Atkinson. 2 Objectives To understand and use appropriately some of the basic elements of Javascript: –alert and prompt.

Integrating JavaScript and HTML5 HTML5 & CSS 7 th Edition.

JavaScript: Functions © by Pearson Education, Inc. All Rights Reserved.

Section 17.1 Add an audio file using HTML Create a form using HTML Add text boxes using HTML Add radio buttons and check boxes using HTML Add a pull-down.

1 Lesson 3 Power Techniques HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.

Unit 2 — The Exciting World of JavaScript Lesson 6 — Using Images with JavaScript.

JavaScript, Fourth Edition

© 2012, Mike Murach & Associates, Inc.

Working with Graphics – Lesson 21 Working with Graphics Lesson 2.

Introducing the World Wide Web Internet- a structure made up of millions of interconnected computers whose users communicate with each other and share.

44238: Dynamic Web-site Development Client Side Programming Ian Perry Room:C48 Extension:7287

ECA 225 Applied Interactive Programming1 ECA 225 Applied Online Programming basics.

JavaScript, Fourth Edition Chapter 4 Manipulating the Browser Object Model.

JavaScript – return function, time object and image rollover.

COS 125 DAY 20. Agenda Assignment 8 not corrected yet Assignment 9 posted  Due April 16 New course time line Discussion on Scripts 

Unit 2, Lesson 7 Creating Web Pages and Web Documents.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 14 Key Concepts 1 Copyright © Terry Felke-Morris.

JavaScript: Functions © by Pearson Education, Inc. All Rights Reserved.

Chapter 11 Adding Media and Interactivity. Chapter 11 Lessons Introduction 1.Add and modify Flash objects 2.Add rollover images 3.Add behaviors 4.Add.

INTRODUCTION JavaScript can make websites more interactive, interesting, and user-friendly.

Web Programming Overview. Introduction HTML is limited - it cannot manipulate data How Web pages are extended (include): –Java: an object-oriented programming.

Introducing DHTML. Goals Understand the concept of DHTML as a tool for creating dynamic content Understand how to use DOM properties to make changes in.

JavaScript II ECT 270 Robin Burke. Outline Functions Events and event handling Form validation.

The “Quick Change” Method of Web Design. Create Your Design Create and cut up the graphics for your web site. Create a masterstyle sheet. Name it “plainmasterstylesheet.html.

1 Lesson 6 Introducing JavaScript HTML and JavaScript BASICS, 4 th Edition.

Adding Interactivity Comp 140 Fall Web 2.0 Major change in internet usage –From mostly static pages Text Graphics Simple links –To new paradigm.

JavaScript Wrap Up JavaScript is a versatile programming language … if you know it, you can learn others © 2004, Lawrence Snyder.

Google Tag Manager and YaleSites: The Next Step for Google Analytics Yale University DrupalCamp 2016 Steve Wieda March 24, 2016 Yale University Library.

The Web Wizard’s Guide To JavaScript Chapter 4 Image Swapping.

COM621: Advanced Interactive Web Development Lecture 6 – JavaScript (cont.)

Copyright © Terry Felke-Morris Web Development & Design Foundations with HTML5 8 th Edition CHAPTER 14 KEY CONCEPTS 1 Copyright.

Section 10.1 Define scripting

Unit 2 — The Exciting World of JavaScript

Section 17.1 Section 17.2 Add an audio file using HTML

Web Development & Design Foundations with HTML5 7th Edition

Functions, Regular expressions and Events

The Web Wizard’s Guide To JavaScript

Web Design and Development

Web Programming and Design

Presentation transcript:

1 Lesson 7 Using Images with JavaScript HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner

Lesson 7 Barksdale / TurnerHTML and JavaScript BASICS 4E 22 Objectives Name and describe JavaScript events. Create an image rollover. Make a hyperlink rollover. Construct a cycling banner. Display random images. Create a JavaScript slide show.

Lesson 7 Barksdale / TurnerHTML and JavaScript BASICS 4E 33 Vocabulary ad banner array cycling banner decrement entity code event floating-point number function hyperlink rollover image rollover

Lesson 7 Barksdale / TurnerHTML and JavaScript BASICS 4E 44 Vocabulary (continued) increment index real number slide show variable

Lesson 7 Barksdale / TurnerHTML and JavaScript BASICS 4E 55 Making Graphic Images Come Alive Acquiring an understanding of JavaScript events is important for working with images. An event is a system-level response to the occurrence of some specific condition. – Some conditions are generated by the Web browser software – However, most conditions are caused by user actions

Lesson 7 Barksdale / TurnerHTML and JavaScript BASICS 4E 66 Making Graphic Images Come Alive (continued) Another important concept to master when working with images is JavaScript functions. A function is a segment of JavaScript code that can be invoked or called. – Methods and functions are the same, except that methods have been defined as part of the objects that make up the JavaScript programming environment.

Lesson 7 Barksdale / TurnerHTML and JavaScript BASICS 4E 77 Making Graphic Images Come Alive (continued) Teaching an Image to Roll Over: An image rollover changes the appearance of an image when a visitor moves the mouse pointer over the image. – The onMouseOver event is generated when the mouse pointer is over a particular object. – The onMouseOut event is generated when the user moves the mouse pointer off of the object.

Lesson 7 Barksdale / TurnerHTML and JavaScript BASICS 4E 88 Teaching a Hyperlink to Roll Over A hyperlink rollover is triggered when the user moves the mouse pointer over a hyperlink. – The code for an image rollover and a hyperlink rollover are very similar.

Lesson 7 Barksdale / TurnerHTML and JavaScript BASICS 4E 99 Teaching a Hyperlink to Roll Over (continued) The graphic to the right shows JavaScript events.

Lesson 7 Barksdale / TurnerHTML and JavaScript BASICS 4E 10 Creating a Cycling Banner A cycling banner (or ad banner) is a sequence of graphic images that are displayed one after another with a small pause between each image.

Lesson 7 Barksdale / TurnerHTML and JavaScript BASICS 4E 11 Creating a Cycling Banner (continued) The code to create a cycling banner includes an array, an index, and an imgArray. Array: a collection of similar objects, accessed by means of a variable name and an index. – imgArray: a variable name – Index: an integer variable that identifies which element of an array is being referenced. Note, to increment a number is to add 1 to it.

Lesson 7 Barksdale / TurnerHTML and JavaScript BASICS 4E 12 Displaying Random Images JavaScript has built-in support for random number generation, which makes displaying images in random order easy to do. The source code is very similar to the code for the cycling banner. A real number (also called a floating-point number) is a numerical value that includes a decimal portion.

Lesson 7 Barksdale / TurnerHTML and JavaScript BASICS 4E 13 Creating a JavaScript Slide Show When a user changes images by clicking Web page objects, it is an electronic slide show. JavaScript slide show

Lesson 7 Barksdale / TurnerHTML and JavaScript BASICS 4E 14 Creating a JavaScript Slide Show (continued) Decrement means to subtract 1 from the current value of a variable. There are many entity codes available in JavaScript. In this lesson you use which is the “non-breaking space” entity code.

Lesson 7 Barksdale / TurnerHTML and JavaScript BASICS 4E 15 Summary In this lesson, you learned: How to use JavaScript events. How to create an image rollover. How to create a hyperlink rollover. How to create a cycling banner. How to display random images. How to create a JavaScript slide show.