Web/Html Tips
Hidden Graphics in Web Pages

t the end of this page is the format I am now using to make new pages for my site. It has a small 10x10 pixel gif graphic which is invisible (just make it any color and then designate that color the invisible background (89a). Now, when your page loads you have at the bottom -centered- a place holder for anything you might want to convey to your readers at any time in the future.


Make the gif clickable so that anyone who clicks gets taken to a page like "notice.htm". Here you put your message in detail. In my case it will soon become a page with details about my new book and about how to order it.

When I'm ready to take orders I will change the invisible gif for another full size image of the same name with the ad blurb on it. Then, when the reader clicks on this ad he will go to my notice.htm page. See?

Here's the line code

<a href="../notice.htm"><img src="../notice.gif" border="0"></a>

It's important not to specify any size for the gif so that it will resize to anything you substitute and don't leave a border or you will have a little black square on every page when all you want is invisibility. Also, every page must point to the same notice.gif file so that you only have to upload the altered notice.gif to one location. Then you upload your notice.htm and you're in business. All of my htm files are ../ to the main folder where I keep the notice.gif (as well as my background gifs which is how I can change the look of my site instantly ... just substitute two files and everything on my site -with a few exceptions- changes).

You can find the notice.gif on the bottom of this page by highlighting that area ... or just mouse search around for it. Click on it and you will go to a Notice page where I will put my book ordering directions later. Another advantage to this tactic is that if the reader has "underline all links" active in his browser, your gif file will not be underlined. It's invisible. I checked this out on XP to be sure but I don't guarantee it with other browsers.

I wish I would have done this when I first started making pages. I can't reasonably go back now and change over 400 of them so I will just add it to the bottom of my most often visited pages and all the new ones. If you decide to use this tactic, hide the notice.gif at the bottom of every page ... or ... possibly at the top if you want to be "cheezy". Putting an ad on my pages is sort of like spam ... but it's for my stuff only so I'll just put it at the bottom out of the way and I don't think anyone will be offended ... though I would never put an ad for somebody else's profit. I'm a commercial free site ... forever. It's all me ... all the time. ;o)

Also, while I'm at it ...

When you put in a rollover image you should hide a one pixel rendition of that rollover image (a preloader) at the bottom of your page so that that image will be loading while while the reader is looking at text. If you don't do this, when the reader rolls over the first pic, he has to wait to see the second pic because his rollover has just 'called' that picture from the server. Better to have it already here in the readers cache so that it can be immediately loaded when the reader asks for it by his mouse rollover.

Give the reader enough to read so that it takes up the total time required to preload the rollover image. Don't send text like "Check this out!" and expect it to occupy the reader for 30 seconds while a 100K jpeg is being sent from the server.

Ebtx Home Page