Solved

Javascript to make image move along a circular path

Posted on 2004-09-29
5
372 Views
Last Modified: 2012-06-27
I have the following web page that was given to me and on it there is an image that is to be rotating in a circular path.  When I display the page, I see the motion, but it looks as if it cannot find the image (has the red X).  I have looked at the code, but can't figure out where it is calling the image.  I thought maybe the image just had the wrong name or location.  Any suggestions?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE> home  </TITLE>
      <META NAME="Keywords" CONTENT="Digital Camera,Photo Album,Image Editing,Web Easy,Scanner,VCOM, Web Easy">
      <META NAME="Description" CONTENT="This Page has been generated by VCOM Technology...">
      <META HTTP-EQUIV="Page-Enter" CONTENT="RevealTrans(Duration=2,Transition=1)">
      <SCRIPT LANGUAGE="JavaScript"><!--//
            IE=(navigator.appName.indexOf('Microsoft') >= 0);
            NS=(navigator.appName.indexOf('Netscape') >= 0);
            V4=(parseInt(navigator.appVersion) >= 4);
            V5=(parseInt(navigator.appVersion)>=5||navigator.appVersion.indexOf("MSIE 5")!=-1);
            MAC=(navigator.userAgent.indexOf('Mac')!=-1); //-->
      </SCRIPT>
      <SCRIPT LANGUAGE="JavaScript1.2"><!--//
            IDP={}; IDP[0]=0;
            isOvr=0; function OnOver(snd,txc,txv,img,imv,ref,flag){} //-->
      </SCRIPT>
      <STYLE TYPE="text/css"><!--
            DIV             {
      position:absolute;
      font-family:sans-serif;
      font-size:10pt;
      left: 552px;
      top: 430px;
      width: 137px;
      height: 100px;
}
            .F03            {font-family:'Comic Sans MS',cursive;font-size:16pt;font-weight:bold;font-style:italic;}
            .F06            {font-family:'Freefrm710 BT';font-size:50pt;font-weight:bold;font-style:italic;}
            .F04            {font-family:'Comic Sans MS',cursive;font-size:7pt;font-weight:bold;font-style:italic;}
            .F01            {font-family:'Comic Sans MS',cursive;font-size:12pt;}
            .F05            {font-family:'Comic Sans MS',cursive;font-size:8pt;font-weight:bold;font-style:italic;}
            .F02            {font-family:'Comic Sans MS',cursive;font-size:12pt;font-weight:bold;font-style:italic;}
            #A17             {color:#ffffff;text-decoration:none;}
            #A16             {color:#ffffff;text-decoration:none;}
            #A13             {color:#ffff00;text-decoration:none;}
            #A10             {color:#ffffff;text-decoration:none;}
            #A9             {color:#ffffff;text-decoration:none;}
            #A8             {color:#ffffff;text-decoration:none;} -->
      </STYLE>
</HEAD>


