Images and image maps
Use your favorite image editing tool to create image files
and add them to your HTML page or JSP file. You can use any image
format supported by the major browser vendors.
Inserting images
You can insert images
in both Page view and Source view of the HTML Editor. You can define
attributes for the inserted image in the Image Properties dialog
box.
| Image properties page | IMG element attributes definable through user interface |
|---|---|
| Image | SRC, ALT, LOWSRC, ISMAP, USEMAP, ID |
| Layout | ALIGN, WIDTH, HEIGHT, HSPACE, VSPACE, BORDER |
| Video | DYNSRC, CONTROLS, START, LOOP |
| Inline Styles | All inline style attributes (see Chapter 4, “Working with Style Sheets and Framesets”) |
| Advanced | All attributes and attribute values you want to set for the image object |
To insert an image:
-
Put the insertion point where you want
to insert the image. -
Select Insert>Image from the menu bar.
The Image Properties dialog box displays.
-
Click the Browse button (…) to select an image
file using the URL Picker.or
Type the URL for the image in the Image Location text
box. -
Set other image attributes as needed and click
OK.
Setting height and width attributes for images
After
you insert an image in Page view, the editor displays the dimensions
of the image in the Properties dialog box. However, these are default
values and are not automatically included in the HTML source.
If you resize the image or explicitly set different values,
the HEIGHT and WIDTH attributes and their values will be included.
Use the following steps if you want the default
values
included in the HTML source.
To have HEIGHT and WIDTH attributes added to the
HTML source:
-
In Page view, right-click the image and
select Properties from the pop-up menu. -
On the Layout tab, change the Height and Width
values, or retype them, and click Apply.Source view will now show HEIGHT and WIDTH in the IMG element.
If you know the image dimensions If you know the image dimensions, work in Source view and
type the HEIGHT and WIDTH attributes in the IMG element. For example:
|
1 |
<IMG SRC="..." HEIGHT=116 WIDTH=47> |
Converting the image toa hyperlink
To make the image a hyperlink:
-
Select
the image:- In Source view, select the entire
IMG tag. - In Page view, drag the cursor over the image or
use the Shift and arrow keys to highlight the entire image. (Do
not click on the image so that the resizable selection border displays).
- In Source view, select the entire
-
Select Format>Hyperlink from the menu
bar, and create the link.For information on formatting hyperlinks, see Chapter 3, “Working with HTML pages”.
Creating image maps
An image map is an image that links to different files or
URLs depending on the area of the image clicked by the user. Not
all browsers support client-side image maps, but you can still make
this work on the server side.
You can set up the same image to be a client-side and server-side
image map. The client-side processing takes priority in browsers
that support it.
Creating a client-side image map
This is how you set up a client-side image map.
To create a client-side image map:
-
In Page view or Source view of the HTML
editor, select Insert>Image to insert the image in your
document. -
On the Image tab of the Image Properties dialog
box, type a pound sign (#) followed by the name of a MAP
element (which you will create next) in the Corresponding <MAP> Object
For A Client-Side Image Map text box.Click OK.
In the Source view for the current HTML document, the IMG
element includes the USEMAP attribute that is assigned to the map
name you entered:1<IMG SRC="<i>image-url</i>" USEMAP="#<i>mymap</i>"> -
In Source view, insert a MAP element in the document
and assign it a NAME attribute that matches the name you typed for
the USEMAP attribute:1<MAP NAME="<i>mymap</i>"></MAP>You can add this to the document source before or after the
IMG element, or in the Head section. -
Inside the MAP element, add the AREA elements
required to identify different regions of the image. A basic syntax
is shown here:1<AREA SHAPE="<i>shape</i>" COORDS="<i>x1</i>,<i>y1</i>,<i>x2</i>,<i>y2</i>..." HREF="<i>url</i>">
Creating a server-side image map
This is how you set up a server-side image map.
To create a server-side image map:
-
In Page view or Source
view of the HTML editor, select Insert>Image to insert
the image into your document. -
On the Image tab of the Image Properties dialog
box, select the Use A Server-Side Image Map check box and click
OK.This adds the ISMAP attribute to the IMG element in the source
for the current Web page. -
Select the image and use Format>Hyperlink
to add a hyperlink.The Hyperlink Properties dialog box opens to the Hyperlink
page. For more information, see “Converting the image to
a hyperlink”. -
In the Destination text box on the Hyperlink page,
specify a URL that points to the server program that processes the
image map and ends with a path to the map file. -
Install a map file on the server that describes
the shapes within the image and their URLs.The format of the map file depends on your server.