Solved

Javascript to make image move along a circular path

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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Jquery form 9 39
JQuery Syntax... 4 50
testing a web application for ipad on windows pc 3 35
[form-control] Retain values after a POST action 21 32
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
This article discusses how to create an extensible mechanism for linked drop downs.
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…

762 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