JavaScript Bible, Gold Edition part 67 pdf

Even though the default value of the attribute is zero, surrounding the image with an A element or attaching the image to a client-side image map puts a border around the image.. dynsrc

Trang 1

Depending on the type and size of image, you will be amazed at the speedy response of this kind of loading With small-palette graphics, the image displays instantaneously

A popular user-interface technique is to change the appearance of an image that represents a clickable button when the user rolls the mouse pointer atop that art This action assumes that a mouse event fires on an element associated with the object Prior to IE4 and NN6, IMG element objects did not respond to mouse events

on their own The required technique was to encase the IMG element inside an A element This allowed the events associated with rollovers (onMouseOverand onMouseOut) and a user click on the image to effect some change (usually to navi-gate to another page) While IE4+ and NN6+ provide these events directly for IMG element objects, you can guarantee your pages to be backward-compatible if you continue to surround your images with A elements You can see examples of these kinds of actions in Chapters 12 and 22

Image rollovers are most commonly accomplished in two different image states: normal and highlighted But you may want to increase the number of states to more closely simulate the way clickable buttons work in application programs In some instances, a third state signifies that the button is switched on For example, if you use rollovers in a frame for navigational purposes and the user clicks a button to navigate to the Products area, that button stays selected but in a different style than the rollover highlights Some designers go one step further by providing a fourth state that appears briefly when the user mouses down an image Each one

of these states requires the download of yet another image, so you have to gauge the effect of the results against the delay in loading the page

The speed with which image swapping takes place may lead you to consider using this method for animation Though this method may be practical for brief bursts of animation, the many other ways of introducing animation to your Web page (such as via GIF89a-standard images, Java applets, and a variety of plug-ins) produce animation that offers better speed control In fact, swapping preloaded JavaScript image objects for some cartoon-like animations may be too fast You can build a delay mechanism around the setInterval()method, but the precise timing between frames varies with client processor performance

All browsers that implement the IMG element object also implement the document.imagesarray You can (and should) use the availability of this array as a conditional switch before any script statements that work with the IMG element or Imageobject The construction to use is as follows:

if (document.images) {

// statements working with images as objects

} Earlier browsers treat the absence of this array as the equivalent of falsein the

ifclause’s conditional statement

If you place an image inside a table cell, Navigator 3 sometimes generates two copies of the image object in its object model This can disturb the content of the document.images array for your scripts Specifying HEIGHT and WIDTH attributes for the image sometimes cures the problem Otherwise, you have to craft scripts so they don’t rely on the document.images array

Tip

IMG

Trang 2

Most of the properties discussed here mirror attributes of the IMG HTML element.

For more details on the meanings and implications of attribute values on the

rendered content, consult the HTML 4.0 specification (http://www.w3.org/TR/

REC-html40) and Microsoft’s extensions for IE (http://msdn.microsoft.com/

workshop/author/dhtml/reference/objects/img.asp)

Properties

align

NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5

The alignproperty defines how the image is oriented in relation to surrounding

text content It is a double-duty property because you can use it to control the

ver-tical or horizontal alignment depending on the value (and whether the image is

influenced by a floatstyle attribute) Values are string constants, as follows:

absbottom middle

absmiddle right

baseline texttop

bottom top

left

The default alignment for an image is bottom Increasingly, element alignment is

handed over to style sheet control

Example (with Listing 22-1) on the CD-ROM

Related Items: text-align, float style sheet attributes.

alt

The altproperty enables you to set or modify the text that the browser displays

in the image’s rectangular space (if height and width are specified in the tag) before

the image downloads to the client Also, if a browser has images turned off (or is

incapable of displaying images), the alttext helps users identify what is normally

displayed in that space You can modify this alttext even after the page loads

On the

CD-ROM

IMG.alt

Trang 3

Example on the CD-ROM

Related Item:titleproperty

border

The borderproperty defines the thickness in pixels of a border around an image Remember that if you wrap an image inside an A element to make use of the mouse events (for rollovers and such), be sure to set the BORDER=0attribute of the

<IMG>tag to prevent the browser from generating the usual link kind of border around the image Even though the default value of the attribute is zero, surrounding the image with an A element or attaching the image to a client-side image map puts

a border around the image

Related Items:isMap, useMapproperties

complete

Sometimes you may want to make sure that an image is not still in the process

of loading before allowing another process to take place This situation is different from waiting for an image to load before triggering some other process (which you can do via the image object’s onLoadevent handler) To verify that the IMG object displays a completed image, check for the Boolean value of the completeproperty

