Création de Fichier.js

Bonjour,

Ou plutôt bonsoir ^^

Je viens poster ici, pour demander de l'aide,

je suis en train de construire une page d'intro pour mon site...

Seulement j'ai une image en grand format, et je voulais que ca taille s'ajuste en fonction de la taille de la fenêtre internet du client.

j'ai donc trouver ce script à placer entre les balise BODY:

Code:

1
2
3
4
5
6
7
8
9
10
11
 
<script language="javascript">
        photo = new Image();
        photo.src = 'photos/intro3.jpg' ;
        var size;
        var LargeurImg = photo.width ;
        var LargeurSreen = document.getElementById('tab').offsetWidth;
        if (LargeurImg > LargeurSreen){size = LargeurSreen;}
        else {size = LargeurImg;}
        document.write("  <img src=\"photos/intro3.jpg\" style=\"width:"+size+"px;\" alt=\"{ALT_IMG}\"/>");
</script>

seulement lors de la première venu sur la page, l'image apparait pas, on est obliger de faire un refresh pour la voir ensuite....

donc on m'a dis d'exporter ce script dans un fichier .js,
seulement je suis nul en JS, et j'aurais aimer qu'on me file un coup de main...

mon code 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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
<!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">
 
<head>
 
	<title>.: Hadrien Richard PhotoBook :.</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="Le Book Photo de Hadrien Richard, photographe passionné Français, habitant dans le Territoire de Belfort, France" lang="fr">
    <meta name="keywords" content="macro, insectes, fleurs, portrait, animaux, architecture, urbaine, gens, moments, belfort, france, etueffont, franche-comté,  photographe, canon, numerique, portfolio, galeries, paysages" lang="fr">
	<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    <meta name="ROBOTS" content="follow, index">
    <meta name="Content-Language" content="fr">
    <meta name="Revisit-after" content="2 days">    
    <script type="text/javascript" src="js/jquery.js"></script>
 
</head>
 
<body>
 
    <div id="titre">
    	<table border="0" align="center">
        	<tbody>
            	<tr>
                	<td align="center">
                    	<a class="langue" href="http://www.guygagnon.com/accueil_en.htm">&nbsp;ENGLISH&nbsp;</a>&nbsp;&nbsp;
                	</td>
					<td align="center">
        				<img src="images/intro_titre.png"/>
                  </td>
					<td align="center">
        				&nbsp;&nbsp;<a class="langue" href="http://www.guygagnon.com/accueil_en.htm">&nbsp;FRANCAIS&nbsp;</a>
                    </td>
				</tr>
			</tbody>
		</table>
	</div>
 
	<div id=tab>
    </div>
 
	<script language="javascript">
        photo = new Image();
        photo.src = 'photos/intro3.jpg' ;
        var size;
        var LargeurImg = photo.width ;
        var LargeurSreen = document.getElementById('tab').offsetWidth;
        if (LargeurImg > LargeurSreen){size = LargeurSreen;}
        else {size = LargeurImg;}
        document.write("  <img src=\"photos/intro3.jpg\" style=\"width:"+size+"px;\" alt=\"{ALT_IMG}\"/>");
    </script>
 
</body>
</html>

et l'adresse de mon ébauche de site, pour que vous constatiez de vous même:

--> Clique Moi <--

Voilà je pense ne rien oublier,
si on pouvais m'apporter de l'aide ca serait super sympa...

Merci d'avance...

Salut,

Un des soucis que tu rencontres et lié au fait que le chargement de ton image est asynchrone (nouvelle connexion "parallèle" vers le server). Donc ton code continue à s'exécuter alors que l'image n'a pas encore été récupérée.
Code:

1 2 3 4 5 6 7 8 9 photo = new Image(); photo.src = 'photos/intro3.jpg' ; //CHARGEMENT ASYNCHRONE var size; var LargeurImg = photo.width ; //cette largeur n'est pas encore connue... var LargeurSreen = document.getElementById('tab').offsetWidth; if (LargeurImg > LargeurSreen){size = LargeurSreen;} else {size = LargeurImg;} document.write(" <img src=\"photos/intro3.jpg\" style=\"width:"+size+"px;\" alt=\"{ALT_IMG}\"/>");
L'élément img dispose à cet effet d'un événement onload qui peut te servir.

ERE

re Bonjour,

La requête "onload" je dois la mettre ou?