Page 263 - Open Soource Technologies 304.indd

Unit 11: Graphics

away. For example, if the picture is 10K bytes when displayed, it may be only 4K bytes Notes
when stored. Nice trick, huh? It saves on hard drive space, but also tends to require a bit
of memory on your part to unfold the image.
• Someone always writes to tell me that .gif images also use compression. Yes, they do, but
only when they are first created into that format. After that, no compression. JPEG, on the
other hand, uses compression throughout its life to fold up smaller than it really is.

• .bmp (pronounced “bimp”) this is a “bitmap.” You will probably never place a bitmap
as an image, although some browsers do allow it. A bitmap is an image that a computer
produces and places for you. A counter is an example. Even though some browers, such
as Internet Explorer, will allow you to place a BMP as an image. Most browsers will not
be able to display it. Go with .gif, .jpg or .png.

11.1.3 Activating an Image: Turning an Image into a Link
What it did was to create blue words on your page so someone could click on them and then
jump to another site. Well, here we are going to set it up so an image becomes clickable or
“active.” The viewer would click on the image, instead of on the hyperlinked words, to make
the hypertext link.

<A HREF=”http://www.htmlgoodies.com”><IMG SRC=”homepage.gif” ALT=”Home”></A>
Here’s what you get with that format. Lay your pointer on the image, but do not click. You will
see the entire image is active:

It attempts to turn blue, or whatever color the page is set to, like the wording it is replacing, so
it places what’s known as a “border” around the image. Some people like it.
To make the border disappear, we need a tiny bit of inline CSS (Cascading Style Sheets). This
used to be done using the Border attribute, but that’s unfortunately no longer with us...
Here’s the format:
<IMG STYLE=”border: none;” SRC=”homepage.gif” ALT=”Home”>
We added some CSS which denoted that there should be no border. You can go the other way
too if you’d like. Make it “border: 55px solid blue;” if you want. It will just make a huge border.
Note that the CSS is in quotes.

Here’s what you get using the CSS:

LOVELY PROFESSIONAL UNIVERSITY 257