Lec #7 Javascript

DCIT 65 – Web Development Lecture # 7
Image Object
- supported in all scriptable browsers since the days of NN3 and IE4.
Image object references for a document are stored in the object model as an array belonging to the document
object. Therefore, you can reference an image by array index or image name. Moreover, the array index can be a string
version of the image’s name.
Valid references to an image object:
document.images[n]
document.images[“imageName”]
document.imageName
Interchangeable images
The advantage of having a scriptable image object is that a script can change the image occupying the rectangular space
already occupied by an image. In current browsers, the images can even change size, with surrounding content
automatically reflowing around he resized image.
Precaching Images
Images take extra time to download from a web server until the images are stored in the browser’s cache. If you design
your page so that an image changes in response to user action, you usually want the same fast response that users are
accustomed to in other programs. Making the user wait seconds for an image to change can severely detract from
enjoyment of the page.
precaching images
– enabling scripts to load images into the browser’s memory cache without displaying the image.
– requires constructing an image object in memory.
An image object created in memory differs in some respects from the document img element object that you create
with the <image> tag. Memory-only objects are created by script, and you don’t see them on the page at all. But their
presence in the document code forces the browser to load the images as the page loads. The object model provides an
image object constructor function to create the memory typr of image object as follows:
var myImage = new Image(width, height);
Parameters to the constructor function are the pixel width and height of the image. These dimensions should match
the width and height attributes of the <img> tag. When the object exists in memory, you can then assign a filename or
URL to the src property of that image object:
myImage.src = “picKo.jpg”;
When the browser encounters a statement assigning a URL to an image object’s src property, the browser fetches
and loads that image into the image cache. All the user sees is some extra loading information in the status bar, as
though another image were in the page. By the time the entire page loads, all images generated in this way are tucked
1 Prepared by: Ms. Steffanie D. Maglasang

away in the image cache. You can then assign your cached image’s src property or the actual image URL to the src
property of the document image created with the <img> tag.
The change to the image in the document is instantaneous
2 Prepared by: Ms. Steffanie D. Maglasang

<html> <html>
<head> <head>
<script type="text/javascript"> <script type="text/javascript">
// initialize empty array
var imageLibrary = new Array(); function showimage()
{
// pre-cache four images if (!document.images)
imageLibrary["image1"] = new Image(120,90); return
imageLibrary["image1"].src = "p1.jpg" document.images.pictures.src=document.mygallery.picture.options[docu
imageLibrary["image2"]= new Image(140,100); ment.mygallery.picture.selectedIndex].value
imageLibrary["image2"].src = "p2.jpg" }
imageLibrary["image3"]= new Image(120,90);
imageLibrary["image3"].src = "p3.jpg" </script>
imageLibrary["image4"]= new Image(120,90); </head>
imageLibrary["image4"].src = "p4.jpg" <body>
<table border="0" cellspacing="0" cellpadding="0">
// load an image chosen from select list <tr>
function loadCached(list){ <td width="100%">
<form name="mygallery"><p>
var img = list.options[list.selectedIndex].value; <select name="picture" size="1" onChange="showimage()">
document.thumbnail.src = imageLibrary[img].src; <option selected value="p1.jpg">Marco Antonio "babyface assassin"
} Barrera</option>
</script> <option value="p2.jpg">Diego "chico" Corrales</option>
<body><center> <option value="p3.jpg">Floyd "money" Mayweather</option>
<img src="p1.jpg" name="thumbnail" height=90 width=120> <option value="p4.jpg">Manny "pacman" Pacquiao</option>
<form> </select>
<select name="cached" onchange="loadCached(this)"> </p>
<option value="image1">Marco Antonio "babyface assassin" </form>
Barerra </td>
<option value="image2">Diego "chico" Corrales </tr>
<option value="image3">Floyd "money" Mayweather <tr>
<option value="image4">Manny "pacman" Pacquiao <td width="100%"><p align="center"><img src="p1.jpg"
</select> name="pictures" width="160"
</form> height="170"></td>
</center> </tr>
</body> </table>
</head> </body
</html> 3 Prepared by: Ms. Steffanie D. Maglasang </html>

Lec #7 Javascript

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Lec #7 Javascript

Enviado por

Direitos autorais:

Formatos disponíveis

DCIT 65 – Web Development Lecture # 7

Valid references to an image object:

var myImage = new Image(width, height);

1 Prepared by: Ms. Steffanie D. Maglasang

The change to the image in the document is instantaneous

2 Prepared by: Ms. Steffanie D. Maglasang

Você também pode gostar