Chapter 7, Lesson 2
Chapter 7, Lesson 2![[INDEX]](icon_bki.gif){kind=icon}
Ch
7,
L
2 -
Borders for Clickable Image Links
If you already know how to specify the border for a clickable-image hyperlink , you can skip this lesson.
Most graphic browsers automatically draw a colored border around a clickable image, to "highlight" it as a hyperlink. Generally, the color drawn for the border on an clickable image will be the same as the colors defined for a text hyperlink. [Recall that you can explicitly specify those colors, for visited and unvisited links, using the 'LINK', 'VLINK', and 'ALINK' attributes of the 'BODY' tag - see the earlier lesson titled "Link Color"]
You can explicitly specify the thickness of that border (in pixels, or screen dots), or even remove the border altogether (which is even more useful). We do this by specifying a 'BORDER=" attribute inside the 'IMG' tag, as follows:
<IMG SRC="image-filename" BORDER=value>
The usual rules apply regarding whitespace with attributes. Since the border value is numerical, no quotation marks are required around it. If you specify 'BORDER=10', you'll get a big, thick, ugly border around your clickable image. (I'm not sure why you would want to do this). But, if you specify 'BORDER=0', you get NO border, which is very nice for clickable images that resemble "buttons", like our demopage button. Let's see some source code examples:
<A HREF="demopag4.htm"><IMG SRC="btn_demo.gif" ALT="[click: demopage]" WIDTH=79 HEIGHT=26 ></A> <P> <A HREF="demopag4.htm"><IMG SRC="btn_demo.gif" ALT="[click: demopage]" WIDTH=79 HEIGHT=26 BORDER=10></A> <P> <A HREF="demopag4.htm"><IMG SRC="btn_demo.gif" ALT="[click: demopage]" WIDTH=79 HEIGHT=26 BORDER=0></A>
![[click: demopage]](btn_demo.gif){kind=small}
In the first example link, we've shown a clickable image link, with default highlighting characteristics (i.e., normal border). In the second example, we've shown an identical link, except that we've used the 'BORDER' attribute to specify a border 10 pixels thick (yecchh!). And finally, in the third example, we've eliminated the border altogether, by setting it's value to zero. Which do you think is most presentable?
... leave e-mail ...
