Diaporama

Signaler
-
 salwa3 -
salut,
Etant débutante en javascript, j'ai quelques petits problèmes...

lorsque je clique sur l'image elle s'agrandisse dans un div qui sera sur la page courante(c comme un calque) ce dernier contient 2 autre div qui s’apparaisse lorsqu'on onmouseover l'image ( ces 2 div correspond au suivant et précédant ) pour changer l'image.( c'est comme le cas du diaporama)/
mon code ça marche bien sur Firefox mais sur IE et Google-chrome la position
des 2 div qui permet de changer l'image vont changer leur positions est parfois on les trouvent on dehors d'image.
aussi j'ai un autre problème que j'arrive pas a le résoudre et j'ai rien trouvé sur internet, mon image doit se positionner au centre d’écran
meme ci je clique sur une image qui est en bas du page elle dois s'apparaitre directement sur l'écran sans besoin se glisser vers le haut du page
pouvez vous m'aider ? merci d'avance.
voila mon code:
<html>
<script>
i = 1;
function affiche(numero) {
img=new Image();
i = numero;
if (i==0) i=1;
if (i==7) i=6;
img.src ='img/img-20-2-'+i+'.jpg';
img.id = "myimg";
img.onload = function() {
document.getElementById("overlay").style.display = "block";
document.getElementById("overlay").innerHTML = '';
document.getElementById("overlay").style.display = 'block';
document.getElementById("overlay").appendChild(img);
};
img.onmouseover = function() {
document.getElementById("ov1").style.display = 'block';
document.getElementById("ov2").style.display = 'block';
document.getElementById("ov1").appendChild(document.getElementById("but1"));
document.getElementById("ov2").style.display = 'block';
document.getElementById("ov2").appendChild(document.getElementById("but2"));
};
img.onmouseout=function(){ document.getElementById("ov2").style.display='none';
document.getElementById("ov1").style.display='none';
};
document.getElementById("ov1").onmouseover=function(){ document.getElementById("ov1").style.display="block";
document.getElementById("ov2").style.display="block";};
document.getElementById("ov2").onmouseover=function(){ document.getElementById("ov2").style.display="block";
document.getElementById("ov1").style.display="block";};
document.getElementById("overlay").onclick = function() {
this.style.display = 'none';
document.getElementById("ov1").style.display='none';
document.getElementById("ov2").style.display='none';

};
}

</script>

<style>
#overlay {
display : none;
text-align: center;
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: rgba(0,0,0,0.6);
background-image:overlay.appendChild();
}
#ov1 { display : none;
text-align: center;
position: absolute;

width: 3%; height: 5%;
margin-left:400px;
background-color: rgba(0,0,0,0.8);
MARGIN-top:220px;
background-image :overlay.appendChild(img);
}
#ov2 { display : none;

position: absolute;

width: 3%; height: 5%;
margin-left:800px;

background-color: rgba(0,0,0,0.8);
MARGIN-top:220px;
//background-image :overlay.appendChild(img);
}
#myimg{
margin-top: 100px;
}
#myimg{
margin-top: 100px;
}

.bt {
color:blue;
background:rgba(0,0,0,0.2);
border:0px;
}
.bt:hover{
color:blue;}
</style>

</head>

<center>








nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
<center>
</center>


>>
<<



</html>

6 réponses

Qui peut m'aider svp?
Messages postés
1788
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
24 juillet 2021
132
bonjour

pour centrer une image dans la page en prenant le scroll il faut faire comme ceci

function centrer(){

var dde=document.documentElement;
var elem=document.getElementById('mon_element_a_centrer');

var dst=document.body.scrollTop || document.documentElement.scrollTop;
var dsl=document.body.scrollLeft || document.documentElement.scrollLeft;

elem.style.top=(dde.clientHeight-elem.offsetHeight)/2+dst+"px";
elem.style.left=((dde.clientWidth-elem.offsetWidth)/2)+dsl+'px';
},


mais il faut que le conteneur est une taille prédéfinit

aussi dans la fonction tu déclare les variables sans sans le mot var ce qui fait que les variables sont globale
merci pour votre aide , mais l'image ce positionne au centre de mon div et pas au centre d’écran
svp comment je peux mettre mes image dans div qui est connu par son id ??
pour appliquer (var elem=document.getElementById('mon_element_a_centrer');)
car les image qui doivent subir la transformation c'est ceux qui sont sur le div="overlay"
Messages postés
1788
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
24 juillet 2021
132
normalement

var elem=document.getElementById('overlay')


tout simplement
mais c pas overlay que je veux le centrer mais l'image dedans