DHTML Image Inside Object

[Total: 0    Average: 0/5]

This shows how to have any object define x,y width and height constraints to place a DHTML object.

Head Code:

<style>
.mytable
{
  border-style:solid;
  border-color:green;
  border-width:1px;
}
.myimg
{
  position:absolute;
  top:0;
  left:0;
  z-index:1;
  visibility:hidden;
}
</style>
<script>
var DELAY=50; /* 50 milliseconds */

var isIE=document.all?true:false;
var isNS4=document.layers?true:false;
var isNS6=navigator.userAgent.indexOf("Gecko")!=-1?true:false;

var T=-1;
var L=-1;
var W=-1;
var H=-1;

function giveSizes()
{
  var _o ="";
  var _obj=null;
  if(isIE||isNS6)_obj=document.getElementById("tblname");
  if(_obj)
  {
    /* var s="";for(var i in _obj)s+=i+" * ";alert(s); */
    _o+="top="   +(T=_obj.offsetTop)+"n";
    _o+="left="  +(L=_obj.offsetLeft)+"n";
    _o+="height="+(H=_obj.height)+"n";
    _o+="width=" +(W=_obj.width)+"n";
  }
  /* alert(_o); */
}
function randomMoveImg()
{
  var _L=L+(1000*Math.random())%(W-50-1); /* 50 is the image width */
  var _T=T+(1000*Math.random())%(H-50-1); /* 50 is the image height */
  var _obj=null;
  if(isIE||isNS6)_obj=document.getElementById("imgname");
  if(_obj)
  {
    /* var s="";for(var i in _obj)s+=i+" * ";alert(s); */
    _obj.style.visibility="visible";
	_obj.style.left=_L;
	_obj.style.top=_T;
  }
}
var TIMER=null;
function killMoving(){if(TIMER){clearInterval(TIMER);TIMER=null;}}
function keepRandomMoving()
{
  killMoving();
  TIMER=setInterval("randomMoveImg()",DELAY);
}
</script>

Body Code:

<BR><BR>
<table align=center id=tblname name=inside width=468 height=60 cellpadding=0 cellspacing=0 class=mytable>
<tr><td></td></tr>
</table>
<BR><HR color=red width=222px align=left height=1px>
<a href="javascript:randomMoveImg()">put image inside table</a>
<BR>
<a href="javascript:keepRandomMoving()">Random keep it moving</a>
<div id=imgname class=myimg><img src="http://www.js-examples.com/js/pic1.gif" border=1 width=50 height=50></div>
Normally you would put this in the body tag: onload="giveSizes();" onunload="killMoving()"
<script>
giveSizes();
</script>

Times Viewed: 0

Leave a Reply

Your email address will not be published. Required fields are marked *