Wednesday, March 30, 2011

Image Effects script

Keterangan: Ini adalah logo situs / watermark script yang memungkinkan Anda menampilkan gambar statis pada salah satu dari empat penjuru browser, tidak pernah keluar dari pandangan. Ini berguna untuk tujuan branding, atau untuk menawarkan pengunjung cara yang mudah untuk melompat kembali ke homepage situs Anda. Logo dapat diatur untuk hilang setelah x detik.

Simply add the below code inside the <HEAD> section of the page you wish the logo/watermark to be shown:
<script type="text/javascript" src=""></script>

<script type="text/javascript" src="staticlogo.js">

* Site Logo script- © Dynamic Drive DHTML code library (
* This notice MUST stay intact for legal use
* Visit Project Page at for full source code


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.

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.


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="" 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.