1 / 13

Beginning DHTML: Working with document.images

Learn to manipulate web page images dynamically using the document.images attribute in JavaScript. Explore image referencing, updating, mouse event handling, pre-loading, and animation techniques.

rebeccag
Download Presentation

Beginning DHTML: Working with document.images

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Beginning DHTML:Working with document.images

  2. Goals By the end of this lecture you should … • Understand that DOM tracks available images in a web page using the document.images attribute (for which JavaScript constructs an array object). • Understand how to use the document.images attribute to dynamically manipulate images on the user's screen, based on user-driven events.

  3. The document.images Attribute • The document.images attribute represents an array of objects created in the current web page by the <img> tag. Each <img> occupies a subscript of the array, beginning with the first <img> tag. The subscript 0 represents it.

  4. Referencing Images • We can reference images in a document by referring to their subscript in the images arrays:window.document.images[0] • We can also reference images using the value assigned to the html name/id attributes:window.document.images[“myImage1”]

  5. Updating the src of an Image • To change an image, we can dynamically change the path assigned to its src attribute:window.document.images[0].src = “images/vacationImage02.jpg”

  6. Mouse Event Handlers • onMouseOver – The user puts the mouse over an image/document region. • onMouseOut – The user takes the mouse away from an image/document region. • onMouseDown – The user clicks on a specific image/document region. • onMouseUp – The user releases the mouse button over a previously-clicked specific image/document region.

  7. Take the next few minutes to examine the files called DocumentImages_01.htmlandDocumentImages_02.html

  8. Pre-Loading Images • It’s considered good practice to pre-load images into a browser’s cache before accessing them for an image swap or animation. To do so, create an image object:var updateImage = new Image(); • Then, update the new image’s src attribute:updateImage.src = “images/image01.gif”;

  9. Take the next few minutes to examine the files called DocumentImages_03.html

  10. “Animating” Images • We can display a succession of images by continuously updating the src attribute using a function called by the window.setInterval() method. • Remember that the setInterval() method returns an interval object. We can then pass the name of the object to window.clearInterval() to stop animation.

  11. Take the next few minutes to examine the files called DocumentImages_04.html

  12. Summary • JavaScript tracks all web page images created using the <img> tag via a special attribute, document.images, which JavaScript represents as an Array. • We can pre-load individual images into memory by using the Image constructor. continued …

  13. Summary • Each image has a src attribute, which represents the path of an image on the web server. • Various mouse events that JavaScript can track include onMouseOver, onMouseOut, onMouseDown and onMouseUp. • We can use the setInterval() and clearInterval()window methods to "animate" images.

More Related