New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
  • IE5+: IE 5 and above
  • FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
  • Opr7+: Opera 7 and above.
Bookmark online:
FF1+ IE6+ Opr8+

Site Logo/ Watermark Script

  Author: Dynamic Drive

Description: This is a site logo/watermark script that lets you display a static image at any of the four corners of the browser, never going out of sight. It's useful for branding purposes, or to offer visitors an easy way to jump back to your site's homepage. The logo can be set to disappear after x seconds.

Demo:

Directions Developer's View

Simply add the below code inside the <HEAD> section of the page you wish the logo/watermark to be shown:

Select All

The above code references the external .js file "staticlogo.js", which you need to download (right click, and select "Save As").

Important Note: Your page should contain a valid doctype at the very top for this script to work properly. If your page doesn't, the logo will be made stationary on the page via scripting instead of CSS, which is less smooth.

Configuration

Inside the .js file, you should configure the following variables:

setting: {orientation:4, visibleduration:20000, fadeduration:[1000, 500]}, //orientation=1|2|3|4, duration=millisec, fadedurations=millisecs
offsets: {x:10, y:10},//offset of logo relative to window corner
logoHTML: '<a href="http://www.dynamicdrive.com" title="Dynamic Drive"><img src="logo.gif" style="width:50px; height:47px; border:0" /></a>', //HTML for logo, which is auto wrapped in DIV w/ ID="mysitelogo"

Most of them are fairly self explanatory. For setting.orientation, it sets the orientation of the logo relative to the window edge, and should an integer from 1 to 4 (1=top left corner, 2=top right corner, 3=bottom left corner, 4=bottom right corner). The option setting.visibleduration sets the duration (in milliseconds) before the logo disappears. For perpetual, enter 0 instead.