Phènomène bizzare de réolution d'image avec js
Phènomène bizzare de réolution d'image avec js - HTML/CSS - Programmation
Sujets relatifs:
- Problème de feuille d'envoi et d'image par java .
- [Résolu] Redimensionner une image externe
- Redimentionnement d'image.
- Image sous PHP
- Affichage une image si scrollbar-face est activé
- Help... Script d'image qui ne passe pas sur mon new hébergeur
- Afficher une image locale dans un fomulaire HTML
- [GD] Rendre une image transparente + ajout d'un rectangle.
- [PHP] reduire le poids d'une image.
- galeris image
Marsh Posté le 24-07-2005 à 18:49:14
voilou c'est assez curieux.
Comme vous pouvez le voire sur http://fuma001.free.fr/web_anim/, les images défilent avec du javascript. J'ai utilisé des variable tableau en javascript ou j'ai enregistré les adresses des images à affiché, et pour faire défilé les images, j'avance dans le tableau comme ceci :
<script type="text/javascript">
<!--
var b = new Array();
b[0] = new Image(); b[0].src = "/web -site/image-appart/1 - homepage/1/189_0_Image001.jpg";
b[1] = new Image(); b[1].src = "/web -site/image-appart/1 - homepage/1/189_1_Image002.jpg";
b[2] = new Image(); b[2].src = "/web -site/image-appart/1 - homepage/1/189_2_Image004.jpg";
var d = new Array();
d[0] = new Image(); d[0].src = "/web -site/image-appart/2 - homepage/1/210_0_PICT001.gif.jpg";
d[1] = new Image(); d[1].src = "/web -site/image-appart/2 - homepage/1/210_1_PICT003.gif.jpg";
d[2] = new Image(); d[2].src = "/web -site/image-appart/2 - homepage/1/210_3_PICT005.gif.jpg";
var e = new Array();
e[0] = new Image(); e[0].src = "/web -site/image-appart/3 - homepage/1/427_0_PICT0003.jpg.jpg";
e[1] = new Image(); e[1].src = "/web -site/image-appart/3 - homepage/1/427_1_PICT0005.jpg.jpg";
e[2] = new Image(); e[2].src = "/web -site/image-appart/3 - homepage/1/427_2_PICT0002.jpg.jpg";
var f = new Array();
f[0] = new Image(); f[0].src = "/web -site/image-appart/4 - homepage/1/399_0_PICT0001.jpg.jpg";
f[1] = new Image(); f[1].src = "/web -site/image-appart/4 - homepage/1/399_0_PICT0001.jpg.jpg";
f[2] = new Image(); f[2].src = "/web -site/image-appart/4 - homepage/1/399_1260_PICT0008.jpg";
var i = 0; /* i est le nombre d'image dans la séquence */
var img = 0; /* img = 3 est le nombre d'image max */
function Animation()
{
if(i > 2) i = 0;
if(img > 3) img = 0;
if (img==0)
document.images[0].src = b[i].src;
else if (img==1)
document.images[1].src = d[i].src;
else if (img==2)
document.images[2].src = e[i].src;
else
{
document.images[3].src = f[i].src;
i = i + 1;
}
img = img + 1;
window.setTimeout("Animation()",1000);
}
window.setTimeout("Animation()",1000);
//-->
</script>
et juste avant, j'affiche mes images.
<a href="#"><img src="/web -site/image-appart/1 - homepage/1/189_0_Image001.jpg" onMouseOver="this.className='image_in';" onMouseOut="this.className='image_out';"></a>
<a href="#"><img src="/web -site/image-appart/2 - homepage/1/210_0_PICT001.gif.jpg" onMouseOver="this.className='image_in';" onMouseOut="this.className='image_out';"></a>
<a href="#"><img src="/web -site/image-appart/3 - homepage/1/427_0_PICT0003.jpg.jpg" onMouseOver="this.className='image_in';" onMouseOut="this.className='image_out';"></a>
<a href="#"><img src="/web -site/image-appart/4 - homepage/1/399_0_PICT0001.jpg.jpg" onMouseOver="this.className='image_in';" onMouseOut="this.className='image_out';"></a>
Au première passage, les images ont une bonne resolution, juste avant qu'elle passe par le javascript mais apres les images ont une résolution plus petites.
La résolution n'est plus du tout respecté que j'avais spécifié dans mon fichier css
img, .img_out {
width : 165px;
height : 180px;
float : left;
display: block;
/*a laisser */
border: none;
}
J'ai alors pensé rapellé la classe css à utiliser dans le javascript mais cela ne change pas.
document.images[0].src = b[i].src;
document.images[0].className="image_out";