-1

I'm using HTML5 and JavaScript, how do I let the user change the image width in prompt upon entering the website?

altai
  • 41
  • 1
  • 1
  • 6
  • Welcome to StackOverflow! Please provide a [Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve) of your attempt e.g. as a [Stack Snippet](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/), so we can try to solve your problem and explain why your own attempt failed - that way you can learn something useful for your future development, as well as getting an answer to this single problem. – andreas Sep 07 '17 at 22:29

2 Answers2

0

I had this somewhere in my folders from a long time ago. I added some comments to understand what is doing what and I changed the image.

But basically, it's a simple way to do it (without jQuery).

<!-- This is where you image can go -->
<p>
    <img id="myImage" 
  src="https://static.boredpanda.com/blog/wp-content/uploads/2016/08/cute-kittens-69-57b32c431e8a7__605.jpg" alt="" 
  width="303"
  height="237" />
</p>

<!-- The buttons to control -->
<button onclick ="increaseSize()">Bigger</button>
<button onclick ="decreaseSize()">Smaller</button>

<!-- The script that scales the image -->
<script>

// Our image.
var image = document.getElementById("myImage");

// The value we will add/substract to the image's dimension.
var scale = 50; 

function increaseSize() {
    image.width += scale;
    image.height += scale; 
};

function decreaseSize() {
    image.width -= scale;
    image.height -= scale; 
};

</script>

By the way, you shouldn't ask for code on this site. You have to work on your side and come up with what you have accomplished and where you are stuck at. :)

Bird
  • 572
  • 5
  • 15
-1

Possible duplicate of Resize image with javascript canvas (smoothly).

You may have to use something like HTML5 canvas to obtain this end. With canvas you can manipulate the image as an element quite easily.

dimithriavindra
  • 31
  • 2
  • I have a project in my computer science class and we haven't entered the chapter with canvas yet, but I know we have to use setAttribute I think. – altai Sep 07 '17 at 22:26
  • @user3847943, maybe your suggestion is a little too complicated for the situation. You can resize an image simply by changing its dimensions with buttons. – Bird Sep 07 '17 at 22:40
  • basically, all i want is a prompt to open, the user types in a number and that number is the width of the image – altai Sep 07 '17 at 22:45