Titre: images tournantes
Posté par: jojo66 le le 20-09-2008 a 12:08:32
Bonjour
je suis nouveau dans ce forum et j'ai une question technique à vous poser.
dans les lignes suivantes j'arrive pas à trouver l'erreur : les photos (12) tournent à coté de l'espace qui lui est réservé ! Qu'ai je fait la est toute la question
<body>
<script type="text/javascript">
//cette entete doit rester intacte
//Taille des images, elle doivent avoir toutes les mêmes dimensions
var Car_Image_Width=100;
var Car_Image_Height=100;
var Car_Border=true; // true ou false
var Car_Border_Color="white";
var Car_Speed=4;
var Car_Direction=true; // true or false
var Car_NoOfSides=24; // nb de faces 4,6,8 ou 12
/* Liste des images et des liens associés
le nb d'images à déclarer doit être la moitié du nombre de faces
ici 8 faces donc 4 images
*/
Car_Image_Sources=new Array(
"img1.gif","",
"img2.gif","",
"img3.gif","",
"img4.gif","",
"img5.gif","",
"img6.gif","",
"img7.gif","",
"img8.gif","",
"img9.gif","",
"img10.gif","",
"img11.gif","", //exemple sans lien
"img12.gif","" //pas de virgule a la derniere
);
//ne rien modifier ci-dessous
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_NoOfSides/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;
}
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()",50)}
function C_LdLnk(){if(this.lnk)window.location.href=this.lnk}
</script>
<div id="Carousel" style="position:relative">
<img src="placeholder.gif" width="780" height="202">
</div>
<!-- Les dimensions de placeholder.gif doivent être les suivantes
pour la largeur :
4 faces : (1.42 x largeur image)+3
6 faces : (2 x largeur image)+4
8 faces : (2.62 x largeur image)+5
12 faces : (3.87 x largeur image)+7
ici 8 faces : width=2.62x100 + 5 = 267
pour la hauteur :
largeur image + 2
ici : height=100+2=102 -->
<font face="Verdana" size="2" color="#000080">Carroussel 12 faces </font>
</body>
<body>
<body onload="Carousel()">
</body>
merci de m'indiquer mon erreur.
cordialement
jojo66 |
Titre: Re:images tournantes
Posté par: Krisss le le 20-09-2008 a 18:40:47
Tiens voici la correction, regarde body, le body onload, et le reste.
----------script----->
<html>
<head>
<script type="text/javascript">
// 7 variables de controle
var Car_Image_Width=140;
var Car_Image_Height=225;
var Car_Border=true; // true ou false
var Car_Border_Color="white";
var Car_Speed=4;
var Car_Direction=true; // true ou false
var Car_NoOfSides=8; // doit être à 4, 6, 8 or 12
/* array pour spécifier les images et les liens optionnels.
Pour un carrousel à 4 faces au minimum 2 images
Pour un carrousel à 6 faces au minimum 3
Pour un carrousel à 8 faces au minimum 4
Pour un carrousel à 12 faces au minimum 6
Si les liens ne sont pas obligatoires, ne les mettez pas ""
*/
Car_Image_Sources=new Array(
"img1.gif","http://www.webfreelance.ch",
"img2.gif","http://www.webmaster-chris.ch",
"img3.gif","", //Pas de liens sur celui-ci
"img4.gif","http://www.google.com",
"img5.gif","",
"img6.gif","",
"img7.gif","",
"img8.gif","",
"img9.gif","",
"img10.gif","",
"img11.gif","",
"img12.gif","" // NOTE pas de virgules sur la dernière ligne
);
/***************** NE RIEN MODIFIER CI-DESSOUS **********************************/
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_NoOfSides/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()",50)}
function C_LdLnk(){if(this.lnk)window.location.href=this.lnk}
function C_Stp(){this.style.cursor=this.lnk?"pointer":"default";C_Stppd=true;}
function C_Rstrt(){C_Stppd=false}
</script>
</head>
<body onload="Carousel()">
<div>
<div id="Carousel" style="position:relative">
<img src="placeholder.gif" width="371" height="225">
</div>
<div>
<p><font face="Arial" size="-2">Le carrousel, scripts DHTML gratuit mis à dispo par <a href="http://www.webfreelance.ch">Webfreelance.ch</a></font></p>
</div>
</div>
</body>
</html>
----------fin de script----->
Dis nous si c'est ok :) |
Titre: Re:images tournantes
Posté par: jojo66 le le 21-09-2008 a 10:48:44
merci beaucoup pour ton aide.
j'ai fait l'essai pas de soucis sauf que je ne vois pas les photos défiler. j'ai pourtant modifier le fichier précédent mais bon!
une idée?
merci d'avance
JR |
Titre: Re:images tournantes
Posté par: Krisss le le 21-09-2008 a 14:17:24
Tu peux visualiser le script à cette adresse: http://www.webfreelance.ch/carrousel/ :)
Pourrais-tu mettre le tiens sur une page online pour voir le résultat en direct ? |
Titre: Re:images tournantes
Posté par: jojo66 le le 21-09-2008 a 14:24:48
ok je m'en occupe dans la soirée.
merci |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|