Jump to content

Changing The Styles Of Multiple Images In One Go.


IAmBill
 Share

Recommended Posts

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' />

Edited by IAmBill
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Edited by IAmBill
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...