Author Topic: girar imagenes al rededor de logo  (Read 1327 times)

poncho_gc

  • Newbie
  • *
  • Posts: 1
  • Karma: 0
    • View Profile
girar imagenes al rededor de logo
« on: Agosto 07, 2012, 08:06:30 am »
Hola este es mi primer post por este foro.
miren baje un script de otro foro,para usarlo en mi pagina. lo que requiero es lo siguiente.
tengo un logo centrado de 800*600 y quiero que 5 o 10 imagenes giren al rededor de el.
podrian ayudarme aki tengo el codigo pero no logro haser ke funcione en dreamweaver 8.
Coddigo:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Página sin título</title>
<script language="javascript" type="text/javascript">
/************************************************** ******
Create a div with transparent place holder in your html
<div id="Carousel" style="position:relative">
<img src="placeholder.gif" width="404" height="202">
</div>
placeholder width:
4 sided: 1.42 * carousel image width + 3
6 sided: 2 * carousel image width +4
8 sided: 2.62 * carousel image width + 5
12 sided: 3.87 * carousel image width + 7
placeholder height:
carousel image height+2

Insert onload in body tag
<body onload="Carousel()">
************************************************** *******/

// 7 variables to control behavior
var Car_Image_Width=103;
var Car_Image_Height=48;
var Car_Border=true; // true or false
var Car_Border_Color="white";
var Car_Speed=6;
var Car_Direction=false; // true or false
var Car_NoOfSides=12; // must be 4, 6, 8 or 12

/* array to specify images and optional links.
For 4 sided carousel specify at least 2 images
For 6 sided carousel specify at least 3
For 8 sided carousel specify at least 4
For 12 sided carousel specify at least 6
If Link is not needed keep it ""
*/
Car_Image_Sources=new Array(
"fotos/acura.gif","",
"fotos/alfa-romeo.gif","",
"fotos/bmw.gif","",
"fotos/buick.gif","",
"fotos/byd.gif","",
"fotos/chevrolet.gif","", //this slide isn't linked
"fotos/corvette.gif","",
"fotos/daewoo.gif","",
"fotos/dodge.gif","",
"fotos/ferrari.gif","",
"fotos/ford.gif","",
"fotos/jeep.gif","",
"fotos/pontiac.gif","",
"fotos/suzuki.gif","",
"fotos/mercedes.gif","",
"fotos/chrysler.gif","",
"fotos/mazda.gif","",
"fotos/toyota.gif","" // NOTE No comma after last line
);

/***************** DO NOT EDIT BELOW **********************************/
CW_I=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2);
C_Coef=new Array(
3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4, 0,
Math.PI/4,3*Math.PI/2,5*Math.PI/3,11*Math.PI/6,0,Math.PI/6,Math.PI/3);
var C_CoefOf=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car _NoOfSides==8?5:9;
C_Pre_Img=new Array(Car_Image_Sources.length);
var C_Angle=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg=Car_NoOfSides,C_MaxW,C_TotalW,
C_Stppd=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSide s/2;

function Carousel(){
if(document.getElementById){
for(i=0;i<Car_Image_Sources.length;i+=2){
C_Pre_Img=new Image();C_Pre_Img.src=Car_Image_Sources}
C_MaxW=Car_Image_Width/Math.sin(Math.PI/Car_NoOfSides)+C_HalfNo+1;
Car_Div=document.getElementById("Carousel");
for(i=0;i<C_HalfNo;i++){
CW_I=document.createElement("img");Car_Div.appendChild (CW_I);
CW_I.style.position="absolute";
CW_I.style.top=0+"px";
CW_I.style.height=Car_Image_Height+"px";
if(Car_Border){
CW_I.style.borderStyle="solid";
CW_I.style.borderWidth=1+"px";
CW_I.style.borderColor=Car_Border_Color}
CW_I.src=Car_Image_Sources[2*i];
CW_I.lnk=Car_Image_Sources[2*i+1];
CW_I.onclick=C_LdLnk;
CW_I.onmouseover=C_Stp;
CW_I.onmouseout=C_Rstrt}
CarImages()}}

function CarImages(){
if(!C_Stppd){
C_TotalW=0;
for(i=0;i<C_HalfNo;i++){
C_ClcW=Math.round(Math.cos(Math.abs(C_Coef[C_CoefOf+i]+C_Angle))*Car_Image_Width);
C_TotalW+=C_ClcW}
C_LeftOffset=(C_MaxW-C_TotalW)/2;
for(i=0;i<C_HalfNo;i++){
CW_I.style.left=C_LeftOffset+"px";
CW_I.style.width=C_ClcW+"px";
C_LeftOffset+=C_ClcW}
C_Angle+=Car_Speed/720*Math.PI*(Car_Direction?-1:1);
if((Car_Direction&&C_Angle<=0)||(!Car_Direction&&C _Angle>=Math.PI/C_HalfNo)){
if(C_CrImg==Car_Image_Sources.length)C_CrImg=0;
if(Car_Direction){
CW_I[C_HalfNo]=CW_I[0];
for(i=0;i<C_HalfNo;i++)CW_I=CW_I[i+1];
CW_I[C_HalfNo-1].src=Car_Image_Sources[C_CrImg];
CW_I[C_HalfNo-1].lnk=Car_Image_Sources[C_CrImg+1]}
else{ for(i=C_HalfNo;i>0;i--)CW_I=CW_I[i-1];
CW_I[0]=CW_I[C_HalfNo];
CW_I[0].src=Car_Image_Sources[C_CrImg];
CW_I[0].lnk=Car_Image_Sources[C_CrImg+1]}
C_Angle=Car_Direction?Math.PI/C_HalfNo:0;C_CrImg+=2}}
setTimeout("CarImages()",40)}

function C_LdLnk(){if(this.lnk)window.location.href=this.ln k}
function C_Stp(){this.style.cursor=this.lnk?"pointer":"defa ult";C_Stppd=true;}
function C_Rstrt(){C_Stppd=false}
</script>
</head>
<body onload="Carousel()">
<form id="form1" runat="server">
<div center>
<div center id="grande" style="z-index: 101; left: 139px; width: 620px;
top: 7px; height: 65px; vertical-align: middle; text-align: justify; position: relative;">
&nbsp;

<asp:Image ID="Image1" runat="server" Height="343px" ImageUrl="~/image/mundotransparente.gif"
Width="382px" />

<div id="Carousel" style="z-index: 101; left: 0px; width: 419px;
top: -220px; height: 65px; vertical-align: middle; text-align: justify; position: relative;">

</div>
</div>
</DIV>
<asp:DropDownList ID="DropDownList1" runat="server" Width="110px">
</asp:DropDownList>
</form>
</body>
</html> 

podrian ayudarme por favor.
o si alguien tiene otra opcion se los voy a agradeser.
atte: Poncho G.C.