Jump to content
IAmBill

Changing The Styles Of Multiple Images In One Go.

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

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...