Création de Fichier.js

**Mickey_90** · 20/01/2010, 23h12

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

**emmanuel.remy** · 21/01/2010, 02h33

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Mickey_90** · 22/01/2010, 18h35

re Bonjour,

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

Création de Fichier.js

JavaScript

Discussions similaires

Partager

Partager