<BODY BGCOLOR="#ffffff" TEXT="#000000" LINK="#ffff00" VLINK="#800080" ALINK="#FF0000" onLoad="if(V4) OnLoad()">

      
<DIV STYLE="left:2;top:0;width:768;height:600;"> <img src=".\images\shepards2001005.jpg" alt="" align=TOP border=0 vspace=0 hspace=0></DIV>
      <DIV STYLE="left:307;top:73;width:79;height:78;">
            <A HREF="#news" TARGET=_self>
            <IMG SRC=".\images\green_button.gif" ALT="" ALIGN=TOP BORDER=0 VSPACE=0 HSPACE=0>
            </A>
      </DIV>
      <DIV STYLE="left:405;top:125;width:79;height:78;">
            <IMG SRC=".\images\green_button.gif" ALT="" ALIGN=TOP BORDER=0 VSPACE=0 HSPACE=0>
      </DIV>
      <DIV STYLE="left:501;top:181;width:79;height:78;">
            <A HREF="#links" TARGET=_self>
            <IMG SRC=".\images\green_button.gif" ALT="" ALIGN=TOP BORDER=0 VSPACE=0 HSPACE=0>
            </A>
      </DIV>
      <DIV ID=E17 CLASS=F01 STYLE="left:415;top:152;width:64;height:21;text-align:center;">
            <A ID=A17 HREF="shepards2_003.htm" OnMouseOver="if(V4) OnOver(0,IDP[1],0,0,0,'shepards2_003.htm',1)" OnMouseOut="if(V4) OnOver(0,IDP[1],'#ffffff',0,0,0,0)" TARGET=_self>
            History
            </A>
      </DIV>
      <DIV ID=E16 CLASS=F01 STYLE="left:319;top:99;width:56;height:21;text-align:center;">
            <A ID=A16 HREF="shepards2_002.htm" OnMouseOver="if(V4) OnOver(0,IDP[2],0,0,0,'shepards2_002.htm',1)" OnMouseOut="if(V4) OnOver(0,IDP[2],'#ffffff',0,0,0,0)" TARGET=_self>
            Mission
            </A>
      </DIV>
      <DIV STYLE="left:596;top:243;width:79;height:78;">
            <A HREF="shepards2_006.htm" TARGET=_self>
            <IMG SRC=".\images\green_button.gif" ALT="" ALIGN=TOP BORDER=0 VSPACE=0 HSPACE=0>
            </A>
      </DIV>
      <DIV STYLE="left:209;top:21;width:81;height:80;">
            <A HREF="#products" TARGET=_self>
            <IMG SRC=".\images\green_button.gif" ALT="" ALIGN=TOP BORDER=0 VSPACE=0 HSPACE=0>
            </A>
      </DIV>
      <DIV ID=E13 CLASS=F02 STYLE="left:227;top:46;width:46;height:27;">
            <A ID=A13 HREF="shepards2_002.htm" OnMouseOver="if(V4) OnOver(0,IDP[3],0,0,0,'shepards2_002.htm',1)" OnMouseOut="if(V4) OnOver(0,IDP[3],'#ffff00',0,0,0,0)" TARGET=_self>
            Home
            </A>
      </DIV>
      <DIV ID=E12 STYLE="left:538;top:-32334;width:114;height:87;">
            <IMG SRC=".\images\shepards2001004.gif" ALT="" ALIGN=TOP BORDER=0 VSPACE=0 HSPACE=0>
      </DIV>
      <DIV STYLE="left:684;top:303;width:79;height:78;">
            <A HREF="shepards2_006.htm" TARGET=_self>
            <IMG SRC=".\images\green_button.gif" ALT="" ALIGN=TOP BORDER=0 VSPACE=0 HSPACE=0>
            </A>
      </DIV>
      <DIV ID=E10 CLASS=F01 STYLE="left:597;top:266;width:80;height:28;">
            <A ID=A10 HREF="shepards2_005.htm" OnMouseOver="if(V4) OnOver(0,IDP[6],0,0,0,'shepards2_005.htm',1)" OnMouseOut="if(V4) OnOver(0,IDP[6],'#ffffff',0,0,0,0)" TARGET=_self>
            Equipment
            </A>
      </DIV>
      
<DIV ID=E9 CLASS=F01 STYLE="left:519px;top:196px;width:64px;height:48px;">
  <p><A ID=A9 HREF="shepards2_004.htm" OnMouseOver="if(V4) OnOver(0,IDP[7],0,0,0,'shepards2_004.htm',1)" OnMouseOut="if(V4) OnOver(0,IDP[7],'#ffffff',0,0,0,0)" TARGET=_self>
    Sample<BR>
    Parts</A></p>
  <p>&nbsp;</p>
</DIV>
      
      <DIV ID=E8 CLASS=F01 STYLE="left:694;top:328;width:61;height:30;">
            <A ID=A8 HREF="shepards2_006.htm" OnMouseOver="if(V4) OnOver(0,IDP[8],0,0,0,'shepards2_006.htm',1)" OnMouseOut="if(V4) OnOver(0,IDP[8],'#ffffff',0,0,0,0)" TARGET=_self>
            Contact
            </A>
      </DIV>
      
<DIV ID=E7 STYLE="left:534;top:31;width:173;height:132;"> <IMG SRC=".\images\logo.jpg" ALT="" width="173" height="133" HSPACE=0 VSPACE=0 BORDER=0 ALIGN=TOP>
</DIV>
      <DIV CLASS=F03 STYLE="left:257;top:548;width:123;height:30;">
            EST. 1980
      </DIV>
      
<DIV STYLE="left:6px;top:81px;width:122;height:168;"> <A HREF=".\images\billmarion_big.jpg" TARGET=_parent>
  <img src=".\images\billmarion.jpg" alt="" width="158" height="218" hspace=0 vspace=0 border=0 align=TOP>
  </A> </DIV>
      
