Changing The Styles Of Multiple Images In One Go.

[IAmBill]

Hi, I have a page with a series of images with the same style. The size of the images is dynamically applied to the images with PHP and I'd like the user to be able to scale these at their choosing with a couple of buttons. The issue, however, is that for some reason the simple javascript that I thought would work doesn't... I set all of the images to have the same Id and assumed that by using getElementById and adjusting the style it would affect all of the images... unfortunately, it only affects the first image. Anyone have any idea of what's going on?

function zoom(){var aspectRatio;aspectRatio = parseFloat(document.getElementById("myImage").style.height) / parseFloat(document.getElementById("myImage").style.width);document.getElementById("myImage").style.height = (parseFloat(document.getElementById("myImage").style.height) + 2) + "%";document.getElementById("myImage").style.width = (parseFloat(document.getElementById("myImage").style.width) + (2 * aspectRatio)) + "%";}

... and if I had these two images below, only the first would be adjusted... I'd like all to be adjusted...

<img src='images/card_green.gif' style='position:absolute; left:0%; width:12.25%; top:0%; height:13.78%;border:none;padding:none;' id='myImage' /><img src='images/card_green.gif' style='position:absolute; left:0%; width:12.25%; top:0%; height:13.78%;border:none;padding:none;' id='myImage' />

[chibineku]

ids are unique - only one element on your page can be given the id 'main', for example. What you can do is use document.getElementsByTagName and then loop through them, or use some other DOM method to get all the images.

[IAmBill]

ids are unique - only one element on your page can be given the id 'main', for example. What you can do is use document.getElementsByTagName and then loop through them, or use some other DOM method to get all the images.

Thanks... I figured as much, I just needed to be certain.EDIT: Ah, but it seems each element maintains its ID regardless of whether it can be referenced by the DOM. I believe this means I could use it for something like this:

function zoom(){   var aspectRatio = parseFloat(document.getElementById("myImage").style.height) / parseFloat(document.getElementById("myImage").style.width);   var imageList = document.getElementsByTagName("img");   for (var x in imageList)   {	  if (imageList[x].id == "myImage")	  {		 imageList[x].style.height = (parseFloat(imageList[x].style.height) + 2) + "%";		 imageList[x].style.width = (parseFloat(imageList[x].style.width) + (2 * aspectRatio)) + "%";	  }   }}

Seem alright?

[Ingolme]

Thanks... I figured as much, I just needed to be certain.EDIT: Ah, but it seems each element maintains its ID regardless of whether it can be referenced by the DOM. I believe this means I could use it for something like this:

function zoom(){   var aspectRatio = parseFloat(document.getElementById("myImage").style.height) / parseFloat(document.getElementById("myImage").style.width);   var imageList = document.getElementsByTagName("img");   for (var x in imageList)   {	  if (imageList[x].id == "myImage")	  {		 imageList[x].style.height = (parseFloat(imageList[x].style.height) + 2) + "%";		 imageList[x].style.width = (parseFloat(imageList[x].style.width) + (2 * aspectRatio)) + "%";	  }   }}

Seem alright?

No, your HTML will not be valid if more than one element is found with the same id.Try giving them a common class attribute instead.