Solved

Javascript to make image move along a circular path

Posted on 2004-09-29
5
373 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

895 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

13 Experts available now in Live!

Get 1:1 Help Now