Floating Logo a la Geocities
From c|net (http://www.builder.com/)
Traditionally, watermarks were used to identify real, dead-wood pages because they didn't
obscure what was printed on the page. Then GeoCities
came along and took the watermark concept into the digital age. Through a neat little
technological trick, a semitransparent GeoCities logo seems to hover in place, independent
of the page it appears on. Sure it's annoying, but it's also pretty amazing. If you've got
a 4.0 browser, notice the watermark in the lower right corner of this page.
There are a few ways you can go about creating a watermark on your page. For users of Internet Explorer, for example, you could simply use <BODY background="graphics/g.gif" bgproperties=fixed>. But this approach doesn't work in Navigator, and it tiles your graphic automatically.
But for cross-browser functionality you'll need to use Dynamic HTML (DHTML) instead. GeoCities uses a server-side script to detect the browser and send a specifically Navigator- or Internet Explorer-compatible watermark. Instead, we've written a single client-side version which works on both browsers and even gives you some extra choices.
Step 1
Create the graphic or design for the watermark. It can be almost any kind of HTML, though
images have the advantage of exact dimensions, which you'll need to supply in the script.
Also, take some time to think through the overall design of the pages on which the
watermark will appear. Should the graphic appear to be transparent? Should it blend in
with the background color? How big should it be? We recommend you make it subtle, so that
it doesn't end up obscuring the page or distracting your audience.
Step 2
Place the watermark on your page where you want it to appear on non-DHTML browsers (say,
the bottom). Then nest it inside a <DIV>
tag with the attributes id="waterMark"
and style="position:absolute".
<DIV id="waterMark"
style="position:absolute">
<A href="/index.html"><IMG src="/Images/watermark.gif"
width=90 height=90 border=0></A>
</DIV>
Step 3
Copy this script. Paste it somewhere after the watermark's <DIV> container. A good place is right
before the closing </BODY>
tag.
<!----Snip Here ---->
<script language="JavaScript1.2">
<!--
// Watermark script by Paul Anderson, CNET Builder.com. All rights reserved.
markW = 90; // pixels wide
markH = 90; // pixels high
markX = 100; // percent right
markY = 100; // percent down
markRefresh = 20; // milliseconds
// set common object reference
if (!document.all) document.all = document;
if (!document.all.waterMark.style) document.all.waterMark.style = document.all.waterMark;
wMark = document.all.waterMark.style;
wMark.width = markW;
wMark.height = markH;
navDOM = window.innerHeight; // Nav DOM flag
function setVals() {
barW = 0; // scrollbar compensation for PC Nav
barH = 0;
if (navDOM) {
if (document.height > innerHeight) barW = 20;
if (document.width > innerWidth) barH = 20;
} else {
innerWidth = document.body.clientWidth;
innerHeight = document.body.clientHeight;
}
posX = ((innerWidth - markW)-barW) * (markX/100);
posY = ((innerHeight - markH)-barH) * (markY/100);
}
function wRefresh() {
wMark.left = posX + (navDOM?pageXOffset:document.body.scrollLeft);
wMark.top = posY + (navDOM?pageYOffset:document.body.scrollTop);
}
function markMe() {
setVals();
window.onresize=setVals;
markID = setInterval ("wRefresh()",markRefresh);
}
window.onload=markMe; // safety for Mac IE4.5
//-->
</script>
<!---- to here---->
The first lines of the script establish five variables which you can adjust to suit your watermark.
The variables markW and markH should equal the pixel width and height, respectively, of the watermark. Approximate this generously if your watermark includes HTML text. You then set the watermark's position on the page with markX and markY, which represents percentages right and down from the upper left corner of the screen. For example, 50 and 50 would place it in the middle of the screen, while 100 and 0 would put it on the top right. Finally, adjust markRefresh to indicate how often, in milliseconds, you want the browser to update the watermark's position. A lower number means less delay between the page scrolling and the watermark repositioning itself, but also places more demand on the browser.
css linking styles