To verify that a particular image file has loaded, first find out whether the complete property is true; then compare the srcproperty against the desired filename

An image’s completeproperty switches to trueeven if only the specified LOWSRC image has finished loading Do not rely on this property alone for determining whether the SRCimage has loaded if both SRCand LOWSRCattributes are specified

in the <IMG>tag

On the

CD-ROM

On the

CD-ROM

IMG.complete

Trang 4

One of the best ways to use this property is in an ifconstruction’s conditional

statement:

if (document.myImage.complete) {

// statements that work with document.myImage

}

The complete property is not reliable in Navigator 4 and some versions of

Internet Explorer 4 For those browsers, the value returns true in all instances

Related Items:IMG.src, IMG.lowsrc, IMG.readyStateproperties; onLoad event

handler

dynsrc

The dynsrcproperty is a URL to a video source file, which (in IE) you can play

through an IMG element You can turn a space devoted to a static image into a video

viewer by assigning a URL of a valid video source (for example, an avior mpgfile)

to the dynsrcproperty of the image element object Unlike the srcproperty of

image objects, assigning a URL to the dynsrcproperty does not precache the video

You may experience buggy behavior in various IE versions when you assign a

value to an image’s dynsrcproperty after the IMG element renders a gif or jpg

image In IE5/Windows, the status bar indicates that the video file is still

download-ing, even though the download is complete Clicking the Stop button has no effect

IE5.5/Windows may not even load the video file, leaving a blank space on the page

IE5/Macintosh changes between static and motion images with no problems, but

playing the video file multiple times causes the IMG element to display black space

beyond the element’s rectangle You can experience all this behavior in the example

provided in Listing 22-3 None of these bugs is fatal, but they should discourage you

from using the IMG element as a vehicle for video content

Related Items:IMG.loop, IMG.startproperties

On the

CD-ROM

On the

CD-ROM

Note

IMG.dynsrc

Trang 5

fileModifiedDate

fileSize

These three IE-specific properties return information about the file displayed in the IMG element (whether still or motion image) Two of the properties reveal the dates on which the current image’s file was created and modified For an unmodi-fied file, its creation and modiunmodi-fied dates are the same The fileSizeproperty reveals the number of bytes of the file

Date values returned for the first two properties are formatted differently between IE4 and IE5 The former provides a full readout of the day and date; the lat-ter returns a format similar to mm/dd/yyyy Note, however, that the values contain only the date and not the time In any case, you can use the values as the parameter

to a new Date()constructor function This enables you to then use date calcula-tions for such information as the number of days between the current day and the most recent modification

Not all servers provide the proper date or size information about a file or in a format that IE can interpret Test your implementation on the deployment server to ensure compatibility

Also, be aware that these properties can be read-only for a file that is loaded in the browser JavaScript by itself cannot get this information about files on the server that are not loaded in the browser

All of these file-related properties are present in the Mac version of IE, but the values are empty

Related Items: None.

On the

CD-ROM

Note

IMG.fileCreatedDate

Trang 6

width

The heightand widthproperties return and (in later browsers) control the

pixel height and width of an image object The property is read-only in NN3 and

NN4, but it is read/write in all others that support the IMG element object

If you adjust the heightproperty of an image, the browser automatically

scales the image within the same proportions as the original But adjusting the

widthproperty has no effect on the heightproperty in most browser versions

Scaling of an image may cause unwanted pixelation in the image, so modify an

image’s size with extreme care

Related Items:hspace, vspaceproperties

href

See srcproperty

hspace

vspace

The hspaceand vspaceproperties control the pixel width of a transparent

margin surrounding an image Specifically, hspacecontrols the margins at the top

and bottom of the image; vspacecontrols the left and right side margins Images,

by default, have margins of zero pixels

Related Items:height, widthproperties

On the

CD-ROM

On the

CD-ROM

IMG.hspace

Trang 7

The isMapproperty enables you to set whether the image should act as a server-side image map When set as a server-side image map, pixel coordinates

of the click are passed as parameters to whatever link HREFsurrounds the image For client-side image maps, see the useMapproperty later in this chapter

longDesc

The longDescproperty is a URL of a file that is intended to provide a detailed description of the image associated with the IMG element While NN6 recognizes this property, the browser does not appear to do anything special with this information — whether specified by script or the LONGDESCattribute

Related Item:altproperty

Related Item:IMG.useMapproperty

loop

