Sunteți pe pagina 1din 8

Adding graphics to HTML files

There are two ways to include images (graphics) in an HTML document: inline and external. You'll usually use
inline images, which appear directly in the HTML page. External images are downloaded when a user clicks a
link to the image.
Some browsers can read a wide variety of types of image files, but some can read only a few. The most
commonly readable format is .GIF files. There are lots of shareware products that create .GIFs or translate one
type of image (for example .BMP) to .GIF. JPEG image files are usually better for photographic images, or
images with a lot of detail. GIF images can be better for images with large expanses of solid color.
To include an image in your HTML document, use the <IMG> tag.
<IMG SRC="some.gif">
The previous line includes the file some.gif in your HTML document. This assumes that the file is in the same
directory as your HTML document. If the file is in another directory, use either the relative or absolute path.
You can include images on separate lines, or you can include them in text in headings, body paragraphs, and
even lists.
Elements of <IMG>
The image tag has several attributes that control the graphic. The first is SRC. This defines the source for the
graphic--the .GIF image file.
You can control where the image is positioned relative to the text of the line it appears in by using the ALIGN
attribute. You can set ALIGN to one of nine different values: LEFT, RIGHT, TOP, ABSMIDDLE,
ABSBOTTOM, TEXTTOP, MIDDLE, BASELINE, or BOTTOM. If you don't specify alignment, it defaults to
BOTTOM.

Three of the ways to align images.


Some browsers can't display images. You can include a text string that describes the image by using the ALT
attribute.
The following example displays an image and includes the descriptive text for browsers that can't display
images:
<IMG SRC="icon.gif" ALT="This is my icon">
The following example shows a series of text blocks with images aligned according to many of the alignment
options offered by Navigator:
<hr>
text around <img src=red_ball.gif width=18 height=18> the image.
<hr>

<b>top</b> text around


<img src=red_ball.gif align=top width=18 height=18>
the image.
<hr>
<b>absmiddle</b> text around
<img src=red_ball.gif align=absmiddle width=18 height=18>
the image.
<hr>
<b>absbottom</b> text around
<img src=red_ball.gif align=absbottom width=18 height=18>
the image.
<hr>
<b>baseline</b> text around
<img src=red_ball.gif align=baseline width=18 height=18>
the image.
<hr>
<b>left</b> text around
<img src=red_ball.gif align=left width=18 height=18>
the image.
Oh, if only we could make the text flow around an image. We could do
such great formatting if we had the capability to let text flow around
images of all kinds: photos of animals, plants, buildings, and people,
or simple line drawings of various helpful sorts.
<br clear=all>
<hr>
<b>right</b> text around

<img src=red_ball.gif align=right width=18 height=18></applet>


the image.
Oh, if only we could make the text flow around an image. We could do
such great formatting if we had the capability to let text flow around
images of all kinds: photos of animals, plants, buildings, and people,
or simple line drawings of various helpful sorts.
<br clear=all>
<hr>

Linking images to other pages


You can use graphics as links to other pages by embedding the image tag in a link. The following example adds
a circle graphic and links it to the HTML document called circles.
<A HREF="circles.html"><IMG SRC="circle.gif"></A>
You can combine graphics and text in one link. This means that you can click either the graphic or the text to
jump to the corresponding page:
<A HREF="icons.html"><IMG SRC="myicon.gif">My icon is cool</A>
Interlaced GIFs
Interlacing is a feature of the GIF file format that lets a viewer or browser display a file with progressively
greater detail in four successive passes. When Navigator loads an interlaced GIF, the first pass starts at row 0
and displays every eighth row of bitmap data; the second pass starts at row 4 and also displays every eighth
row. Similarly, the third and fourth passes load progressively more data in a non-linear fashion until the full
image is loaded.
When Navigator loads an interlaced GIF, the image appears to gradually fade in. When 50% of an interlaced
GIF is loaded, a user can interpret the image because every fourth row of data is visible. When Navigator loads
a non-interlaced GIF, each row of data is loaded sequentially. When 50% of a non-interlaced GIF is loaded,
only the top half of the image is visible.
Navigator and most other browsers that support the GIF format support interlaced GIFs. Third-party tools are
available on the Internet to let you convert a non-interlaced GIF to the interlaced format.
Image maps

An image map is a graphic that has clickable regions that link to different pages. For example, you can have an
image with a square and a circle where a click in the square takes you to one page and a click in the circle takes
you to a different page.
Different

