onclick image size change JS

@krnbrashaFeb 23.2015

I can’t get this to work, i think i’m going in the right direction… but can’t get this to work can anyone help me out?? Basically, what I need to do is get this picture to resize based on what the user clicks. Three different sizes, 50%, 100% and 150% of current size. Am I doing this correctly? Would anyone be able to help me out?

[code=html] <!doctype html> <html lang=”en”> <head> <title>Change Image Size</title> <style> body {width: 80%; margin: auto;} header {border-bottom: 1px solid #aaa;} header h1 {font-size: 1.5em;} nav {float: left; width: 15%; margin: 2% 2%; } main {float: left; width: 60%; border: 0px black solid; margin: 2% 2%; height: 500px; padding: 1em;} main img {border: 1px black solid;} nav span {display: inline-block; width:100px; height: 30px; border: 1px solid black; border-radius: 10px; text-align: center; margin-bottom: 1em; background-color: green; color: white;}

</style> <script> function init (){ document.getElementById(‘small’).onclick = function () {change(‘div1’,50,50)}; document.getElementById(‘medium’).onclick = function () {change(‘div1’,100,100)}; document.getElementById(‘large’).onclick = function () {change(‘div1’,150,150)};

}

function change(id, y, x){ var img = document.getElementById(‘div1’);

img.style.width = img.offsetWidth + y + “px”; img.style.height = img.offsetHeight + x + “px”;

document.getElementById(id).style.width = y; document.getElementById(id).style.height = x;

}

window.onload = init;

</script> </head> <body>

<header><h1>CTEC 4350 DHTML Exercise: Change Image Size</h1></header> <nav> <span id=”small”>50%</span> <span id=”medium”>100%</span> <span id=”large”>150%</span> </nav> <main> <p> This image is displayed at 150% of its orignal size. (The number of % changes based on the size option picked by the user.)</p> <p> To complete this exercise, you will need to research on how to get the original size of an image.</p> <div id=”div1″> <img src=”http://omega.uta.edu/~cyjang/ctec4350/labex/dhtml/alice28a.gif” height=”400px” width=”400px”> </div> </main> </body> </html>

[/code]

to post a comment

JavaScript

2 Comments(s) _↴

@Sup3rkirbyFeb 23.2015 — #For the sake of learning, I'll explain a few things. You [I]kind of[/I] had the right idea, or so I'd like to think, but it wasn't really being executed properly at all. Ultimately, you will probably want one function that takes arguments/parameters, telling it the element to resize and the scale (which could be reduced down to 2 arguments/parameters).

As far as what is actually in your function, not much was really going on. It would essentially set the width and height of your div initially, by adding a number to its [B][I]offsetWidth[/I][/B] and [B][I]offsetHeight[/I][/B] ([I]which change once the width and height are changed[/I]), but then you later set the width and height of the same div, setting them to the arguments passed in. So in short, clicking the [I]50% button[/I] would first set your [B]div1[/B] to a width and height of its original dimensions plus 50 pixels. But then the next two lines set the width and height of this div to 50 pixels each.

Instead, you want the width and height to scale, so you'll want to use some sort of a formula, such as: [B]initialDimensions * scale / 100[/B]

Where [B]initialDimensions[/B] would be the original width/height, [B]scale[/B] would be the percentage scale of the button clicked (50, 100, 150) and the last part being a static number of 100 (to convert this into a percentage scale).

One other important thing to note is that since you are applying all of this to the [B]<div>[/B] element containing the image (and not the [B]<img>[/B] itself), the [B]<div>[/B] element is a [B][I]block[/I][/B], meaning its width will be fluid. Instead you want the containing element to be an [B][I]inline-block[/I][/B], allowing its width to scale to its contents (inline does this as well, but doesn't allow resizing). Having said that, the [B]<img>[/B] can simply use a width and height of 100%, as it will scale to its parent container appropriately. And furthermore, by only changing one dimension (such as the width), the [B]<img>[/B] element will scale proportionally without the need for the width and height to be set.

In the end:

[code=html]
 <!doctype html>
 <html lang="en">
 <head>
 <title>Change Image Size</title>
 <style>
 body {width: 80%; margin: auto;}
 header {border-bottom: 1px solid #aaa;}
 header h1 {font-size: 1.5em;}
 nav {float: left; width: 15%; margin: 2% 2%; }
 main {float: left; width: 60%; border: 0px black solid; margin: 2% 2%; height: 500px; padding: 1em;}
 main div { display: inline-block; }
 main img {width: 100%; height: 100%; border: 1px black solid; }
 nav span {display: inline-block; width:100px; height: 30px; border: 1px solid black; border-radius: 10px; text-align: center; margin-bottom: 1em; background-color: green; color: white;}
 </style>
 </head>
 <body>
 
 <header><h1>CTEC 4350 DHTML Exercise:  Change Image Size</h1></header>
 
 <nav>
 <span id="small">50%</span> 
 <span id="medium">100%</span>
 <span id="large">150%</span>
 </nav>
 
 <main>
 <p>This image is displayed at 150% of its orignal size. (The number of % changes based on the size option picked by the user.)</p>
 <p>To complete this exercise, you will need to research on how to get the original size of an image.</p>
 <div id="div1">
 <img src="http://omega.uta.edu/~cyjang/ctec4350/labex/dhtml/alice28a.gif" />
 </div>
 </main>
 
  <script>
   var $init = 0;
   function _Scale($a, $b) {
   document.getElementById($a).style.width = ($init * ($b / 100)) + "px";
   }
 
   window.onload = function() {
   document.getElementById('small').onclick = function () { _Scale("div1", 50); };
   document.getElementById('medium').onclick = function () { _Scale("div1", 100); };
   document.getElementById('large').onclick = function () { _Scale("div1", 150); };
   $init = document.getElementById("div1").offsetWidth;
   };
 </script>
 
 </body>
 </html>
 [/code]

@krnbrashaauthorFeb 23.2015 — #Oh wow, thank you. Thank you for this! I have learned!!!! you've made my code make sense to me, I see now why it wasn't doing anything. Thanks again mucho.

Also in #JavaScript _↴

drag and drop to iframe How to store a variable in Javascript for different page accesses [RESOLVED] get total length of text fields in a form

Success!

Help @krnbrasha spread the word by sharing this article on Twitter...

Tweet This

onclick image size change JS

2 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

onclick image size change JS

2 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

2 Comments(s) _↴

Also in #JavaScript _↴