The loopproperty represents the number of times a video clip playing through the IMG element object should run After the video plays that number of times, only the first frame of the video appears in the image area The default value is 1; but if you set the value to -1, the video plays continuously Unfortunately, setting the property to 0prior to assigning a URL to the dynsrcproperty does not prevent the movie from playing at least once (except on the Mac, as noted in the dynsrcproperty discussion earlier in this chapter)

On the

CD-ROM

IMG.loop

Trang 8

Related Item:dynsrcproperty

lowsrc

lowSrc

For image files that take several seconds to load, recent browsers enable you to

specify a lower-resolution image or some other quick-loading placeholder to stand

in while the big image crawls to the browser You assign this alternate image via the

LOWSRCattribute in the <IMG>tag The attribute is reflected in the lowsrcproperty

of an image object

All compatible browsers recognize the all-lowercase version of this property But

the W3C DOM specification calls for the interCap “S” NN6 recognizes this version

as well

Be aware that if you assign a URL to the LOWSRCattribute, the completeproperty

switches to trueand the onLoadevent handler fires when the alternate file finishes

loading: The browser does not wait for the main SRCfile to load

Related Items:IMG.src, IMG.completeproperties

name

The nameproperty returns the value assigned to the NAMEattribute of an IMG

element Starting with IE4 and NN6, you can use the ID of the element to reference

the IMG element object via document.alland document.getElementById() But

references in the form of document.imageName and document.images[imageName]

must use only the value assigned to the NAMEattribute

On the

CD-ROM

On the

CD-ROM

IMG.name

Trang 9

In some designs, it may be convenient to assign numerically sequenced names to IMG elements, such as img1, img2, and so on As with any scriptable identifier, the name cannot begin with a numeric character Rarely, if ever, will you need to change the name of an IMG element object

Related Item:idproperty

nameProp

Unlike the srcproperty, which returns a complete URL in IE, the IE nameProp property (not implemented in IE5/Mac) returns only the filename exclusive of protocol and path If your image swapping script needs to read the name of the file currently assigned to the image (to determine which image to show next), the namePropproperty makes it easier to get the actual filename without having to perform extensive parsing of the URL

Related Item:IMG.srcproperty

protocol

The IE protocolproperty returns only the protocol portion of the complete URL returned by the srcproperty This allows your script, for example, to see if the image is sourced from a local hard drive or a Web server Values returned are not the actual protocol strings; rather, they are descriptions thereof: HyperText Transfer Protocolor File Protocol

On the

CD-ROM

On the

CD-ROM

IMG.protocol

Trang 10

Related Items:IMG.src, IMG.namePropproperties

src

The srcproperty is the gateway to precaching images (in instances of the Image

object that are stored in memory) and performing image swapping (in IMG element

objects) Assigning a URL to the srcproperty of an image object in memory causes

the browser to load the image into the browser’s cache (provided the user has the

cache turned on) Assigning a URL to the srcproperty of an IMG element object

causes the element to display the new image To take advantage of this powerful

combination, you preload alternate versions of swappable images into image objects

in memory and then assign the srcproperty of the image object to the srcproperty

of the desired IMG element object These powers are available in IE3 only in the

Macintosh version (specifically, version 3.01, which was the first scriptable version

of IE3 for the Mac)

In NN3 and NN4 (all OS platforms) and IE3 for the Mac, the size of the image

defined by the IMG element’s attributes (or, if not specified, then calculated by the

browser from the size of the incoming image) governs the rectangular space devoted

to that image An attempt to assign an image of a different size to that IMG element

object causes the image to rescale to fit the rectangle (usually resulting in a distorted

image) In all later browsers, however, the IMG element object resizes itself to

accommodate the image, and the page content reflows around the new size

Note that when you read the srcproperty, it returns a fully formed URL of the

image file including protocol and path This often makes it inconvenient to let the

name of the file guide your script to swap images with another image in a sequence

of your choice Some other mechanism (such as storing the current filename in a

global variable) may be easier to work with (and see the IE5+/Windows nameProp

property)

IE4+ replicates the srcproperty as the hrefproperty for an image object This

may be deprecated in IE, so stick with the srcproperty when dealing with the URL

of a still image

Example (with Figure 22-1 and Listing 22-4) on the CD-ROM

Related Items:IMG.lowsrc, IMG.namePropproperties

On the

CD-ROM

On the

CD-ROM

IMG.src

Định dạng
Số trang	10
Dung lượng	170,88 KB