DHTML Watermark Image Code

This script places a watermark image on the bottom of your web page.

Script Demo:

Dynamic HTML Code:

Insert this code into <head> tags

<script language="JavaScript">

var IW= 0;
var IH= 0;
var PX= 0;
var PY= 0;
var ZIN= 0;
var us= null;
var IMGW= 100;
var IMGH= 89;
var LSAFETY= 20;
var TSAFETY= 17;
function branding() {
 oldIW= IW;
 oldIH= IH;
 oldPX= PX;
 oldPY= PY;
 if (navigator.appName == 'Netscape') {
  if ((window.innerHeight != oldIH)||(window.innerWidth != oldIW)||(window.pageXOffset != oldPX)||(window.pageYOffset != oldPY))
    {
    if (us == null)
      {
      for (i=0; i<document.layers.length; i++)
        {
        us= document.layers[i];
        if (us.id == "Valley")
          break;
        }
      }
    if (us != null)
      {
      us.visibility= "hide";
      IH= window.innerHeight;
      IW= window.innerWidth;
      PX= window.pageXOffset;
      PY= window.pageYOffset;


      (IH > IMGH) ? us.top= (IH+PY-(IMGH+TSAFETY)) : us.top= 0;
      (IW > IMGW) ? us.left= (IW+PX-(IMGW+LSAFETY)) : us.left= 0;

//alert('document.layers.length: ' + document.layers.length);
      for (i=0; i<document.layers.length; i++)
        {
        templay= document.layers[i];
//  alert('document.layers[' + i + '].id: ' + document.layers[i].id);
        if (templay.zIndex > ZIN)
          ZIN= (templay.zIndex + 1);
        }
      us.zIndex= ZIN;
      us.visibility= "show";
      }
    }
 }
 else{
  if (navigator.appVersion.indexOf("Mac") == -1)
    {
    if ((document.body.clientHeight != oldIH)||(document.body.clientWidth != oldIW)||(document.body.scrollLeft != oldPX)||(document.body.scrollTop != oldPY))      {
      alldivs= document.all.tags("DIV");
      if (us == null){
        for (i=0; i<alldivs.length; i++)
          {
          us= alldivs(i);
          if (us.id == "Valley")
            break;
          }
      }
      if (us != null){
        us.style.display= "none";
        IH= document.body.clientHeight;
        IW= document.body.clientWidth;
        PX= document.body.scrollLeft;
        PY= document.body.scrollTop;
        us.style.top= (IH+PY-(IMGH+TSAFETY)+12);
        us.style.left=(IW+PX-(IMGW+LSAFETY)+15);
        for (i=0; i<alldivs.length; i++){
          templay= alldivs(i);
          if (templay.style.zIndex > ZIN)
            us.style.zindex= (templay.style.zIndex + 1);
        }
        us.style.display= "";
      }
  }
 }
 }
}
if ((document.all) || (document.layers)){
 setInterval("branding()",100);
}
</script>

Insert this code into <body> tags

<DIV CLASS="Watermark" ID="Watermark" STYLE="position:absolute;top:1;visibility:hide;" ALIGN="right">
<A HREF="WEBPAGE URL"><IMG SRC="IMAGE URL" ALT="IMAGE DESCRIPTION" WIDTH=100 HEIGHT=89 BORDER=0></A>
</DIV>

Instruction:

Change the following text:

Put this entire DHTML script below your last line of code on your web page. Look for this in the JavaScript to adjust to your image's HEIGHT and WIDTH:
var IMGW= 100;
var IMGH= 89;
Then look for this in the <DIV> tag to adjust to your URL and IMAGE source including the HEIGHT and WIDTH.

Webmaster » Web Programming » DHTML » Watermark Image Code

Related Links:

Home | Sitemap | Bookmark This Page

Sponsored Links

Recommended Links