| WebWind Productions |  |
 |
| WebWind Productions
TIPS AND TRICKS |
| Complete Solution |
- ALL references to cd1off.gif should be replaced by the name of the file which you want to appear when the mouse is OFF the image. In like manner ALL references to cd1on.gif should be replaced by the name of the file which you want to appear when the mouse is ON the image.
- The html <IMG SRC="cd1off.GIF" is standard for displaying an image when the browser opens a page.
- onMouseover="img_act('cd1')" is javascript embedded in the html tag and causes whatever image was preloaded as the ON image to display when the mouse moves over the displayed image.
- onMouseout="img_inact('cd1')" is javascript embedded in the html tag and causes whatever image was preloaded as the OFF image to display when the mouse moves off the displayed image.
- REMEMBER the image that is actually included in the html <IMG SRC=> tag is the OFF image.
- For the sake of simplicity, this example is only for 1 button - if you want to look at the code which handles multiple buttons click here and use your browser's view document source option.
Please note - you are welcome to copy and use any of the code or graphics files on this page. (If you are new to this stuff, click here for help.
Netscape Navigator 3.0 and up, and MSIE support cell colors in tables. You can use this to create the appearance of a vertical graphic bar without using up space for a graphics file on the server. Because older browsers don't support this function, do NOT select a dark cell color and then put text on it that is the same color as the page background - you won't see the text.
Example of using cell color to create the appearance of a vertical bar.
| The "trick" is that you must include something in the colored cell. If you do not put something in there, then the cell is effectively empty and will display without color - as in this table. That something can be an html non-breaking space. which is: |
| In this table, one non-breaking space has been included in the cell on the far left, and 3 non-breaking spaces have been included in the cell on the right. The border has also been turned off. |
| If you use this trick in a table that has more than one row, (this one has two rows) you will see a small space between the color cells in each row. The size of this space is derived from the size of the cell spacing you assign. | ||
| In this table I have assigned a cell padding size of 1. If I assign a cell spacing size of 0, the space will be smaller, but will not disappear entirely. |
 |
You can combine this cell color trick with a very tiny graphics file to achieve another interesting effect. In the cell on the left, I have inserted a non-breaking space, followed by a vertical red graphic, followed by another non-breaking space. |
Tricks with Graphics Top
Resizing Images
When you place a graphics file in your html code, you should specify the file size. However, you can specify any size you want. For example, the graphics file for the red bar above actually looks like this:
By simply changing its size to HEIGHT=100 WIDTH=4, it now looks like this
I
could change it to look like this or
this or
this or
this -
all done simply by changing the HEIGHT and WIDTH
One of the advantages to this, is that you can create a single very small graphic file, and utilize that same file in different ways simply by changing the HEIGHT and WIDTH of it.
You can also create some unusual effects without creating a different graphic image.
For example, this was created 
for
an artist database site. However changing the size to HEIGHT=20 WIDTH
= 200
resulted in this - which happened to be just right
for a Music Events Calendar.
Graphics files of more than 1 color tend to react better to extremes in shrinking as opposed to enlarging.
For those of you who don't have a graphics editor to create these horizontal or vertical graphics, here are several in different colors. They are 10 pixel by 10 pixel .gif files. Each one is 47 bytes in size.
If you have done any work at all with web pages, you probably know how difficult it is to control the exact placement of images and text on a page. The 1 Pixel transparent .gif file can be a very powerful solution to this problem. This image is only 49 bytes in size and, because it is a transparent .gif file, any color (e.g. document background or cell color, will show through it. Because you can set the size of the image in the html code, you can create empty space of any size anywhere on the page. The normal alignment features of an image apply to this. Because of variations in user monitors, sometimes this is the only solution to a problem.
For those of you who don't have a graphics editor
to create this, here is one you can download (I have used the browser to
increase the apparent size to 10 x 10, and enabled the border so you can
see it).
JAVASCRIPT - ANIMATED BUTTONS Top
This code will show you how to use Javascript to create a button that changes when the user moves their mouse over it. This only works in Netscape browsers (v 3.0 +) because Microsoft browsers do not support the full capability of Javascript - including the mouse over event.
ON OFF
Try it on this one: 
To create this effect, you need 2 different images, one which is displayed when the user's mouse button moves over the image, and one when it is off the image. Note that the images must be the same size.
Then, in between the <HEAD> AND </HEAD> statements you insert the following code:
<SCRIPT language="JavaScript">
browserName = navigator.appName; // detect browser - this only works
in Netscape 3.0 and above
browserVer = parseInt(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3)
version = "n3";
else version = "n2";
if (version == "n3") { // if user has Netscape 3, it is ok
to preload images
cd1on = new Image(); // preload any images to be activated
cd1on.src = "/cd1on.GIF"; // when mouse moves over them
cd1off = new Image(); // preload any images activated
cd1off.src = "/cd1off.GIF"; // when mouse moves off them
}
function img_act(imgName) {
if (version == "n3") {
imgOn = eval(imgName + "on.src");
document [imgName].src = imgOn;
}
}
function img_inact(imgName) {
if (version == "n3") {
imgOff = eval(imgName + "off.src");
document [imgName].src = imgOff;
}
}
</SCRIPT>
Then, wherever you want this image effect to appear, insert this code:
<A HREF="#top" onMouseover="img_act('cd1')" onMouseout="img_inact('cd1')"><IMG SRC="cd1off.GIF" NAME="cd1" ALT="Mall Home" BORDER=0 HEIGHT=30 WIDTH=103></A>
NOTE:
Normally to copy the code that makes up a WWW page, you would use the View Document Source option in your browser, highlight the code using your mouse, use the Edit copy command or CTL C to copy it to the clipboard and then paste it into an editor. You can then study it at your convenience. You can download the graphics in most browsers by clicking on the image with the right mouse button and selecting the SAVE IMAGE AS option.