Getting Started4:Working with Images

[kino]

By now you know enough to write a very well formatted text-based applet. The ability of the World Wide Web to provide pictures (technically called images, graphics, or sometimes icons) is one of the many reasons it has become so popular. Images are a staple of any web designer, so it is very important that you understand how to use them properly. In this Curl Cue, you'll learn how place an image on your page and also how to turn an image into a link to another page. Curl works with a number of image formats such as JPEG, GIF, BMP, PPM, PNG, and TIFF.

For more information regarding image file formats, please refer to the following section in the Curl Documentation:Curl Developer's Guide > Text Formatting > Special Text Formats > image > image File Formats


Adding Images
Adding an image to a document is easy. Just pass a URL to the image procedure using the source keyword argument. The image is automatically sized according to the attributes of the source image file.

There are two ways to define the source of an image. First, you may use a standard URL, for example: source="http://www.curl.com/pics/flower.gif". As your second choice, you may copy or upload the file onto your web server and access it locally using standard directory tree methods. For example, use source="flower.gif" to access the file in the current working directory and source="../flower.gif" to access the file in the parent directory.

Code:

{curl 6.0, 7.0 applet}
{applet {compiler-directives careful? = true}}


{image
source = {url "image001.jpg"}
}

If an image is not accessible, Curl will automatically display the following image:


The appearance of this image could mean a failure in many ways, including (but not limited to) the following:

•access denial
•loading failure
•incorrect or corrupted image data
•nonexistent image
•network problems
•partial data transmission
•security problems

Tip: Note that without privileges, an applet cannot load any file from the local hard disk, not even an image. You can use the Curl Control panel to identify the locations of applets that should have these privileges.


JPEGs versus GIFs
•GIFs are best used for banners, clip art, and buttons. The main reason for this is that GIFs can have a transparent background which is easier to integrate into an applet. However, GIFs are usually larger files than JPEGs, which may result in slower load times and larger transfer rates. GIFs are also limited to the 256 color scheme.

•JPEGs are easily compressed and therefore usually smaller in size than GIF files. Their size to quality ratio is exceptional and will save on disk space and transfer rates. Since JPEGs don't allow for transparent backgrounds they are more commonly used for photo galleries or artwork.

Setting the Size
If you want to resize an image, specify a height and width. Curl will automatically scale the image to the size you specify.

Code:

{curl 6.0, 7.0 applet}
{applet {compiler-directives careful? = true}}


{center
{image
source = {url "image001.jpg"},
height= 2in,
width = 2in
},
{image
source = {url "image002.jpg"},
height= 2in,
width = 4in
}
}

Tip: Be careful to preserve image proportions when you specify a height and width or the image may be distorted. Curl will not automatically scale the image proportionally for you.


Adding Image Borders and Margins
The result of the image is a Curl Graphic, so any of the properties you can set on a Graphic can be passed. For example, in the following code, we are setting the image border width, color, and style.

Code:

{curl 6.0, 7.0 applet}
{applet {compiler-directives careful? = true}}


{center

{text Flower 1}

{image
source = {url "image001.jpg"},
height= 2in,
width = 2in,
border-width = 5px,
border-color = "blue",
border-style = "raised"
}

{text Flower 2}

{image
source = {url "image002.jpg"},
height= 1in,
width = 1.5in,
border-width = 3px,
border-color = "red",
border-style = "sunken"
}
}

By default, images from a Web server are loaded asynchronously. This means when the image procedure is executed, the image data is requested from the server, but the execution continues without waiting for the data to arrive. Later when the image data is returned by the server, it is plugged in at its proper place in the applet. If you want your applet to wait as each image is loaded, you can add blocking?=true to the image call to specify synchronous loading.

Tip: If you would like to display non-image content immediately, asynchronous loading is preferred. This method makes the applet appear to load faster since some of the content can be initially rendered.

For more information regarding text formats, please refer to the following section in the Curl Documentation:Curl Developer's Guide > Text Formatting > Special Text Formats > link and destination

Using an Image as a Link
It's easy to specify images that can be used as links or for other actions. In this case, we are specifying the height and width of the image as .25in. This will allow us to display a thumbnail size of the image. Once the image is selected, the link will be followed using a new browser window.

Code:

{curl 6.0, 7.0 applet}
{applet {compiler-directives careful? = true}}


Select the following icon to link to the Curl website:
{link
target = "new",
href = {url "http://www.curl.com"},
{image
source = {url "image001.jpg"},
height= .25in,
width = .25in,
tooltip = "Curl Website"
}
}

In this case, we also included a tooltip. The text "Curl Website" will be displayed when the user places the cursor over the image. Notice that the cursor automatically changes to the hand icon.


Using an Image as a Background
Every graphical object has a background, but by default the background is transparent. You can explicitly specify the background of any graphical object using the background property. In this case we will be using this property to specify an image as the background.

Code:

{curl 6.0, 7.0 applet}
{applet {compiler-directives careful? = true}}

{Frame
height= 2in,
width = 2in,
background= {Background {url "image002.jpg"}},
{bold font-size = 12pt, color="white", This is text}
}

Tip: The proportions of the image and Graphic (in the above case, a Frame) must match, or the displayed image will be distorted

For more information regarding text formats, please refer to the following section in the Curl Documentation:Curl Developer's Guide > Text Formatting > Special Text Formats > image