Alex XIV
Admin
Nombre de messages : 236
Age : 48
Localisation : par GPS
Date d'inscription : 02/02/2007
 |  Sujet: Correction Test DHTML  Jeu 22 Fév 2007 - 11:45 | |
| Voici la correction du Test DHTML: - Citation :
- <html>
<head>
<title>TEST - DHTML</title>
<!--Ci dessous Les styles CSS-->
<style type="text/css">
body{
background-image:url(images/bg.jpg);
background-repeat:no-repeat;
background-color:#d1d1d1;
background-position:100 110;
}
#haut
{
width:800;
height:100;
background:#d3b9f7;
position:absolute;
top:0;
left:0;
z-index:0;
}
#haut2
{
width:800;
height:50;
background:#000000;
position:absolute;
top:100;
left:0;
z-index:2;
}
#bas
{
width:800;
height:50;
background:d3b9f7;
position:absolute;
top:480;
left:0;
z-index:3;
}
#divdiap{
width:100;
height:80;
background:#000000;
top:7;
left:650;
z-index:1;
position:absolute;
}
#back{
top:15;
left:650;
z-index:4;
position:absolute;
}
#boutons{
position:absolute;
top:20;
width:30;height:30;
background:#ff9900;
border-top-style:solid;
border-top-color:#bbbbbb;
border-top-width:2;
border-left-style:solid;
border-left-color:#bbbbbb;
border-left-width:2;
border-right-style:solid;
border-right-color:#666666;
border-right-width:2;
border-bottom-style:solid;
border-bottom-color:#666666;
border-bottom-width:2;
}
#bouton{
position:absolute;
left:600;
top:490;
width:30;
height:30;
background:#a8a879;
border-top-style:solid;
border-top-color:#bbbbbb;
border-top-width:2;
border-left-style:solid;
border-left-color:#bbbbbb;
border-left-width:2;
border-right-style:solid;
border-right-color:#666666;
border-right-width:2;
border-bottom-style:solid;
border-bottom-color:#666666;
border-bottom-width:2;
z-index:5
}
#bouton2{
position:absolute;
left:650;
top:490;
width:30;
height:30;
background:#cfa095;
border-top-style:solid;
border-top-color:#bbbbbb;
border-top-width:2;
border-left-style:solid;
border-left-color:#bbbbbb;
border-left-width:2;
border-right-style:solid;
border-right-color:#666666;
border-right-width:2;
border-bottom-style:solid;
border-bottom-color:#666666;
border-bottom-width:2;
z-index:5
}
#bouton3{
position:absolute;
left:700;
top:490;
width:30;
height:30;
background:#a1d4c9;
border-top-style:solid;
border-top-color:#bbbbbb;
border-top-width:2;
border-left-style:solid;
border-left-color:#bbbbbb;
border-left-width:2;
border-right-style:solid;
border-right-color:#666666;
border-right-width:2;
border-bottom-style:solid;
border-bottom-color:#666666;
border-bottom-width:2;
z-index:5
}
#bouton4{
position:absolute;
left:750;
top:490;
width:30;
height:30;
background:#bbdaec;
border-top-style:solid;
border-top-color:#bbbbbb;
border-top-width:2;
border-left-style:solid;
border-left-color:#bbbbbb;
border-left-width:2;
border-right-style:solid;
border-right-color:#666666;
border-right-width:2;
border-bottom-style:solid;
border-bottom-color:#666666;
border-bottom-width:2;
z-index:5
}
#commentaire{
width:80;
border:double 1 #05193c;
background-color="#d3b9f7";
visibility:hidden;
position:absolute;
z-index:6;
}
#o{
top:12;
left:30;
font-size:100;
position:absolute;
z-index:7;
}
#oo{
top:12;
left:15;
position:absolute;
z-index:7;
}
</style>
<script language="javascript">
//////////// DIAPORAMA /Les images sont plaçées dans un dossier nommé images////////////////////////
im=["images/p1.jpg","images/p2.jpg","images/p3.jpg","images/p4.jpg"];
i=0;
valeur=100;
changer=true;
function diaporama(){
if(valeur>0 && changer==true){
valeur--;
}
else{
changer=false;
}
if(valeur<100 && changer==false){
valeur++;
}
else{
changer=true;
}
if(valeur==0){
if(i<im.length-1){
i++;
}
else{
i=0;
}
}
document.getElementById("diap").src=im[i];
document.getElementById("diap").style.filter="alpha(opacity="+valeur+")";
setTimeout("diaporama()",1);
}
///////////////CHANGEMENT DE BACKGROUND//////////////
function afficher(){
for(i=0;i<5;i++){
if(document.form1.sel.options[i].selected){
document.styleSheets[0].rules[0].style.backgroundImage=document.form1.sel.options[i].value;
}
}
}
//////////////CHANGEMENT DE COULEURS///////////////////////////////
function couleur(coul){
document.styleSheets[0].rules[1].style.background=(coul);
document.styleSheets[0].rules[3].style.background=(coul);
document.styleSheets[0].rules[11].style.background=(coul);
}
////////////// DIV en commentaire contenant la COULEUR ///////////////////
function bulle(tt){
document.getElementById("commentaire").style.visibility="visible"
document.getElementById("commentaire").innerText=tt;
}
function cacher(){
document.getElementById("commentaire").style.visibility="hidden";
}
function bouger(){
x=event.x;
y=event.y;
document.getElementById("commentaire").style.left=x+20;
document.getElementById("commentaire").style.top=y+20;
}
////////////////// FONCTION ZOOM //////////////////////////////////////////:
j=0
aller=true;
function retaille(){
if(j<100 && aller){
j=j+1;
}
else{
aller=false;
}
if(j>0 && aller==false){
j=j-10;
}
else{
aller=true;
}
document.getElementById("o").style.fontSize=j;
setTimeout("retaille()",1);
}
</script>
</head>
<body topmargin="100" onload=" retaille() ; diaporama()">
<!------Le mot ZOOM est écrit ci dessous----->
<span id="oo"><font size="6">zo </font><span id="o">o</span><font size="6">m</font></span>
<!--les div nommées haut, haut2 et bas correspondent aux cadres placés en background, ils sont gérés par les css comme tous les div de la page-->
<div id="haut">
<!---------DIV contenant le DIAPORAMA-------------->
<div id="divdiap">
<img src="images/p1.jpg" id="diap">
</div>
</div>
<!----BALISE SELECT changement de Background----->
<div id="haut2">
<form name="form1">
<select id="back" onchange="afficher()" name="sel">
<option>Fond de page</option>
<option value="url(images/bg2.jpg)">Fond mauve</option>
<option value="url(images/bg3.jpg)">Fond bleu</option>
<option value="url(images/bg4.jpg)">Fond vert</option>
<option value="url(images/bg.jpg)">Fond Or</option>
</select>
</form>
</div>
<!-------BOUTONS changement bandeaux couleurs--------->
<form name="form2">
<div id="bouton" name="b1" value="#a8a879" onclick="couleur(this.value)" onmousemove="bouger(); bulle('Couleur 1')" onmouseout="cacher()"></div>
<div id="bouton2" name="b2" value="#cfa095" onclick="couleur(this.value)" onmousemove="bouger(); bulle('Couleur 2')" onmouseout="cacher()"></div>
<div id="bouton3" name="b3" value="#a1d4c9" onclick="couleur(this.value)" onmousemove="bouger(); bulle('Couleur 3')" onmouseout="cacher()"></div>
<div id="bouton4" name="b4" value="#bbdaec" onclick="couleur(this.value)" onmousemove="bouger(); bulle('Couleur 4')" onmouseout="cacher()"></div>
<form>
<!---DIV contenant la couleur--->
<div id="commentaire"></div>
<div id="bas"></div>
</body>
</html> | |
|
Marco
THQ
Nombre de messages : 68
Age : 46
Date d'inscription : 03/02/2007
| | Sujet: Merci Jeu 22 Fév 2007 - 12:18 | |
| De rien...  P#t@in c'est nul, vraiment je suis capable de tout pour avoir plus de messages !!! | |
|
Marco
THQ
Nombre de messages : 68
Age : 46
Date d'inscription : 03/02/2007
| | Sujet: Merci Jeu 22 Fév 2007 - 12:27 | |
| De rien... P#t@in c'est nul, vraiment je suis capable de tout pour avoir plus de messages !!! | |
|
dibo
THQ
Nombre de messages : 61
Localisation : ici
Date d'inscription : 04/02/2007
| | Sujet: correction test dhtml Jeu 22 Fév 2007 - 14:06 | |
| si si, vraiment, merci marco ! | |
|
Contenu sponsorisé
| | Sujet: Re: Correction Test DHTML | |
| |
|
