Solved

Javascript to make image move along a circular path

Posted on 2004-09-29
5
380 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
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…
Suggested Courses

751 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