1

I have a 3rd party script which is setting a width and height on images, but for the life of me I can't figure out how it's doing it. It's probably from the database or a class but there are a lot of them.

The HTML looks something like this:

<img src="..." width="30px" height="30px">

Using jQuery, how can I change the height and width values?

I'm guessing it's something like:

$("..[$width="]").replace(

Here is the HTML of the element:

<div id="prodThumbnails">
<table style="width: 641px;">
<tbody>
<tr>
<td align="right" style="vertical-align: middle;">  
</td>   
<td nowrap="nowrap" class="productPhotoThumbnailSection">
<a onclick="javascript:drawMainImage('0', '')" href="javascript:swapImage()">
<img height="30" width="30" border="0" title="" alt="" 
src="images/products/85.png"/></a>
     
<a onclick="javascript:drawMainImage('1', '')" href="javascript:swapImage()"><img height="30" width="30" border="0" title="" alt="" 
src="images/products/90.jpg"/></a>
     
<a onclick="javascript:drawMainImage('2', '')" href="javascript:swapImage()">
<img height="30" width="30" border="0" title="" alt="" src="images/products/92.jpg"/></a>
</td>
<td align="left" style="vertical-align: middle;">
</td>
</tr>
</tbody>
</table>
</div>

I tried doing this:

$(function() {
   $("td.productPhotoThumbnailSection img").attr("width","64px");
   $("td.productPhotoThumbnailSection img").attr("height","64px");

  });

but it keeps setting the image width and heights to 0.

Improve this question

7 Answers 7

Reset to default
3

Thus, you want to set a new value for the width and height attributes of the element? You can do that with the attr() function.

Basic example:

element.attr('width', '100');
element.attr('height', '100');

or chained:

element.attr('width', '100').attr('height', '100');

or all at once:

element.attr({
    width: '100',
    height: '100'
});

Where in element can be for example $('img') to get all <img> elements, or $('#imgId') to get the specific <img id="imgId"> element. See the jQuery Selectors section to learn more about selecting elements.

Edit: as response on your edit, after all you don't need the 'px' suffix in the width and height attributes, they are implicitly already in pixels. You only need the 'px' when you want to change the associated CSS properties such as element.css('width', '100px');. I've updated my answer accordingly.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

thank you i updated my post on the top what do you think it can be?
1

assuming <img id="blah" ...> above:

$('#blah').attr({
  width: '30px',
  height: '30px'
});
Improve this answer

Comments

1

Have you tried using attr( key, value )?

You could do: $('img').attr('height', '50px'); $('img').attr('width', '50px');

Improve this answer

1 Comment

I tried this. For some reason, the value in the code is correct, but when that element is examined in Firebug, it retains the original value. So, in effect, nothing changed. I have an ID called #right. I want to change its width from 68% to 97% like this $("#right").attr("width", "97%");. Code says 97%, Firebug 68%. I don't get it.
0

Think #attr(key, value) should work here. More at the docs

Improve this answer

Comments

0

jQuery operates on the elements in the DOM, not the elements' attributes.

You need a selector that selects your img element and then edits your attribute.

$("img").attr('width', '35px')
$("img").attr('height', '35px')

You probably need a more specific selector than "img" though. Do your images have a class or an id?

Improve this answer

1 Comment

thank you i updated my post on the top what do you think it can be?
0

Do this:

$(function() {
  $("td.productPhotoThumbnailSection img").attr({
    width: 64,
    height: 64
  });
});

Note that it is a simple number ("64") with no unit of measurement ("64px"). The latter is a valid CSS value but not a valid HTML value (for this attribute). The only valid unit of measurement in this context is a percentage.

See the IMG element from the HTML specification where height and width are of type %Length and %Length is defined as:

nn for pixels or nn% for percentage length

ie "64px" is not valid.

Improve this answer

Comments

0

Maybe the problem is with the selector. Try 

$('td.productPhotoThumbnailSection').children().children('img').attr({ width: '100',  height: '100'  })

I've tried that and that worked!!!

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.