Neat Extras

-- Neat Things to Do --

Change the color of the scroll bars:

With the following inserted in a style sheet, you can control the colors of your scroll bars.

/*scrollbar color change*/
HTML {
SCROLLBAR-FACE-COLOR: #9999cc;
SCROLLBAR-HIGHLIGHT-COLOR: #000000;
SCROLLBAR-SHADOW-COLOR: #000000;
SCROLLBAR-3DLIGHT-COLOR:#ffffff;
SCROLLBAR-ARROW-COLOR: #000000;
SCROLLBAR-TRACK-COLOR: #ccccff;
SCROLLBAR-DARKSHADOW-COLOR: #000000
}

This is not recognized by all browsers, and might not validate, however it does work with Internet Explorer.

Use Bit-mapping with a graphic to link to other things:

The first thing to do is to select area's of your graphic you want to be "hot". That is, when the cursor is over that spot, the little hand will show that it's a link to something.

The easiest way to do this is to load the picture or graphic into MS Paint or any image editor that shows co-ordinates. Any white space around the picture will also be counted, so be sure the picture is moved all the way into the upper left corner of the palette and no white shows. Go to "help topics/ index/moving/selections" for instructions on how to do this with MS Paint.

After your picture is positioned, and saved, click on the pencil in the drawing tools on the left. (This gives a good sharp point to pinpoint area's).

When you move the pencil pointer across the picture, there is a frame on the lower right side of the screen that shows the co-ordinates of the pixels where the pointer tip is located.

Here is an example:

The picture used with permission of: Allstar.fiu.edu, NASA and Civil Air Patrol

This picture has a size of 300 pixels by 108 pixels.

The upper left corner is 0,0 the lower right corner is 300 pixels over and 108 pixels down. Suppose, we want to be able to click on the words "leading edge" and have it take us to a page that tells about that subject.

With the picture loaded into Ms Paint, we find that the upper left area of the word "Leading" is 17 pixels over and 15 pixels down from the 0,0 starting point. The lower right area below "edge" and to the right of the "g" in "Leading" is 45 pixels over and 33 pixels down.

Armed with this information, we can insert the following into our page.

In the code that displays our picture, add:<usemap="#airfoil">

At an appropriate place in the page, add:

Run your cursor over "Leading edge".

Now, lets go a bit further, wouldn't it be nice if we could have the names of people in a picture pop up when we ran our cursor over their heads? We can do that!

Erik Bosrup at www.bosrup.com has some really neat JavaScripts that can do just that with a little help from us.

The first thing to do is go to Eric's site and download the "Overlib" files. There's a lot of stuff in the package, that I haven't had time to play with yet. The file we'll use here is called "Overlib.js"

Copy this file to the directory your page is in. Then load your picture in MS Paint, and find the co-ordinates for the heads of the people in the picture (upper left and lower right). It's the same thing as we did for the picture of the airfoil in the previous example.

In the Head of your page add:
<script type="text/javascript" src="overlib.js"></script>

In the HTML code to display the picture add:

<usemap="#map_name">

Then at an appropriate place in your HTML add:

Add as many lines like this as you have people in the picture.

Here is an example:

More to come:

How Do I .........??

-- Neat Things to Do --