Cours complet Index Exercices HTML Exercice HTML corrigé menu Horizontale

Exercice HTML corrigé menu Horizontale

Admin CliCours 0
Pin
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<script type="text/javascript" src="prototypeTo.js"></script>
<script type="text/javascript" src="dynamic.js"></script>
<script type="text/javascript" src="menu.js"></Script>
<script type="text/javascript">
Event.observe(window,'load',initialize);
function initialize(){
List("menu1",new Dynamic.Animation({
deferDelay : {
startValue : 0,
endValue : 250
},
piste:[{ 
name : 'opacity',
startValue : 0,
endValue : 1,
duration : 500,
interpolation : {type:'cosinus'}
},{
name : 'backgroundColor',
deferOrigine: true,
startValue : [0,0,-53],
endValue :[0,0,0],
duration : 500,
interpolation : {type:'cosinus'}
}]
}),new Dynamic.Animation([{ 
name : 'backgroundColor',
deferOrigine: true,
startValue : [0,0,0],
endValue :[0,00,-53],
duration : 500,
interpolation : {type:'cosinus'}
},{
name : 'color',
deferOrigine: true,
startValue : [0,0,0],
endValue :[255,255,255],
duration : 500,
interpolation : {type:'cosinus'}
}])); 
}
</script>
<TITLE>Menu Horizontal multi-niveaux</TITLE>
<LINK  REL="stylesheet" TYPE="text/css" HREF="css.css">
</HEAD>
<BODY>
<h1>Menu horizontale</h1>
<ul  id="menu1" class='menuH1'>
<li><a href="#">du contenue intérréssant !!!</a> 
<ul>
<li><a href="#">du contenue intérréssant !!!</a> 
<ul>
<li><a href="#">du contenue intérréssant !!!</a> 
<ul>
<li><a href="#">du contenue intérréssant 
!!!</a> </li> 
<li><a href="#">du contenue intérréssant 
!!!</a> </li>
<li><a href="#">du contenue intérréssant 
!!!</a> </li>
</ul>
</li>
<li><a href="#">du contenue intérréssant !!!</a> </li>
</ul>
</li>
<li><a href="#">du contenue intérréssant !!!</a> </li>
<li><a href="#">du contenue intérréssant !!!</a> </li>
<li><a href="#">du contenue intérréssant !!!</a> </li>
</ul>
</li><li><a href="#">du contenue intérréssant !!!</a> 
<ul>
<li><a href="#">du contenue intérréssant !!!</a> 
<ul>
<li><a href="#">du contenue intérréssant !!!</a> 
<ul>
<li><a href="#">du contenue intérréssant 
!!!</a> </li>
<li><a href="#">du contenue intérréssant 
!!!</a> </li>
<li><a href="#">du contenue intérréssant 
!!!</a> </li>
</ul>
</li>
<li><a href="#">du contenue intérréssant !!!</a> </li>
</ul>
</li>
<li><a href="#">du contenue intérréssant !!!</a> </li>
<li><a href="#">du contenue intérréssant !!!</a> </li> 
<li><a href="#">du contenue intérréssant !!!</a> </li>
</ul>
</li><li><a href="#">du contenue intérréssant !!!</a> 
<ul>
<li><a href="#">du contenue intérréssant !!!</a> 
<ul>
<li><a href="#">du contenue intérréssant !!!</a> 
<ul>
<li><a href="#">du contenue intérréssant 
!!!</a> </li>
<li><a href="#">du contenue intérréssant 
!!!</a> </li>
<li><a href="#">du contenue intérréssant 
!!!</a> </li>
</ul>
</li>
<li><a href="#">du contenue intérréssant !!!</a> </li>
</ul>
</li>
<li><a href="#">du contenue intérréssant !!!</a> </li>
<li><a href="#">du contenue intérréssant !!!</a> </li>
<li><a href="#">du contenue intérréssant !!!</a> </li>
</ul>
</li>
</ul> 
</BODY>
</HTML>
---------------------------------------------------------------------------------------------------------------CSS:
h1{ 
color : green;
border-bottom:1px solid green;
border-left:10px solid green;
}
.menuH1{ 
font-family:Comic Sans MS; 
font-size:13px;
cursor:pointer;           
}
.menuH1 a{ 
color : inherit;
text-decoration:none;       
}     
.menuH1 li{
width : 200px;
text-align : bottom;
color:#123480;
border : 1px solid gray;
background-repeat:repeat-x;
padding : 5px;
background-color:#ffffff; 
height : 20px;
margin: 0px;
list-style-type:none; 
display:inline-block;
background-image:url("bg.png");
}
.menuH1 ul{
visibility:hidden;   
position:relative;   
display:inline-block;     
padding: 0px;
left : -6px;/*-(la bordure gauche+padding gauche)*/
top : 7px;/*(hauteur de la li +bordure haute)- taille du text en pixel - (taille du text en pixel/2.5).... 
(taille du text en pixel/2.5) a peux près = à marge du texte en fonction de sa taille */
}
.menuH1 ul li ul{
left:212px;/*taille de la li + bordure gauche et droite+padding gauche et droite*/
top : 0;/*obligé de lui indiqué je sais pas pk*/
position:absolute;
visibility:hidden;     
}
-------------------------------------------------------------------------------------------------------------var Dynamic={
Animation : $class({
constructor : function(){
if(arguments.length>1){
var elements=arguments[0];
this.define=arguments[1];
}else this.define=arguments[0];
if(this.define instanceof Array)
this.define={piste:this.define};
if(this.define.name)
this.define={piste:[this.define]};
this.fps=this.define.fps || 25;
this.piste=[]; 
this.lengthAct=0;
for (var i= 0,length=this.define.piste.length; i < length; i++){
this.piste[i]=this.addPiste(this.define.piste[i]);
this.lengthAct=this.piste[i].lengthAct>this.lengthAct?this.piste[i].lengthAct:this.lengthAct;
}
if(elements) 
return this.addPlayer(elements);
},
addPlayer : function(elements){
return new this.Player(elements instanceof Array?elements:[elements],this);
},
addPiste : function(piste){
if(/color|Color/.test(piste.name)){
return new this.Piste.Color(piste,this);
}else if(piste.name=='left' || piste.name=='top' || piste.name=='target'){
return new this.Piste.Position(piste,this);
}else if(piste.name=='opacity'){
return new this.Piste.Opacity(piste,this);
}else if(piste.name=='scale'){
return new this.Piste.Scale(piste,this);
}else return new this.Piste.ModelBox(piste,this);
},
Piste : $abstract({
constructor : function(define,animation){
this.define=define;
this.animation=animation;
$get([this.define,this.animation.define],'inOut,replay,deferOrigine,deferProportion,deferVariation,de
ferDuration,deferDelay,deferProportionToOrigine',this.define)
this.name=this.define.name; 
this.lengthAct=0;
if(!this.define.key){
this.define.key=[this.define];
this.define.value=this.define.endValue;
}
for(var i=0,length=this.define.key.length;i<length;i++){
var key=this.define.key[i];
key.actLength=Math.floor(key.duration/this.animation.fps);
this.lengthAct+=key.actLength;
key.endAct=this.lengthAct;
key.startValue=i?this.define.key[i-1].value:this.define.startValue;
if(key.value.length){
key.difValue=[];
key.cumulStart=[];
for(var j=0,lengthj=key.value.length;j<lengthj;j++){
key.difValue[j]=key.value[j]-key.startValue[j];
key.cumulStart[j]=i?this.define.key[i-1].cumulStart[j]+this.define.key[i-1].difValue[j]:0;
}
}else{
key.difValue=key.value-key.startValue;
key.cumulStart=i?this.define.key[i-1].cumulStart+this.define.key[i-1].difValue:0;
} 
if(!key.interpolation)
key.interpolation={type:'linear'};
else Dynamic.Interpolation.initializeInterpolation(this.define,key,i);
}
for(var i=0;i<length;i++)
this.define.key[i].endInverseAct=this.lengthAct-(this.define.key[i-1]?this.define.key[i-1].endAct:0);
}, 
Opacity : {
constructor : function(){
this.$super(arguments);
this.isIE=(navigator.appName == "Microsoft Internet Explorer");
},
getOrigine : function(element){
return Element.getStyle(element,this.name);
},
setValue : function(element,value){
element.style[this.isIE?'filter':this.name]=(this.isIE)?'alpha(opacity='+value*100+')':value;
}
},
ModelBox : {
constructor : function(){
this.$super(arguments);
},
getOrigine : function(element){
return parseInt(Element.getStyle(element,this.name));
},
setValue : function(element,value){
element.style[this.name]=value+'px';
}
},
Position : {
constructor : function(){
this.$super(arguments);
},
initializeElement : function(element){
var position=Element.getStyle(element,'position');
if(position!='relative' || position!='absolute') 
Element.absolutize(element);
},
getOrigine : function(element){
return Element[this.name=='target'?'offsets':'offset'](element,this.name);
},
setValue : function(element,value){//$('beug').innerHTML+=value;
if(this.name=='target'){
element.style.left=value[0]+'px';
element.style.top=value[1]+'px';
}else element.style[this.name]=value+'px';
}
},
Scale : {
constructor : function(){
this.$super(arguments);
},
initializeElement : function(element){
if(this.define.scaleFrom){
var position=Element.getStyle(element,'position');
if(position!='relative' && position!='absolute')
Element.absolutize(element);
else{
var offsets = Element.offsets(element);
var dimensions = Element.getDimensions(element);
element._originalLeft = offsets[0];
element._originalTop = offsets[1];
element._originalWidth = dimensions.width;
element._originalHeight = dimensions.height;
}
element.style.left=element._originalLeft+'px'; 
element.style.top=element._originalTop+'px';
element.style._lastLeft=element._originalLeft;
element.style._lastTop=element._originalTop;
}
},
getOrigine : function(element){
var dimensions = Element.getDimensions(element);
return [dimensions.width,dimensions.height];
}, 
setValue : function(element,value){
element.style.width=value[0]+'px';
element.style.height=value[1]+'px';
if(this.define.scaleFrom){
var decayX=Math.floor(element._originalLeft+((element._originalWidth-value[0])*this.define.scaleFrom[0]));
var decayY=Math.floor(element._originalTop+((element._originalHeight-value[1])*this.define.scaleFrom[1]));
element.style.left=decayX+((parseInt(element.style.left) || element.style._lastLeft)-element.style._lastLeft)+'px';
element.style.top=decayY+((parseInt(element.style.top) || element.style._lastTop)-element.style._lastTop)+'px';
element.style._lastLeft=decayX;
element.style._lastTop=decayY;
}
}
},
Color : {
constructor : function(){
this.$super(arguments);
},
getOrigine : function(element){
return this.parseColor(Element.getStyle(element,this.name)); 
}, 
parseColor: function(color) {
if(/rgb/.test(color)){
var parseColor=color.slice(4,color.length-1).split(',');
for(var i=0;i<parseColor.length;i++)
parseColor[i]=parseInt(parseColor[i]);
}else{
var parseColor=[];
if(color.length==7 || color.length==4)color=color.slice(1,color.length);
var n=(color.length==3)?1:2;
for(var i=1;i<4;i++)
parseColor[i-1]=parseInt(color.slice((i*n)-n,(i*n)),16);
}
return parseColor;
},
setValue : function(element,value){
element.style[this.name]='rgb('+(function(){
for(var i=0,toReturn=[];i<3;i++)
if(value[i]>255){
toReturn[i]=255;
}else if(value[i]<0) {
toReturn[i]=0;
}else toReturn[i]=value[i];
return toReturn.join(',');
})()+')';
}
}
}),
Player : $class({
constructor : function(elements,animation){ 
this.animation=animation;
this.piste=animation.piste;
this.pisteLength=animation.piste.length;
this.elements=[];
this.defer=[];
this.length=elements.length;
for(var i=0;i<this.length;i++)
this.elements[i]=$(elements[i]);
for (var i= 0; i < this.pisteLength; i++)
this.defer[i]=this.initializedefer(this.animation.piste[i]);
this.maxLengthAct=0;this.lengthAct=[];
for (var i= 0; i < this.length; i++){
this.lengthAct[i]=[]
for (var j= 0; j < this.pisteLength; j++){
this.lengthAct[i][j]=((((this.piste[j].define.replay || 
0)+1)*(this.piste[j].define.inOut?2:1))*(this.piste[j].lengthAct/(this.defer[j].deferDuration?this.defer[j
].deferDuration.interpolated[i]:1)))+(this.defer[j].deferDelay?this.defer[j].deferDelay.interpolated[i]:
0);
this.maxLengthAct=this.lengthAct[i][j]>this.maxLengthAct?this.lengthAct[i][j]:this.maxLengthAct;
}
}
},
_defer : 
['deferOrigine','deferProportion','deferValue','deferDuration','deferDelay','deferProportionToOrigine'
],
initializedefer : function(piste){
var defer={};
for(var i=0;i<6;i++){
var j=this._defer[i];
if(piste.define[j]){
defer[j]={};
define=piste.define[j]; 
if(typeof define!='function'){
if(typeof define=='object'){
defer[j].interpolation=define.interpolation || {type : 'linear'};
if(typeof define.startValue=='function'){
defer[j].startValue=define.startValue.call(this);
}else defer[j].startValue=define.startValue;
if(typeof define.endValue=='function'){
defer[j].endValue=define.endValue.call(this);
}else defer[j].endValue=define.endValue;
defer[j].actLength=this.length ;
defer[j].endAct=this.length;
defer[j].interpolated=[]; 
if(defer[j].endValue.length){
defer[j].difValue=[];
for(var h=0,lengthh=defer[j].endValue.length;h<lengthh;h++)
defer[j].difValue[h]=defer[j].endValue[h]-defer[j].startValue[h];
}else defer[j].difValue=defer[j].endValue-defer[j].startValue;
for(var k=0;k<this.length;k++){ 
defer[j].interpolated[k]=this.getdeferValue(defer[j],k+(k/(this.length-1 || 1)));
if(j=='deferDelay')
defer[j].interpolated[k]/=this.animation.fps;
}
}else if(j=='deferOrigine'){
var origine=this.getOrigine(piste);
defer[j]={interpolated:origine};
}else if(j=='deferProportionToOrigine'){
if(!origine) 
origine=this.getOrigine(piste);
defer[j]={interpolated:[]};
for(var k=0;k<this.length;k++){ 
var key=piste.define.key[0];
if(key.value.length){
defer[j].interpolated[k]=[];
for(var l=0,length=key.value.length;l<length;l++)
defer[j].interpolated[k][l]=(key.value[l]-(origine[k][l]))/(key.value[l]-key.startValue[l]);
}else defer[j].interpolated[k]=(key.value-(origine[k]))/(key.value-key.startValue);
}
}
}
}
}
return defer;
},
getdeferValue : function(key,act){ 
var t=(key.actLength-(key.endAct-act))/key.actLength;
if(key.difValue.length){
for(var k=0,toReturn=[],length=key.difValue.length;k<length;k++)
toReturn[k]=Dynamic.Interpolation[key.interpolation.type](t,key.difValue[k],key.interpolation,k)+key
.startValue[k];
return toReturn;
}
return 
Dynamic.Interpolation[key.interpolation.type](t,key.difValue,key.interpolation)+key.startValue; 
},
getOrigine : function(piste){
var origine=[];
for(var k=0;k<this.length;k++)  
origine[k]=piste.getOrigine(this.elements[k]);
return origine;
},
togglePlay : function(){
var time=new Date().getTime()
var cumulAct=(time-this.startAct)/this.animation.fps
this.startAct=time;
for (var i= 0; i < this.length; i++){
for (var j= 0; j < this.pisteLength; j++){
var player=this.player[i][j];
player.playInverse=!player.playInverse;
player.startAct=player.isFinish?(time-player.timeFinish)/this.animation.fps:player.isStart?0:player.startAct-cumulAct; 
player.cumulAct=player.isFinish?0:player.currentAct-this.piste[j].lengthAct;
player.inOut=this.piste[j].define.inOut && !player.inOut?true:false;
player.replay=this.piste[j].define.replay ?this.piste[j].define.replay-player.replay:0;
if(player.isFinish){
player.isFinish=false;
this.player.countFinish++;
}
}
}
this.player.toggle=true;
},
playInverse : function(){
this.initializeplay(true);
},
play : function(){
this.initializeplay();
}, 
initializeplay : function(inverse){
this.inverse=inverse;
if(this.interval)
clearInterval(this.interval);
this.player=[];
this.player.countFinish=this.length*this.pisteLength;
for (var i= 0; i < this.length; i++){
this.player[i]=[];
for (var j= 0; j < this.pisteLength; j++){
var inOut=this.piste[j].define.inOut;
this.player[i][j]={
cumulAct : 0,
isStart : false,
currentKey:inverse && !inOut?this.piste[j].define.key.length-1: 0,
countFinish:0,
isFinish:false,
playInverse:inOut?false:inverse,
replay:this.piste[j].define.replay || 0,
inOut:this.piste[j].define.inOut,
startAct : inverse?this.maxLengthAct-this.lengthAct[i][j]:this.defer[j].deferDelay?this.defer[j].deferDelay.interpolated[i]:0
};
if(this.piste[j].initializeElement)
this.piste[j].initializeElement(this.elements[i]);
this.piste[j].setValue(this.elements[i],this.getValue(this.piste[j].define.key[this.player[i][j].currentKey]
,inverse && !inOut?this.piste[j].lengthAct: 0,i,j));
}
}
if(this.animation.define.onStart)
this.animation.define.onStart.call(this); 
this.startAct=new Date().getTime();
this.interval=setInterval(this.setInterval.bind(this), this.animation.fps);
},
setInterval : function(){
var time=new Date().getTime();
var cumulAct=(time-this.startAct)/this.animation.fps;
for (var i= 0; i < this.length; i++){
piste : for (var j= 0,player; j < this.pisteLength; j++){
if(!this.player[i][j].isFinish){
player=this.player[i][j];
if((player.startAct<cumulAct) && !player.isFinish){
if(!player.isStart)
player.isStart=true;
player.currentAct=((cumulAct-player.startAct)*(this.defer[j].deferDuration?this.defer[j].deferDuration.interpolated[i]:1))-player.cumulAct;
if((player.playInverse && 
player.currentAct>(this.piste[j].define.key[player.currentKey].endInverseAct)) || (!player.playInverse 
&& player.currentAct>this.piste[j].define.key[player.currentKey].endAct)){
if(player.playInverse){
player.currentKey--;
}else player.currentKey++;
if(!this.piste[j].define.key[player.currentKey]){
if(player.inOut){
player.inOut=false;
player.playInverse=true;
player.cumulAct+=this.piste[j].lengthAct;
player.currentKey--;
player.currentAct=player.currentAct-this.piste[j].lengthAct;
}else if(player.replay){
var inOut=this.piste[j].define.inOut;
player.inOut=inOut; 
player.playInverse=inOut?false:this.player.inverse;
player.cumulAct+=this.piste[j].lengthAct;
player.currentKey=this.player.inverse && !inOut?this.piste[j].define.key.length-1: 
0;
player.replay--;
player.currentAct=player.currentAct-this.piste[j].lengthAct;
}else{
player.isFinish=true;
player.timeFinish=time-((player.currentAct-this.piste[j].lengthAct)*this.animation.fps);
this.piste[j].setValue(this.elements[i],this.getValue(this.piste[j].define.key[(player.playInverse?++play
er.currentKey:--player.currentKey)],this.piste[j].lengthAct,i,j,player.playInverse));
this.player.countFinish--;
if(!this.player.countFinish)
this.stop();
continue piste;
}
}
}
this.piste[j].setValue(this.elements[i],this.getValue(this.piste[j].define.key[player.currentKey],player.
currentAct,i,j,player.playInverse));
}
}
}
}
},
getValue : function(key,act,i,j,inverse){
var t=inverse? 1-((key.actLength-(key.endInverseAct-act))/key.actLength):(key.actLength-(key.endAct-act))/key.actLength;
var 
deferProportion=this.defer[j].deferProportion?this.defer[j].deferProportion.interpolated[i]:1; 
var deferOrigine=this.defer[j].deferOrigine?this.defer[j].deferOrigine.interpolated[i]:0;
var 
deferProportionToOrigine=this.defer[j].deferProportionToOrigine?this.defer[j].deferProportionToOri
gine.interpolated[i]:false;
var deferValue=this.defer[j].deferValue?this.defer[j].deferValue.interpolated[i]:0;
if(key.difValue.length){
for(var k=0,toReturn=[],length=key.value.length;k<length;k++)
toReturn[k]=Math.floor((Dynamic.Interpolation[key.interpolation.type](t,key.difValue[k],key.interpol
ation,k)+key.cumulStart[k])*(deferProportion instanceof 
Array?deferProportion[k]:deferProportion)*(deferProportionToOrigine?deferProportionToOrigine[k]:
1))+(deferOrigine?deferOrigine[k]:0)+(deferProportionToOrigine?0:this.piste[j].define.startValue[k])+
(deferValue instanceof Array?deferValue[k]:deferValue);
return toReturn;
}
return 
parseFloat((Dynamic.Interpolation[key.interpolation.type](t,key.difValue,key.interpolation)+key.cum
ulStart)*deferProportion*(deferProportionToOrigine || 
1))+deferOrigine+(deferProportionToOrigine?0:this.piste[j].define.startValue)+deferValue; 
},
stop : function(innerCall){
clearInterval(this.interval);
this.interval=null;
if(!innerCall && this.animation.define.onFinish)
this.animation.define.onFinish.call(this);
},
loopPlayer : function(fn){
for (var i= 0; i < this.length; i++){
for (var j= 0; j < this.pisteLength; j++){
fn.call(this,i,j);
}
}
},
rewind : function(){ 
this.stop(true);
this.loopPlayer(function(i,j){
this.piste[j].setValue(this.elements[i],this.getValue(this.piste[j].define.key[(this.inverse && 
!this.piste[j].define.inOut?this.piste[j].define.key.length-1: 0)],this.inverse && 
!this.piste[j].define.inOut?this.piste[j].lengthAct:0,i,j));
});
},
forward : function(){
this.stop(true);
this.loopPlayer(function(i,j){
this.piste[j].setValue(this.elements[i],this.getValue(this.piste[j].define.key[(!this.piste[j].define.inOut
?this.piste[j].define.key.length-1: 0)],!this.piste[j].define.inOut?this.piste[j].lengthAct:0,i,j));
});
},
freeze : function(){
this.isFreeze=true;
this.timeFreeze=new Date().getTime();
this.stop(true);
},
unfreeze : function(){
if(this.isFreeze){
this.isFreeze=false;
this.startAct+=new Date().getTime()-this.timeFreeze;
this.interval=setInterval(this.setInterval.bind(this), this.animation.fps);
}
},
toggleFreeze : function(){
if(this.isFreeze)this.unfreeze();
else this.freeze();
} 
})
}),
Interpolation : {
initializeInterpolation : function(piste,key,j){
var obj=key.interpolation;
switch(obj.type){
case 'spline' : 
obj.ctangente=[];
for(var i=0;i<2;i++){
if(obj.tangente && obj.tangente[i]!==undefined)
obj.ctangente.push(obj.tangente[i]);
else if(i==0){
var subValue=(j>0)?piste.key[j-1].startValue:key.startValue;
var supValue=key.value;
}else{
var supValue=(piste.key[j+1])?piste.key[j+1].value:key.value;
var subValue=key.startValue;
}
if(key.startValue.length){
for(var k=0,tan=[],length=key.startValue.length;k<length;k++)
tan[k]=supValue[k]-subValue[k];
obj.ctangente.push(tan);
}else obj.ctangente.push(supValue-subValue);
}//alert(obj.ctangente)
break;
case 'quake' :
obj.intensity=obj.intensity || 0.2;
break; 
case 'pulse' :case 'wobble' :
obj.inOut=obj.inOut || 5; 
break; 
case 'easeIn' :case 'easeOut' :case 'easeInOut' :
obj.acc=obj.acc || 2;
break; 
case 'easeInOut_elastic' :case 'easeOut_elastic' :case 'easeIn_elastic' :
obj.elasticity=obj.elasticity || false;
obj.resistance=obj.resistance || 0.3;
break; 
case 'easeIn_back' :case 'easeOut_back' :case 'easeInOut_back' :
obj.acc=obj.acc || 2;
obj.back=obj.back || 1.70158;
break; 
case 'spiraleOut' :case 'spiraleIn' :
if(obj.angleStart && obj.angleStart.length){
for(var i=0,length=obj.angleStart.length;i<length;i++)
obj.angleStart[i]=obj.angleStart[i]*Math.PI/180;
}else obj.angleStart=(obj.angleStart===undefined)?45:obj.angleStart;
if(obj.angleEnd && obj.angleEnd.length){
for(var i=0,length=obj.angleEnd.length;i<length;i++)
obj.angleEnd[i]=obj.angleEnd[i]*Math.PI/180;
}else obj.angleEnd=(obj.angleEnd===undefined)?135:obj.angleEnd;
obj.accDecay=obj.accDecay || 1;
if(obj.angleEnd.length){
obj.rayon=[];
for(var i=0,length=obj.angleEnd.length;i<length;i++)
obj.rayon[i]=1/Math.sin(obj.angleEnd[i]);
}else obj.rayon=1/Math.sin(obj.angleEnd);
if(obj.revolution && obj.revolution.length){
for(var i=0,length=obj.revolution.length;i<length;i++)
obj.revolution[i]=obj.revolution[i]*Math.PI*2; 
}else obj.revolution=(obj.revolution || 3)*Math.PI*2;
break; 
}
},
linear : function(t,d){
return d*t;
},
spline : function(t,d,obj,k){
var tan1=k!==undefined?obj.ctangente[0][k]:obj.ctangente[0];
var tan2=k!==undefined?obj.ctangente[1][k]:obj.ctangente[1];
return (-2 * Math.pow(t,3) + 3 * Math.pow(t,2))*d+(Math.pow(t,3) - 2 * Math.pow(t,2) + 
t)*(tan1)+(Math.pow(t,3) - Math.pow(t,2))*(tan2);
},
cosinus : function(t,d,obj){
return d/2*Math.cos((1-t)* Math.PI)+(d/2);
},
quake : function(t,d,obj,k){
var intensity=k!==undefined && obj.intensity.length?obj.intensity[k]:obj.intensity;
return d*(((-Math.cos(t*Math.PI)/2) + 0.5) + ((t==1)?0:Math.random()*intensity));
},
nova : function(t,d,obj){
return d*Math.random();
},
pulse : function(t,d,obj,k){
var inOut=k!==undefined && obj.inOut.length?obj.inOut[k]:obj.inOut;
return d*(Math.floor(t*inOut) % 2 == 0 ? (t*inOut-Math.floor(t*inOut)) : 1-(t*inOut-Math.floor(t*inOut)));
},
wobble : function(t,d,obj,k){
var inOut=k!==undefined && obj.inOut.length?obj.inOut[k]:obj.inOut 
return d*((-Math.cos(t*Math.PI*(inOut*t))/2) + 0.5);
},
spiraleOut : function(t,d,obj,k){
var angleEnd=k!==undefined && obj.angleEnd.length?obj.angleEnd[k]:obj.angleEnd;
var angleStart=k!==undefined && 
obj.angleStart.length?obj.angleStart[k]:obj.angleStart;
var accDecay=k!==undefined && obj.accDecay.length?obj.accDecay[k]:obj.accDecay;
var revolution=k!==undefined && 
obj.revolution.length?obj.revolution[k]:obj.revolution; 
var rayon=k!==undefined && obj.rayon.length?obj.rayon[k]:obj.rayon; 
var accD=(accDecay)?Math.sin(Math.pow(t,accDecay)* Math.PI/2):t;
var decay=((1-accD)*t)+accD;
return rayon*d*decay*Math.sin(angleStart+t*(angleEnd-angleStart+revolution));
},
spiraleIn : function(t,d,obj){
t=1-t;
var accD=(obj.accDecay)?Math.sin(Math.pow(t,obj.accDecay)* Math.PI/2):t;
var decay=((1-accD)*t)+accD;
return d+obj.rayon*d*decay*Math.sin(-obj.angleStart+t*(-obj.angleEnd+obj.angleStart+obj.revolution));
},
easeIn : function(t,d,obj,k){
var acc=k!==undefined && obj.acc.length?obj.acc[k]:obj.acc;
return d*Math.pow(t,acc);
},
easeOut : function(t,d,obj,k){
var acc=k!==undefined && obj.acc.length?obj.acc[k]:obj.acc;
return d*Math.pow(t,1/acc);
},
easeInOut : function(t,d,obj,k){ 
var acc=k!==undefined && obj.acc.length?obj.acc[k]:obj.acc;
if ((t*=2)< 1) return d/2*Math.pow(t,acc);
return d/2*(1-Math.pow(1-(t-1),acc))+d/2;
},
easeInOut_elastic : function(t,d,obj,k) {
var elasticity=k!==undefined && obj.elasticity.length?obj.elasticity[k]:obj.elasticity;
var resistance=k!==undefined && obj.resistance.length?obj.resistance[k]:obj.resistance;
if (t==0) return 0; if ((t*=2)==2) return d;
if (!elasticity || elasticity < Math.abs(d)) { elasticity=d; var x=resistance/4; }
else var x = resistance/(2*Math.PI) * Math.asin (d/elasticity );
if (t < 1) return -.5*(elasticity *Math.pow(2,10*(t-=1)) * Math.sin( (t-x)*(2*Math.PI)/resistance )) ;
return elasticity *Math.pow(2,-10*(t-=1)) * Math.sin( (t-x)*(2*Math.PI)/resistance )*.5 + 
(d-x);
},
easeOut_elastic : function(t,d,obj,k){
var elasticity=k!==undefined && obj.elasticity.length?obj.elasticity[k]:obj.elasticity;
var resistance=k!==undefined && obj.resistance.length?obj.resistance[k]:obj.resistance;
if (t==0) return 0; if (t==1) return d;
if (!elasticity || elasticity < Math.abs(d)) { elasticity=d; var x=resistance/4; }
else var x = resistance/(2*Math.PI) * Math.asin (d/elasticity );
return (elasticity*Math.pow(2,-10*t) * Math.sin( (t-x)*(2*Math.PI)/resistance )+ d);
},
easeIn_elastic : function(t,d,obj,k){
var elasticity=k!==undefined && obj.elasticity.length?obj.elasticity[k]:obj.elasticity;
var resistance=k!==undefined && obj.resistance.length?obj.resistance[k]:obj.resistance;
if (t==0) return 0; if (t==1) return d;
if (!elasticity || elasticity < Math.abs(d)) { elasticity=d; var x=resistance/4; }
else var x = resistance/(2*Math.PI) * Math.asin (d/elasticity );
return -(elasticity*Math.pow(2,10*(t-=1)) * Math.sin( (t-x)*(2*Math.PI)/resistance ));
}, 
easeOut_bounce : function(t,d,obj){
if(t < (1/2.75)) 
return d*(7.5625*t*t) ;
else if (t < (2/2.75)) 
return d*(7.5625*(t-=(1.5/2.75))*t + .75) ;
else if (t < (2.5/2.75)) 
return d*(7.5625*(t-=(2.25/2.75))*t + .9375);
else 
return d*(7.5625*(t-=(2.625/2.75))*t + .984375) ;
},
easeIn_bounce : function(t,d,obj,k){
return d - this.easeOut_bounce(1-t,d,obj) ;
},
easeInOut_bounce : function(t,d,obj){
if (t < 0.5) return this.easeIn_bounce(t*2, d,obj) * .5 
else return this.easeOut_bounce(t*2-1, d,obj) * .5 + d*.5 ;
},
easeIn_back : function(t,d,obj,k){
var acc=k!==undefined && obj.acc.length?obj.acc[k]:obj.acc;
var back=k!==undefined && obj.back.length?obj.acc[k]:obj.back;
return d*Math.pow(t,acc)*((back+1)*t - back);
},
easeOut_back : function (t,d,obj,k) {
var acc=k!==undefined && obj.acc.length?obj.acc[k]:obj.acc;
var back=k!==undefined && obj.back.length?obj.acc[k]:obj.back;
return d*(Math.pow(t-=1,Math.ceil(acc/2)*2 )*((back+1)*t + back) + 1);
},
easeInOut_back : function(t,d,obj,k){
var acc=k!==undefined && obj.acc.length?obj.acc[k]:obj.acc;
var back=k!==undefined && obj.back.length?obj.acc[k]:obj.back; 
if ((t*=2) < 1) return d/2*(Math.pow(t,acc)*(((back*=(1.525))+1)*t - back));
return d/2*(Math.pow(t-=2,Math.ceil(acc/2)*2)*(((back*=(1.525))+1)*t + back) + 2);
}
}
};
Dynamic.Animation.prototype.Piste.Position=$class(Dynamic.Animation.prototype.Piste.Position,Dy
namic.Animation.prototype.Piste);
Dynamic.Animation.prototype.Piste.Color=$class(Dynamic.Animation.prototype.Piste.Color,Dynamic.
Animation.prototype.Piste);
Dynamic.Animation.prototype.Piste.ModelBox=$class(Dynamic.Animation.prototype.Piste.ModelBox
,Dynamic.Animation.prototype.Piste);
Dynamic.Animation.prototype.Piste.Opacity=$class(Dynamic.Animation.prototype.Piste.Opacity,Dyn
amic.Animation.prototype.Piste);
Dynamic.Animation.prototype.Piste.Scale=$class(Dynamic.Animation.prototype.Piste.Scale,Dynamic.
Animation.prototype.Piste);
--------------------------------------------------------------------------------------------------------------function List(list,animOpen,animOver){
animOpen.define.onStart=function(){
if(!this.inverse)
this.elements[0].parentNode.style.visibility="visible";
}
animOpen.define.onFinish=function(){
if(this.inverse){
this.elements[0].parentNode.style.visibility="hidden";
}
} 
var l=$(list).childNodes;
for (var n=0,length=l.length; n<length; n++ ){ 
if(Object.isElement(l[n])){
(function(li){
var ul=li.getElementsByTagName('UL')[0];
li.animOverLI=animOver.addPlayer(li);
if(ul){
for(var i=0,_li=[],length=ul.childNodes.length;i<length;i++){
if(Object.isElement(ul.childNodes[i])){
_li.push(ul.childNodes[i]);
arguments.callee(ul.childNodes[i]) 
}
}
li.animOpenLI=animOpen.addPlayer(_li);
}
Event.observe(li,'mouseover',function(e){
if(!this.isOver){
this.isOver=true;
this.animOverLI.play();
if(this.animOpenLI){
this.animOpenLI.play();
}
}
}.bindAsEventListener(li))
Event.observe(li,'mouseout',function(e){
var target=Event.relatedTarget(e);
if(!Element.childOf(target,this) && target!=this && this.isOver){
this.isOver=false;
this.animOverLI.playInverse();
if(this.animOpenLI){
this.animOpenLI.playInverse();
} 
}
}.bindAsEventListener(li));
})(l[n])
}
}
}
-------------------------------------------------------------------------------------/*
*
* clone de prototype plus leger et plus rapide + kernel 
*
*/
var $abstract=function(_class,superclass){//fonction ki initialise une classe abstraite
var Klass;
_class.subclasses = [];//tableau des sous classe
if(superclass){//voire definition des méthode 
_class.addMethod=Kernel.addMethod;
Kernel.initializeClass(_class,superclass);
Klass=Kernel.extend(superclass.prototype || superclass,_class);
Kernel.addMethods(_class,Klass);
Klass.$super=Kernel.$super;
}
return Klass || _class; 
}
var $class=function(_class,superclass){//fonction ki initialise une classe  
var Klass,i;
Klass=function(){
return this.constructor.apply(this,arguments);//on retourne le constructeur
}
Klass.subclasses = [];//creer un tableau en static , pour les classe futur, ki hériteront d'elle
if(superclass){
Kernel.initializeClass(Klass,superclass);
Klass.prototype=Kernel.clone(superclass.prototype || superclass); 
Kernel.addMethods(_class,Klass); 
Klass.prototype.$super=Kernel.$super; 
}else
Klass.prototype=_class;
if(_class.$static)//recopie les propriété static si définit
for(i in _class.$static)
Klass[i]=_class.$static[i];
Klass.prototype.$static=Klass; 
return Klass;
};
$get=function(obj,properties,result){
var properties=properties.split(',');
var length=properties.length;
var polyProperties=new Array(length);
var result=result || {};
for(var i=0,length=properties.length;i<length;i++){
if(/^poly_/.test(properties[i])){
properties[i]=properties[i].replace(/^poly_/,'');
polyProperties[i]=true; 
}
}
var get={
properties:properties,
polyProperties:polyProperties,
length:length,
remainToFind:length,
alreadyFinded:{}
};
if(obj instanceof Array){
for(var i=0,length=obj.length;i<length;i++)
Kernel.get(obj[i],result,get);
}else Kernel.get(obj,result,get);
if(properties.length-1) 
return result;
else return result[properties[0]];
}
$call=function(obj,property){
var func=$get(obj,property);//on retrouve la fonction avec un $get
var args=Array.prototype.slice.call(arguments,2);//on enregistre les arguments a lui passer
if(func){// si func n est pas null
if(/^poly_/.test(property) && func.length){//si c est une appliquation multiple
for(var i=0,toReturn=[],length=func.length;i<length;i++)//pour chaque element de func , test si c 
est une fonction et applique la avec les arguments, et en rengistrant son retour 
if(typeof func[i]=='function')
toReturn[i]=func[i].apply(obj,args); 
return toReturn;//retourn le tableau de resultat
}else if(typeof func=='function') //sinon , si func est une fonction retourner son application avec 
les arguments
return func.apply(obj,args); 
}
}
$extend=function(obj,toExtends,notInitializeExtends){
if(!notInitializeExtends)
toExtends=Kernel.initializeExtends(obj,toExtends) || toExtends;
if(!obj.$extends){
obj.$extends=toExtends;
}else obj.$extends=obj.$extends.concat(toExtends);
return obj;
}
$each=function(obj,iterator,context,polyEach){
var cumulProperty=polyEach?false:{}; 
if(obj instanceof Array){
for(var i=0,length=obj.length;i<length;i++){
if(typeof obj[i]=='object')
Kernel.each(obj[i],iterator,context,cumulProperty)
}
}else if(typeof obj=='object')
Kernel.each(obj,iterator,context,cumulProperty);
}
Kernel={
version :'0.9',
clone : function(source){//clone un objet en passant par le prototype, comme ca si j amais on 
modifie la source alors le clone aussi, la réciproque n'étant pas vrai
var temp=function(){};
temp.prototype=source;
return new temp(); 
},
extend : function(source,destination){//étend un objet en clonant la source et rajouté les propriété 
sur l objet cloné
var toReturn,i;
toReturn=Kernel.clone(source);
for(i in destination)
toReturn[i]=destination[i];
return toReturn;
},
/*------------------------------------------DEFINITION DES FONCTIONS PRIVEE-------------------------------------------------------*/
addMethod : function(property,value){//ajoute en propriété de l'objet de type fonction , le nom de 
la fonction dans l'objet + la réference de la super class dont hérite la méthode
if(typeof value=='function' && this.superclass){
value.superclass=this.superclass.prototype || this.superclass; 
value.property=property; 
}
(this.prototype || this)[property] = value;
return this;
},
addMethods : function(source,destination){//boucle ki ajoute les méthode,pour toute les propriété 
de l'objet non étendue (sans celle hérité)
for(var i in source)//ajoute les méthode de la classe
if(i!='$static' && i!='constructor')
destination.addMethod(i,source[i]);
if(source.constructor !== Object.prototype.constructor)
destination.addMethod('constructor',source.constructor);
}, 
$super : function(){//fonction permettant d'appeller la superclass de la fonction, 1er agument la 
string de la prorpiété,2eme tableau a passé en argument via apply !! si la tring de la propriété a 
recherché n 'est pas définit, alors elle sera automatiquement atribué du meme nom que celle ki 
l'appele , différent du java, ki si on lui passe rien appelle le constructeur.... pour moi plus logique , a 
voire 
var args,superclass,get,caller,id;
caller=arguments.callee.caller;//récupere la fonction ki a appellé le super
if(typeof arguments[0]=='string'){
id=arguments[0];
args=arguments[1];
}else{
id=caller.property;
args=arguments[0];
}
get=caller.superclass[id];
if(typeof get=='function')
return get.apply(this,args || []);
return get;
},
initializeClass : function(Klass,superclass){//ajoute la méthode d'ajout de methode + definit 
superclass et ajoute une la class dans le tableau de sa superclass, ki récapitulise toute les sousclasses
Klass.addMethod=Kernel.addMethod;
Klass.superclass = superclass;
superclass.subclasses=[Klass];
},
each : function(obj,iterator,context,cumulProperty){
for(var i in obj){
if(i!=='$extends'){
if(!cumulProperty || !cumulProperty[i]){
iterator.call(context || null,obj[i],i);
if(cumulProperty)
cumulProperty[i]=true;
}
}else
for(var j=0,length=obj[i].length;j<length;j++)
Kernel.each(obj[i][j],iterator,context,cumulProperty); 
}
},
initializeExtends : function(obj,toExtends){
for(var i=0,length=toExtends.length;i<length;i++){
if(toExtends[i]==obj){
var haveRecurseRef = true;
toExtends[i]=false;
}else if(toExtends[i].$extends) 
toExtends[i].$extends=Kernel.initializeExtends(obj,toExtends[i].$extends) || 
toExtends[i].$extends;
}
if(haveRecurseRef){
for(var i=0,toReturn=[],length=toExtends.length;i<length;i++){
if(toExtends[i])
toReturn.push(toExtends[i]);
}
return toReturn;
}
},
set : function(result,property,get,_get,i,poly){
if(get.polyProperties[i]){
if(!result[property]){
result[property]=[_get];
}else result[property].push(_get);
}else result[property]=_get;
if(!poly){ 
get.alreadyFinded[property]=true;
get.remainToFind--;
if(!get.remainToFind)return true;
}
}, 
get : function(obj,result,get){
getLoop : for(var i=0;i<get.length;i++){
var property=get.properties[i];
if(!get.alreadyFinded[property]){
var _get=obj[property];
if(_get!==undefined)
if(Kernel.set(result,property,get,_get,i))
return true;
if(get.polyProperties[i]){
var _get=obj['poly_'+property];
if(_get!==undefined)
if(Kernel.set(result,property,get,_get,i,true))
return true;
}
}
}
if(obj.$extends){
for(var i=0,lengthE=obj.$extends.length;i<lengthE;i++) 
if(Kernel.get(obj.$extends[i],result,get))
return true;
}
}
};
/*
*------Selection--------------------------------------------------*/
function $(id) {
return (typeof(id) == "string") ? document.getElementById(id) : id; 
}
/*
*------Object--------------------------------------------------*/
Object.extend = function(destination, source) {
for (var property in source)
destination[property] = source[property];
return destination;
};
Object.extend(Object, {
clone: function(object) {
return Object.extend({ }, object);
},
isElement: function(object) {
return object && object.nodeType == 1;
}
});
/*
*------Fonction--------------------------------------------------*/
Object.extend(Function.prototype, {
bind : function() {
var __method = this, args = Array.prototype.slice.call(arguments,0), object = args.shift();
return function() {
return __method.apply(object, args.concat(Array.prototype.slice.call(arguments,0)));
} 
},
bindAsEventListener : function() {
var __method = this, args = Array.prototype.slice.call(arguments,0), object = args.shift();
return function(event) {
return __method.apply(object, [( event || 
window.event)].concat(args).concat(Array.prototype.slice.call(arguments,0)));
}
}
});
/*
*-----Array---------------------------------------------------------*/ 
Object.extend(Array.prototype,{
include: function(value) {
for(var i=0;i<this.length;i++)
if(this[i]===value)
return true;
return -1;
}
});
// merci a ralecul pour son implementation plus rapide de l objet Event 
var Event = {
observe : function() {
if(window.addEventListener){
return function(element, eventName, handler) {
$(element).addEventListener(eventName, handler, false);
};
}else if(window.attachEvent){
return function(element, eventName, handler) {
$(element).attachEvent("on"+eventName, handler); 
};
}else{
return function(element, eventName, handler) {};
}
}(),
stopObserving : function() {
if(window.removeEventListener){
return function(element, eventName, handler) {
$(element).removeEventListener(eventName, handler, false);
};
}else if(window.detachEvent){
return function(element, eventName, handler) {
$(element).detachEvent("on"+eventName, handler);
};
}else{
return function(element, eventName, handler) {};
}     
}(),
stop: function(event) {
if(window.attachEvent){ 
return function(event){ 
event.returnValue = false;
event.cancelBubble = true;
};
}else{ 
return function(event) {
event.preventDefault();
event.stopPropagation();
};
} 
}(),
element: (function(event) {
if(window.addEventListener){
return function(event){
return event.target;
}
}else return function(event){
return event.srcElement;
}
})(),
relatedTarget:(function(event) {
if(window.addEventListener){
return function(event){
return event.relatedTarget;
}
}else return function(event){
var element;
switch(event.type) {
case 'mouseover': element = event.fromElement; break;
case 'mouseout': element = event.toElement; break;
default: return null;
}
return element;
}
})()
};
var Element = new Object();
Object.extend(Element,  {
getStyle: function(element, rule) {
if(rule == 'float')  
rule ='cssFloat';
element = $(element);
var value = element.style[rule];
if (!value){ 
if(document.defaultView && document.defaultView.getComputedStyle){
if(rule=='borderColor' || rule=='border-color'){
rule='border-left-color';
}else rule = rule.replace(/[A-Z]/g, function (strMatch, p1){return "-"+strMatch.toLowerCase();});
value = document.defaultView.getComputedStyle(element, 
"").getPropertyValue(rule); 
}else if(element.currentStyle) {
rule = rule.replace(/\-(\w)/g, function (strMatch, p1){return p1.toUpperCase();});
value = element.currentStyle[rule] ;
}
}
if (rule == 'opacity') return value ? parseFloat(value) : 1.0;
return value == 'auto' ? null : value;
},
offset : function(element,type){
element = $(element);
var value = 0,offset=type=='left'?'offsetLeft':'offsetTop';
do {
value += element[offset] || 0;
element = element.offsetParent;
} while (element);
return value;
},
offsets : function(element){
element = $(element);
var valueT = 0, valueL = 0;
do { 
valueT += element.offsetTop || 0;
valueL += element.offsetLeft || 0;
element = element.offsetParent;
} while (element);
return [valueL, valueT];
},
positionedOffset: function(element) {
var valueT = 0, valueL = 0;
do {
valueT += element.offsetTop || 0;
valueL += element.offsetLeft || 0;
element = element.offsetParent;
if (element) {
if (element.tagName == 'BODY') break;
var p = Element.getStyle(element, 'position');
if (p == 'relative' || p == 'absolute') break;
}
} while (element);
return [valueL, valueT];
},
absolutize: function(element) {
element = $(element);
if (Element.getStyle(element,'position')== 'absolute') return;
// Position.prepare(); // To be done manually by Scripty when it needs it.
var offsets = Element.positionedOffset(element);
var top = offsets[1];
var left = offsets[0];
var width = element.clientWidth;
var height = element.clientHeight; 
element._originalLeft = left - parseFloat(element.style.left || 0);
element._originalTop = top  - parseFloat(element.style.top || 0);
element._originalWidth = element.style.width;
element._originalHeight = element.style.height;
element.style.position = 'absolute';
element.style.top = top + 'px';
element.style.left = left + 'px';
element.style.width = width + 'px';
element.style.height = height + 'px';
return element;
},
getDimensions: function(element) {
element = $(element);
var display = Element.getStyle(element,'display');
if (display != 'none' && display != null) // Safari bug
return {width: element.offsetWidth, height: element.offsetHeight};
// All *Width and *Height properties give 0 on elements with display none,
// so enable the element temporarily
var els = element.style;
var originalVisibility = els.visibility;
var originalPosition = els.position;
var originalDisplay = els.display;
els.visibility = 'hidden';
els.position = 'absolute';
els.display = 'block';
var originalWidth = element.clientWidth;
var originalHeight = element.clientHeight; 
els.display = originalDisplay;
els.position = originalPosition;
els.visibility = originalVisibility;
return {width: originalWidth, height: originalHeight};
},
childOf: function(element, ancestor) {
element = $(element), ancestor = $(ancestor);
while (element = element.parentNode)
if (element == ancestor) return true;
return false;
}
});
Pages 1 2

Télécharger aussi :

Exercice HTML corrigé les balises DIV et SPAN

Exercice HTML corrigé mises en forme de paragraphes

Exercice HTML corrigé formulaire type

Exercice HTML corrigé apparence d’un tableau

Exercice HTML corrigé page avec bannière et formulaire

Exercice HTML corrigé image et tableau

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *