JavaScript by Example (2nd Edition)

B.9.1 Creating an Inline Image

To include an image inline ( next to text) or otherwise , use the form:

<IMG SRC="ImageName">

Graphic files are usually .gif or .jpg. .jpg appears as . jpeg in Windows environments. While the .jpg extension can be used on Windows, most UNIX environments currently do not support .jpeg .

B.9.2 The Complex Tag

The coding used to create and place images introduces complexity to the tag. The opening anchor tag <A> for a hyperlink uses this complexity to identify the link (HREF). The image tag <IMG> adds SRC to identify the image. Since images on a page create complexity (increased load time, increased file size), complex, not to say complicated, tags become the norm. You use this complex tag form to define other elements of the Web page such as headings, paragraphs, and tables.

B.9.3 Sizing and Placing the Image

The warring factions of the Web world are constantly debating what a Web site should be. Much of the debate centers on images and their effect on page loading time. While many points of the image debate are beyond the scope of this overview, one is not: the image size attributes. Everyone agrees that it is best to include the width and height of an image to speed page loading. The browser window can give you the information if you know what to do and where to look. We will use Netscape directions for our example.

Launch Netscape, click on File in the text menu bar, select Open Page , then Choose File in the pop-up window, and locate the image on your computer. NOTE: make sure the "Types of Files" bar is set to "All Files (*.*)." Select the image whose dimensions you want to know and click the OK button. The blue bar at the very top of the browser window contains the measurements in pixels: width then height.

<IMG SRC=picture.gif WIDTH="40" HEIGHT="100" >

You position the image on the page by adding ALIGN="LEFT" (or "RIGHT" or "CENTER" ) inside the image tag.

B.9.4 Creating a Text Alternative for an Image

Not all browsers support graphics; LYNX, one of the oldest, does not.

Some users turn image-loading off, and most graphics are impractical for sight- impaired users. Using a text label to identify graphic images is good manners and practical. The ALT tag inside the <IMG> tag identifies text alternatives for graphics.

<IMG SRC="UpArrow.gif" ALT="UP">

The portion identifying the image does not have to be one word or a repeat of the image filename. Newer Browsers show ALT text when you "mouse over" the image, and inserting a user -friendly phrase such as View of downtown Rochester, 1948 or Back to Top rather than photo_main_47.jpg and arrow.gif can provide additional information to Web spiders that the image would otherwise conceal.

B.9.5 Where Do I Find Graphics?

The Web has many sites full of free graphics. You need to use discretion since some folks think that if butterflies are free, so are Bugs Bunny, Snoopy, Homer Simpson, and the Nike Swoosh, and there they all are on their "free graphics" Web site. The most useful graphics are part of the 4 B's: buttons , bars, ball, and backgrounds. They used to be very easy to find; every free Web graphics site had them, but with the new Web tools the trend is toward the "unique" (read baroque). One site that has the old reliables is the All Free Original Clipart page. Their URL is http://www.free-graphics.com/. The site is well organized so it is easy to review the small graphic objects you want. To get to the type of item you want, choose a category from the menu on the left side of the page. Each section has directions on how to download the image you want to use. When you work on the exercise to create a page of images you may want to use selections from this site.

B.9.6 Background Graphics

All but the earliest versions of Netscape and Microsoft Internet Explorer support background graphics, colors, and textures. You can get images from a Web graphic site such as the one listed above. Since some early browsers (and they're still out there) don't support background images, you can include code in the tag for a background color as well. The browser will pick up the color . This is useful, too, for those users who turn graphics off.

B.9.7 Creating Backgrounds

Since a background color or image can be included in as an attribute, the <BODY> tag can become quite complex. For a background image the form is the following:

<BODY BACKGROUND="filename.gif">

Background color is a bit tricky; it uses hexadecimals, but there are several sites on the Web that list these, and Web building tools include these codes. Basically, 000000 represents black and FFFFFF represents white. The form for background color follows :

<BODY BGCOLOR="#FF90CB">

To simplify things, there are some standard colors you can add using their name only. The current HTML standard names 16 of these colors; aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow, and white.

B.9.8 Default Colors

When the standards for the Web were first created, color monitors were VGA at best, and modems were 300 to 1200 baud. So, the default colors are rather mundane. The default background, referred to as light gray, is more of a battleship gray. Regular text is black. For hotlinks, "Unvisited" hotlink text is blue, an "Active" hotlink text is red, and "Visited" hotlink text is violet . Additionally, All hotlinks are underlined .

Now in the time of streaming media, monitors capable of displaying thousands of colors, and 56K modems, backgrounds can be anything, and an Active link changes so quickly to Visited it hardly matters what color it is. For best contrast on background, try white ( FFFFFF ) or black ( 000000 ). Experiment with near misses; word on the street is that off-white or black is easier on the eyes.

Besides the 16 named colors there are 216 "Websafe" colors that work on most browsers without doing strange things. Most graphics tools have a Websafe palette option. See Tables B.1 and B.2.

Hotlinks should be obvious to the user. Purists say stick to the default blue and purple for unvisited and visited. Newer browsers can disable hotlink underline . Leave the underline intact when you build a site and let the user decide.

Table B.1. Named colors for HTML 4.01 and CSS2.

Table B.2. Proprietary color names for Internet Explorer.

B.9.9 Bars, Bullets, and Icons

You can get these simple graphics from the All Free Graphics Web site to spruce up your page. The temptation is to use a lot of them because you can; don't yield to it. Be especially careful with animated GIFs. An envelope or mailbox constantly opening and closing at the bottom of a Web page can be mighty irritating .

Use bars in place of <HR> (hard rule) separators. Position them carefully .

<P ALIGN="CENTER"><IMG SRC="somebar.gif"><P>

Bullets are used to attract attention. (NEW!) is always popular. Small balls fall into the bullet category.

Icons, those small graphical representations, make great clickable images (links to other files). The image replaces the text that identifies the hotlink. This is the principle behind all those "Click here for " banner graphics you see on every Web site.

<A HREF="Some.html"><IMG SRC="icon.gif"></A>

To eliminate the "hot" blue border around a linked icon, add BORDER="0" to the image tag.

<A HREF="Some.html"><IMG SRC="icon.gif" BORDER ="0"></A>

B.9.10 Graphics Update

Flash 5 ” Need I say more? Types of graphics fall in and out of favor. The understated look is always good.

B.9.11 External Sights 'n' Sounds

You can use anchor and reference to link to an image as a separate entity. This will open a page to a stand-alone image. Many sites use this device to keep slow loading, large graphics below the main page.

<A HREF="Image.gif">link anchor</A>

The syntax is the same for a sound ( .au, .wav ) or movie ( .mov , . mpg )

NOTE : Sound and movies are slow loaders and not everyone can access these.