<DIV CLASS=F04 STYLE="left:22px;top:269px;width:121;height:29;"> Founders <BR>
            William & Marian Shepard
      </DIV>
      <DIV CLASS=F05 STYLE="left:144;top:577;width:369;height:17;">
            7052 SOUTH EAGLE VALLEY ROAD  PORT MATILDA, PA 16870
      </DIV>
      
<DIV STYLE="left:11px;top:522px;width:62;height:47;">
  <SCRIPT LANGUAGE="JavaScript"><!--
            
            // To display different text in place of month and day names (eg: full month names
            // or text in a language other than English), change the two lines below.
            
            var ixMonths=new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec');
            var ixDays=new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
            
            
            var dd = new Date();
            var nn = dd.getDate();
            var mm = ixMonths[dd.getMonth()];
            var yy = dd.getYear(); if(yy<2000) yy+=1900;
            if(V4)
            {      document.writeln('<table border=\'1\' cellpadding=\'1\' cellspacing=\'0\'><tr><td bgcolor=\'#000000\'>');
                  document.writeln('<table border=\'1\' cellpadding=\'0\' cellspacing=\'1\'>');
                  document.write('<tr><td align=\'center\' bgcolor=\'#f3f3f3\'>');
            } else document.writeln('<center>');
            document.write('<font face=\'arial, helvetica, sans-serif\'>&nbsp;&nbsp;&nbsp;&nbsp;'+mm+'&nbsp;'+yy+'&nbsp;&nbsp;&nbsp;&nbsp;');
            if(V4)
            {      document.writeln('</font></td></tr>');
                  document.write('<tr><td align=\'center\' bgcolor=\'#ffffff\'>');
            } else document.writeln('<br>');
            document.write('<font face=\'arial, helvetica, sans-serif\' size=\'7\'');
            if(dd.getDay() == 0) document.write(' color=\'#ff0000\'');
            document.write('>'+nn+'</font>');
            if(V4)
            {      document.writeln('</td></tr>');
                  document.write('<tr><td align=\'center\' bgcolor=\'#f3f3f3\'><font face=\'arial, helvetica, sans-serif\'>');
            } else document.writeln('<br>');
            document.write('&nbsp;&nbsp;&nbsp;&nbsp;'+ixDays[dd.getDay()]+'&nbsp;&nbsp;&nbsp;&nbsp;</font>');
            if(V4)
            {      document.writeln('</td></tr>');
                  document.writeln('</table>');
                  document.writeln('</td></tr></table>');
            } else document.writeln('</center>');
            //--></SCRIPT>
      </p></DIV>
      
<DIV ID=E2 CLASS=F06 STYLE="left:1px;top:310px;width:674px;height:96px;"> Shepard's Machine</DIV>
      
<DIV ID=E1 CLASS=F06 STYLE="left:157px;top:411px;width:329px;height:96px;">Shop Inc.</DIV>

</BODY>

<SCRIPT LANGUAGE="JavaScript1.2"><!--//
IDP.bw=(IE)?document.body.clientWidth:self.innerWidth;
IDP.bd=(IE)?document.body.clientHeight:self.innerHeight;
IDP.my=(window.parent.frames.length && parent.MyFrm)?parent.MyFrm:window;
IDP[1]=(V5)?'document.getElementById(\'A17\').style.color':(IE)?'A17.style.color':'document.E17.document.linkColor';
IDP[2]=(V5)?'document.getElementById(\'A16\').style.color':(IE)?'A16.style.color':'document.E16.document.linkColor';
IDP[3]=(V5)?'document.getElementById(\'A13\').style.color':(IE)?'A13.style.color':'document.E13.document.linkColor';
IDP[4]={      x:561      ,y:450      ,a:37      ,b:24      ,s:0.0757      ,e:10.2753 };
IDP[5]=(V5)?document.getElementById('E12').style:(IE)?E12.style:document.E12;
IDP[6]=(V5)?'document.getElementById(\'A10\').style.color':(IE)?'A10.style.color':'document.E10.document.linkColor';
IDP[7]=(V5)?'document.getElementById(\'A9\').style.color':(IE)?'A9.style.color':'document.E9.document.linkColor';
IDP[8]=(V5)?'document.getElementById(\'A8\').style.color':(IE)?'A8.style.color':'document.E8.document.linkColor';