areas

of

an

image

map

can

jump

to

different

Web

pages.

HTML provides two forms of image maps:

Client-side image maps are defined by the combination of MAP and AREA tags and are loaded into the
Navigator as hypergraphics. When a user clicks the image, Navigator determines what URL to load
based on the information in the AREA tag. The USEMAP attribute of the IMG tag specifies an image as
a client-side image map. Client-side image maps usually respond quickly, and can be developed and
tested locally.
Server-side image maps are defined by the combination of A and IMG tags and are loaded into the
Navigator as ordinary IMG files. When a user clicks the image, the server determines what URL to load.
The ISMAP attribute of the MG tag specifies an image as a server-side image map. Server-side image
maps can be slower to respond, because the processing usually takes place on the server. For
information on how to use Navigator JavaScript to do the processing locally, see the JavaScript Guide.

Client-side image map


Defining a client-side image map is a two-step process:
1. Define the map using the MAP and AREA tags. The MAP tag contains one or more AREA tags. Each
AREA tag describes a different region as a hyperlink in the image and specifies the URL to which it
connects.
2. Associate the map definition with a specific image by specifying the USEMAP attribute of the IMG tag.
The NAME attribute of MAP specifies a name for the image map. This name is referenced by the
USEMAP attribute of IMG to associate the map definition with an image.
Server-side image map
Defining a server-side image map is a two-step process:
1. Create a .map file containing the regions for your image file and store that file on the server. You should
keep it in the same directory as the image file.
2. Reference the image and map file in your HTML file by using the IMG tag.
When a user clicks a region of a server-side image map, the browser sends the coordinates of the click to the
server. The imagemap program on the server uses the coordinates and a database to determine the URL to load.
To create a server-side image map, place an IMG tag within a link, and use the ISMAP attribute of the IMG tag
to specify that the image is a server-side image map. For example , to include an image called logo.gif as a
server-side image, use the following lines in your HTML file (and make sure the logo.gif file is in the same
directory):

<A HREF="http://www.homepage.com/images/logo.map">
<IMG SRC="logo.gif" ISMAP>
</A>
Specifying regions for client-side images
For client-side images, use the SHAPE attribute to specify any of the following shapes for the region defined by
the AREA tag:

rect specifies that the region enclosed by AREA is a rectangle.


poly specifies that the region enclosed by AREA is a polygon.
circle specifies that the region enclosed by AREA is a circle.
default specifies a region as the default. You can use the default region to specify a URL for any part of
the image not covered by another region.

Figure 2.3 shows the different shapes a map region can have.

Defining regions in an image

map

If you do not specify the SHAPE attribute, Navigator uses "rect" as the default value.
Use the COORDS attribute to specify the coordinates of the region defined by the AREA tag. Coordinates vary
according to the value of the SHAPE attribute:

For a rectangle, x1 and y1 specify the upper left corner of the region, and x2 and y2 specify the lower
right corner of the region.
For a polygon, x1 and y1 specify the first vertex, x2 and y2 specify the second vertex, and so forth. To
close the polygon, the coordinates for the last vertex should be the same as the coordinates for the first
vertex.
For a circle, x-center and y-center specify the coordinates of the center, and radius specifies the circle's
radius.

Coordinates are specified in a 0-based system. For example, in a region that is 100 pixels high and 100 pixels
wide, the coordinates of the top left corner are 0,0 and the coordinates of the lower right corner are 99,99.
Some third-party tools are available on the Internet to let you visually specify the coordinates for a map region.
When a region defined by one AREA tag intersects another, the region that is defined first in the map definition
takes precedence in the overlapping region.

Specifying regions for server-side images


For server-side images, you create an ASCII text file with the .map extension that contains the coordinates for
the areas you want to link. Coordinates are specified from the upper left corner of the image. There are several
good imaging applications that will give you the coordinates for a point in an image.
Each line in the map file specifies a clickable region. Lines have the format:
method URL coordinate1 coordinate2
Method defines the shape the coordinates specify. Methods can be:

point URL x,y specifies a clickable point in the image. This is useful if you click an undefined area
because the click is then sent to the closest point to the clicked area.
circle URL x,y x,y specifies a circle. Circles need two coordinates--the circle center and any point on the
circle's edge.
rect URL x,y x,y specifies a rectangle by its upper left and lower right corners.
poly URL x,y x,y specifies a polygon of up to 100 sides. Each x,y pair is the point where two sides of
the polygon meet. The last x,y pair is connected to the first to enclose the polygon.
default URL defines the URL to jump to when someone clicks in an area not specified by any regions. If
you use a point in the map file, then the default is never used.

