Iíve had a lot of email about my glowing links and the stationary background I use on some pages and so I decided to put up a quick list of how toís!


One word of advice, anytime you think something isnít working because you donít see it in the preview mode of your html editor, upload the page and look at it. The glowing links and stationary background didnít work in the preview mode but worked fine once the page was uploaded. No clue why. Hope that keeps you from being as frustrated as I was!



Glowing links

Stationary background image

Colored scrollbars

Killing the Gray box




Glowing links:


The glowing links are really easy. You need to go here to get the  linkhighlight.htc  file and that has to be in the directory that your page is located in to work. You canít just put it in the root directory and have it work for all subdirectories. Luckily, itís a really small file only 1kb so it wonít eat up your space, and it doesnít slow down the page loading either.


Insert this code above the </head> tag in your document and then adjust the colors to fit your page. One note here: the A:hover color is the vlink color while the A:visited color is the same as the alink color. This is a bit confusing, but if youíre not getting the colors in the order you want, this is probably whatís tripping you up.



<STYLE TYPE="text/css">




A:link{color:#0000ff; text-decoration:none;cursor:"hand"}







I use a great piece of freeware called The HTML Kit for my editing. I save my Word file as a web page, filtered and then open it in the HTML Kit for easy editing. Iíve saved this piece of code as a ďsnippetĒ so I can just insert it on every document.


One other note, the links donít glow in the preview mode on the editors Iíve used, but it did work once the page was uploaded and viewed. No clue as to why, I just know that I was convinced it wasnít working and I was going to settle for the way it simply flipped to the other color, then after I uploaded the page it worked fine.


The only time this code has not worked for me was when my Buffy site was on Tripod. The links would change to the other color but it was more of a snap than a fade. Still cool, but not the flowing effect I was after!




Colored Scrollbars:


Again this is simple code and thereís nothing to download or upload to your site. Insert this code just below the </head> tag, though I have seen it above the tag and it doesnít appear to matter. Then you simply edit the colors to fit your site.



<style type="text/css">

<!--body { scrollbar-face-color:#f0d8c8;


††††††††††† scrollbar-highlight-color:#000000;

††††††††††† scrollbar-3dlight-color:black;

††††††††††† scrollbar-darkshadow-color:black;

††††††††††† scrollbar-track-color:f1d7ca;

††††††††††† scrollbar-arrow-color:000000;† }





The HTML Kit is what I use to edit the colors. Thereís a built in list of colors as well as the option to capture the screen colors. For me there was an issue of what piece of the code is what part of the scrollbar.† What I do a lot of times is delete a color and then look to see which portion has turned gray, or use a really hideous color that will stand out. That involved a lot of flipping from the edit tab to the preview tab to see the results.


Recently, I found a great piece of freeware called Cool Web Scrollbars. It has an image of the scrollbar and as you mouseover it will highlight the portion of code for you. Simply pick a color off the chart or sample a color from your screen. There is quick preview mode and a simple one button code generator. Just paste it into your page and youíre done. Much easier and less flipping from editor to preview. And best of all, itís free!



Stationary background image:


This is bit of code I picked up atDynamic Drive and itís quick and easy! I recommend saving your image as a jpg file to compress to as few bytes as possible and still keep the image quality.


Just paste in this code, changing the image name to the name of your image, of course! It must be in the same directory as the page, otherwise youíll get a blank page. Also you can change the color of the background either by putting in the number code such as the #f1d7ca I used here or by using the color name such as black or white. You can also move the image from the center to left or right by changing that value, too.



<script language="JavaScript1.2">



Watermark Backgound Image Script- © Dynamic Drive (www.dynamicdrive.com)

For full source code, 100's more DHTML scripts, and TOS,

visit dynamicdrive.com



if (document.all||document.getElementById)

document.body.style.background="url('wheelback4.jpg') #f1d7ca† center no-repeat fixed"





One note here, the image doesnít show up in the preview mode of my html editors. Youíll see just the blank page, but once the page is uploaded then it works fine. This is one of the great mysteries of the internet. And it makes editing my Buffy storylist with its black background a real challenge.



Killing the gray box:


If you've noticed that you don't see the ugly gray box pop up when you mouse over one of my pictures, that's because I found this really nice little code that kills it. Starting with IE 5, I think, it started popping up and ruining the look of otherwise beautiful sites. Getting rid of it is easy, just use this snippet of code: galleryimg="no" and no more gray box! I included it in my image tag but it can a stand alone tag.


< img alt="kiss me, Chakotay..." src="http://maquisleader.com/images/framedkiss2.gif" galleryimg="no" height="201" width="283">



Hope this helps anyone who wants to add one or all of these effects to their site!

If youíd like to take a peek, all the codes listed here, except the box killer, are from my J/C storylist page.

Back to the top