Forcer la taille de x image contenu dans une class

Version imprimable

11/06/2009, 09h57
mael94420

Forcer la taille de x image contenu dans une class
Bonjour,

Je voudrais faire une petit script qui me permette de retailler des images à la volée.

Je m'explique.

A mon plus grand déséspoire, la maquette à été réalisé en tableau. J'ai donc mis une class "contenu" au td dans lequelle se trouve mes x images.

Ensuite, j'ai fait un début de script jQuery qui ressemble à ca :
Code:

1 2 3 4 $(document).ready(function(){ $(".contenu > img").css("width", "200px"); });
Il y'a deux problèmes
Le premier c'est que heritage ne fonctionne pas. ce script ne retaille pas les image contenu dans "contenu". Il fonctionne bien quand je fait

Code:

$("img").css("width", "200px");

mais ca retaille toutes les images de la page. Normal.

Le deuxieme problème est que je souhaite retailler que les images qui ont une width superieur à 600px
et la, je bloque.

Petite précision, ce sont des images qui sont insérées par des utilisateurs via un wysiwyg. Je n'ai donc pas la main dessus.

Si vous avez une idée de comment résoudre ce problème ca m'aiderais grandement.

Merci d'avance

Maël

Bonsoir

Un exemple avec la taille limite fixée à 120 dans le paramètre « valeur » :

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <link rel="stylesheet" type="text/css" href="../styles/principal.css" media="screen" />
    <style type="text/css">
        div#affiche {
            margin:12px;
            border:1px solid #999999;
        }
    </style>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".contenu > img").each(function(i,item){
 
                //debug
                $("#affiche").append("item["+ i + "] = " + item + "<br/>");
 
                var valeur = 120;
                var width = parseInt($(item).css("width"));
                var height = parseInt($(item).css("height"));
                var ratio = width/height;
 
                if (width > valeur) {
                    width = valeur;
                    height = parseInt(width/ratio);
 
                    $(item).css("width", width);
                    $(item).css("height", height);
                }
 
                if (height > valeur) {
                    height = valeur;
                    width = parseInt(height*ratio);
 
                    $(item).css("height", height);
                    $(item).css("width", width);
                }
            });
        });
    </script>
</head>
<body>
    <div id="conteneur">
        <table width="500" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td>&nbsp;</td>
            <td class="contenu"><img src="../images/danielhagnoul.jpg" width="120" height="117" /></td>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td class="contenu"><img src="../images/imageTest.png" width="270" height="200" /></td>
          </tr>
          <tr>
            <td class="contenu"><img src="../images/jQuery-alpha-trans.png" width="132" height="132" /></td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
        </table>
        <div id="affiche"></div>
    </div>
</body>
</html>

12/06/2009, 06h55
mael94420

Super pour cette réponse, je ne l'ai pas tester mais il me suffisait finalement de connaitre la fonction each qui s'était perdu dans un coin de ma tete.

Merci beaucoup

Maël