function DoCycle(obj,tpt,deg,loop,delay)
{
      if(deg > IDP[tpt].e)
      {      if(!loop) loop=2;
            deg=IDP[tpt].e-2*Math.PI;
      }
      IDP[obj].left= IDP[tpt].x+IDP[tpt].a*Math.cos(deg);
      IDP[obj].top = IDP[tpt].y+IDP[tpt].b*Math.sin(deg);
      if(loop == 2) return;
      deg+=IDP[tpt].s;
      window.setTimeout('DoCycle('+obj+','+tpt+','+deg+','+loop+','+delay+')',delay);
      return;
}
function OnOver(snd,txc,txv,img,imv,ref,flag)
{      if(!isOvr) return;
      if(!V4) return;
      if(typeof(IDP.my.location.href)!='string') return;
      if(img && imv)
      {      if(flag)
            {      if(ref)
                  {      imv.pos=1;
                        if(IDP.my.location.href.lastIndexOf(ref) >= 0) imv.pos=imv.max;
                        --imv.pos;
                  }
                  if(++imv.pos > imv.max) imv.pos=(imv.max)?1:0;
                  eval(img+'="'+imv[imv.pos].src+'"');
            }else
            {      eval( img+'="'+imv[0].src+'"' );
            }
      }
      if(txc)
      {      if(flag)
            {      if(!txv) txv=document.linkColor;
                  if(ref && (IDP.my.location.href.lastIndexOf(ref) >= 0)) txv=document.vlinkColor;
            }else
            if(!txv) txv=document.alinkColor;
            eval(txc+'="'+txv+'"');
      }
}
function DoAlpha(obj,val,max,step,sunk,rise,hold,fall,loop)
{      var tm;
      if(val >= max)
      {      eval(obj+'='+max);
            if(fall < 0) return;
            tm=(sunk)?loop:hold;
            if(tm < 0) return;
            val=max;
            step=-step;
      }else
      if(val <= 0)
      {      eval(obj+'=0');
            if(rise < 0) return;
            tm=(sunk)?hold:loop;
            if(tm < 0) return;
            val=0;
            step=-step;
      }else
      {      tm=(step > 0)?rise:fall;
            if(tm <= 0 ) val=(step > 0)?max:0;
            eval(obj+'='+val);
      }
      window.setTimeout('DoAlpha("'+obj+'",'+(val+step)+','+max+','+step+','+sunk+','+rise+','+hold+','+fall+','+loop+')',tm);
}
function OnLoad()
{
      isOvr=1;
      window.setTimeout('DoCycle(5,4,3.9921,1,60)',0);
      if(IE) E7.style.filter='glow(color=#ffffff,strength=0)';
      if(IE) window.setTimeout('DoAlpha("E7.filters.glow.strength",1,16,1,0,125,2000,125,2000)',0);
      if(IE) E2.style.filter=' shadow(color=#008000,direction=134)';
      if(IE) E1.style.filter=' shadow(color=#008000,direction=134)';
}
//--></SCRIPT>

</HTML>

0
Comment
Question by:SherryG
  • 4
5 Comments
 
LVL 9

Accepted Solution

by:
riyasjef earned 100 total points
ID: 12179528
hi

change the path of the image in the "div" with id "E12"

<DIV ID=E12 STYLE="left:538;top:-32334;width:114;height:87;">
  <IMG SRC=".\images\shepards2001004.gif" ALT="" ALIGN=TOP BORDER=0 VSPACE=0 HSPACE=0>
</DIV>
0
 
LVL 9

Expert Comment

by:riyasjef
ID: 12179543
Actually "div" as a whole is rotating..So image  path may not be ok
0
 
LVL 9

Expert Comment

by:riyasjef
ID: 12179623
function OnLoad()
{
     isOvr=1;
     window.setTimeout('DoCycle(5,4,3.9921,1,60)',0);            // FUNCTION CALL HERE
     if(IE) E7.style.filter='glow(color=#ffffff,strength=0)';
     if(IE) window.setTimeout('DoAlpha("E7.filters.glow.strength",1,16,1,0,125,2000,125,2000)',0);
     if(IE) E2.style.filter=' shadow(color=#008000,direction=134)';
     if(IE) E1.style.filter=' shadow(color=#008000,direction=134)';
}

and corr: "div" reference is here

IDP[5]=(V5)?document.getElementById('E12').style:(IE)?E12.style:document.E12;

0
 

Author Comment

by:SherryG
ID: 12179655
Thanks...I did have the wrong image name in the path.  Once I changed it, all was fine.
0
 
LVL 9

Expert Comment

by:riyasjef
ID: 12179679
welcome
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now