The following text is a sample map file. Lines beginning with # are comment lines that are ignored by the
server.
# sample map file image
# This is the top left circle
circle http://www.netscape.com/funstuff 37,39 32,62
# This is the rectangle in the middle
rect http://www.netscape.com/fabulous 75,7 150,39
# This is the point
point http://www.netscape.com/homepage 125,62
# This is that weird polygon
poly http://w3.netscape.com/ 175,35 190,5 200,10 220,9 219,37 203,62
Specifying the destination of a link
When a user clicks the map region, Navigator displays the page specified by the URL in the HREF attribute.
For server-side images, the destination URLs appear in the .map file. However, for client-side images, the
URLs appear in the AREA tags in the HTML file. This section describes how to specify URLs for client-side
images.
Eric Bina says we do not support putting MAP and IMG in separate files.

If the MAP tag and its related IMG tag are in different files and you specify a relative URL for the HREF
attribute, the full URL for HREF is constructed using the URL of the document that contains the MAP tag as a
reference. If the document that contains MAP uses a BASE tag, the full URL for HREF is constructed by using
the BASE HREF value as a reference.
Any region of an image that does not have an HREF attribute does not function as a hyperlink. If you explicitly
want to prevent a region from functioning as a hyperlink, specify the NOHREF attribute.
Use the TARGET attribute to specify the name of the window or frame that displays the destination URL. If
you do not specify a TARGET attribute, Navigator displays the destination URL in the current window or
frame.
Example 1: a client-side image map as a toolbar
In this example, an image map is used as a toolbar to help users navigate in a web site. The following
illustration
shows
what
the
finished
image
map
looks
like
to
a
user:

Each button on the toolbar is a separate region of the image map. The seven buttons correspond to regions
defined by seven AREA tags. The following code defines the map:
<MAP NAME="mainmap">
<AREA COORDS="0,0,65,24" HREF="/escapes/index.html">
<AREA COORDS="66,0,132,24" HREF="/comprod/index.html">
<AREA COORDS="133,0,185,24"
HREF="http://merchant.netscape.com/netstore/index.html"
TARGET="_top">
<AREA COORDS="186,0,248,24" HREF="/newsref/index.html">
<AREA COORDS="249,0,318,24" HREF="/assist/index.html">
<AREA COORDS="319,0,390,24" HREF="/commun/index.html">
<AREA COORDS="391,0,467,24" HREF="/business_solutions/index.html">
</MAP>

Because no SHAPE attribute is specified for any AREA tag, the shape of each region defaults to a rectangle.
The third AREA tag uses the "_top" value for its TARGET attribute to specify that its URL is loaded into the
full Navigator window.
The image used for the toolbar is nav.gif, an interlaced GIF. The IMG tag that loads nav.gif uses the USEMAP
attribute to specify that the image is a client-side image map. The value of the USEMAP attribute, mainmap, is
also the value used for the NAME attribute of the MAP tag. The following code associates the map with the
image:
<IMG SRC="nav.gif"
WIDTH=468 HEIGHT=25 BORDER=0
USEMAP="#mainmap">
Example 2: server-side image map
In this example, the image file logo.gif is treated as a server-side image map because it is loaded with the
ISMAP attribute. The IMG tag is implemented within a link. When a user clicks the link, the coordinates of the
click are passed to the imagemap program in the server's cgi-bin directory. The file map_logo.map is a file on
the server that contains coordinate information about the image logo.gif. The file name map_logo.map is passed
as a parameter to the imagemap program.
<A HREF="http://www.homeworld.com/cgi-bin/imagemap/map_logo.map">
<IMG SRC="http://www/homeworld.com/logo.gif" ISMAP>
</A>
Example 3: combined server-side and client-side image maps
In this example, the USEMAP and ISMAP attributes of the IMG tag are both specified, so the image can be
processed as either a client-side image map or a server-side image map. The USEMAP attribute has priority. If
the browser that accesses the page supports client-side image maps, then the image is processed as a client-side
map; otherwise, the image is processed as a server-side map.
<A HREF="http://www.homeworld.com/cgi-bin/imagemap/map_logo.map">
<IMG SRC="logo.gif" ISMAP USEMAP="maps.html#LogoMap">
</A>

S-ar putea să vă placă și