使用jquery更改多个图像大小

时间:2012-05-25 13:27:37

标签: javascript jquery css

我有以下html:

    <div id="ProductImages" align="center">
     <div id="divProductPicZ72" class="c1"></div>

      <div id="divProductPic72">
        <a href="javascript:void(0);" onclick=
        "popupimg('images/Product/large/72.jpg');"><img border="0" id="ProductPic72" name=
        "ProductPic72" class="c2" onclick="popupimg('images/Product/large/72.jpg')" title=
        "Click here to view larger image" src="images/product/medium/72_1_.png" alt=
        "SK100DS" /></a>
      </div>

    <img border="0" class="c2" onclick="setcolorpicidx_72(1);" alt="Show Picture 1"
          src="images/PRODUCT/icon/72_1_.png" /><img border="0" class="c2" onclick=
          "setcolorpicidx_72(2);" alt="Show Picture 2" src=
          "images/PRODUCT/icon/72_2_.png" />

    <img border="0" class="c2" onclick="setcolorpicidx_72(3);" alt="Show Picture 3" src=
          "images/PRODUCT/icon/72_3_.png" />

    <img border="0" class="c2" onclick="setcolorpicidx_72(4);" alt="Show Picture 4" src=
          "images/PRODUCT/icon/72_4_.png" />

    <img border="0" class="c2" onclick="setcolorpicidx_72(5);" alt="Show Picture 5" src=
          "images/PRODUCT/icon/72_5_.png" />

    <img border="0" class="c2" onclick="setcolorpicidx_72(6);" alt="Show Picture 6" src=
          "images/PRODUCT/icon/72_6_.png" />

    <img border="0" class="c2" onclick="setcolorpicidx_72(7);" alt="Show Picture 7" src=
          "images/PRODUCT/icon/72_7_.png" />
    </div>
</div>

标签后面的div <div id="divProductPic72">是主要图片,当您点击它时,我的代码会在新窗口中弹出更大的代码。

我想注入一些jquery来缩小所有图像,因为它们是缩略图。他们是在上面的div之后。

id喜欢让它们成为100x100的缩略图。

我试过这个:

$("div#ProductImages img").css("width", "100px");

不确定这是否正确?

2 个答案:

答案 0 :(得分:3)

你需要做两个维度:

$("div#ProductImages img").css("width", "100px");
$("div#ProductImages img").css("height", "100px");

答案 1 :(得分:1)

为了只选择直接儿童而不是所有祖先,请使用以下代码段

 $("#ProductImages>img")

 $("#ProductImages").children("img")