JavaScript可以设置高度,宽度等属性吗? [关闭]

I have a image that is stored in my files.

I want to view this image in 3 different sizes. So I use <img src> tag and define different height & width 3 times.

It was working perfectly fine when I was just echoing it. Now I want to view this in a slider, and I have add JavaScript code in it.

Its working fine for 'Thumb image' because it has <img src> tag with it, but small image and large image doesn't have <img src> tag and I am unable to understand how to resize image in both 'smallimage:' &'largeimage:'.

I don't know much about JavaScript. I just copied JavaScript code from somewhere else.

<link rel="stylesheet" href="css/jquery.jqzoom.css" type="text/css">
<script type="text/javascript">

    $(document).ready(function() {
        $('.jqzoom').jqzoom({
            zoomType: 'innerzoom',
            preloadImages: false,
            alwaysOn:false
        });
    });
</script>


<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
    <td align="right" valign="top" ><div class="clearfix" style="margin-left:-30px;">
        <a href="images/imgProd2/bracelets_Diamond.png" class="jqzoom" rel='gal1'  title="triumph" >         
            <img src='<?php echo $single_image_query_fetch['images']; ?>' height='261' width='325'  
                title='triumph'  style='border: 4px solid #666;'>            
        </a>
        </div>
        <br/>

      <!-------------------------------- Images Part is strating from here ------------------------->

        <div class="clearfix" style="margin-left:-30px; margin-top:-10px;" >
            <ul id="thumblist" class="clearfix" >

                $image_query = "select * from product_images where product_id=$id";
                $image_query_run = mysql_query($image_query);
                while( $image_query_fetch = mysql_fetch_array($image_query_run)) {

                    //Thumb                 
                    $thumb_image =
                        "<img src=http://localhost/cms/". 
                                $image_query_fetch['images'] ." height='80' width='100' alt=\"\" />";


                    //large
                    $big_image = "<img src=http://localhost/cms/". 
                            $image_query_fetch['images'] ." height='1024' width='1280' alt=\""/>";
                            $image_fetch[1]= $big_image;

                    //small                                 
                    $small_image = "<img src=http://localhost/cms/". 
                                    $image_query_fetch['images'] ." height='261' width='325' alt=\"\" />";
                <li>
                <a  href='javascript:void(0);' rel="{gallery: 'gal1', 
                                                        smallimage: 'images/imgProd2/Bracelet_Silver.png',
                                                        largeimage: 'images/imgProd2/bracelets_Diamond.png'}">
                        <img src='<?php echo $image_fetch[0]; ?>' height='80' width='100' >
                    </a>
            </li>
}

In <li> i want to define sizes for smallimage and largeimage. Kindly tell me how to do it.

Yes you can.

For height :

$(".smallimage").height(100);

For width :

$(".smallimage").width(150);

Change 100 and 150 to your value or a dynamic one...

Cheers

$("smallimage").css('height', 'num_here');
$("smallimage").css('width', 'num_here');

$("largeimage").css('height', 'num_here');
$("largeimage").css('width', 'num_here');

I don't know whether largeimage and smallimage or classes or id's so you'll have to specify that yourself assuming you know how to do that... because height and width property are shown in the jquery documentation. Not only that but this question must have been asked 100+ times on here.