[javascript] Création d'image, connaître sa taille
Bonjour à tous !!
Voici mon problème.
J'ai un script perl qui me génère des graphes de taille diverses et qui me retourne le lien vers l'image créée.
Je passe ce lien à une fonction javascript afin de réaliser un effet (je suis sous ie) de transition entre une image de départ et l'image passée en argument de la fonction.
Voici mon script javascript:
NB: La fonction Make_Effect permet de réaliser un effet de transition entre image1 et image2
Avec divID : le div qui contient l'image
img : le chemin complet de l'image créée précédemment
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
var MyFilters = new Array();
MyFilters[0]= "progid:DXImageTransform.Microsoft.Wheel(duration=2);";
MyFilters[1]= "progid:DXImageTransform.Microsoft.CheckerBoard(duration=2)";
MyFilters[2]= "progid:DXImageTransform.Microsoft.GradientWipe(duration=2)";
MyFilters[3]= "progid:DXImageTransform.Microsoft.Iris(duration=2)";
MyFilters[4]= "progid:DXImageTransform.Microsoft.Pixelate(duration=2)";
MyFilters[5]= "progid:DXImageTransform.Microsoft.RadialWipe(duration=2)";
MyFilters[6]= "progid:DXImageTransform.Microsoft.RandomDissolve(duration=2)";
MyFilters[7]= "progid:DXImageTransform.Microsoft.Spiral(duration=2)";
MyFilters[8]= "progid:DXImageTransform.Microsoft.Stretch(duration=2)";
MyFilters[9]= "progid:DXImageTransform.Microsoft.Wheel(duration=2);";
MyFilters[10]= "progid:DXImageTransform.Microsoft.RadialWipe(duration=2)";
MyFilters[11]= "progid:DXImageTransform.Microsoft.Pixelate(duration=2)";
function Random()
{
return Math.round(Math.random()*MyFilters.length);
}
function Make_Effect(divID,img)
{
ImgID = "myImg";
image1 = document.createElement('img');
image1.src = '../images/test2.png';
image1.id = ImgID;
image2 = document.createElement('img');
image2.src = img;
document.getElementById(divID).style.position="absolute";
document.getElementById(divID).style.left=(document.body.scrollWidth/2)-(image1.width/2);
document.getElementById(divID).style.top=(screen.height/2)-(image1.height/1.3);
document.getElementById(divID).appendChild(image1);
document.getElementById(ImgID).style.filter=MyFilters[Random()];
document.getElementById(ImgID).filters[0].Apply();
document.getElementById(ImgID).src = image2.src;
alert(image2.style.width);
document.getElementById(ImgID).filters[0].Play();
} |
Et voici le code HTML de ma page:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<html>
<head>
<link rel='stylesheet' href='../style.css' type='text/css' media='screen' />
<script language="javascript" src="../graph_effect.js" type="text/javascript"></script>
</head>
<body class='Body2' onload="Make_Effect('DivImg','../perlgraph/TX2_lines_Evolution_PerMonthNetherlands_UYmDvM.gif');">
<TABLE width=50% align='center'>
<TR><TD align='center' class='Title'>Lines evolution per month - Netherlands</TD></TR>
</TABLE>
<DIV id='DivImg'></DIV>
</body>
</html> |
Mais mon problème, c'est que la taille de mon image2 peux varier alors que celle de image1 restera toujours fixe (500*500).
Donc je me retrouve parfois avec une image2 aplatie ou trop agrandie ...
Je voudrais savoir s'il est possible de récupérer la largeur et hauteur de mon image2 et de l'appliquer à image1 pour que la transition se termine sur l'affichage de image2 dans sa "vraie" taille.
Merci mille fois pour votre aide !!!
