w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
How to link the options available in a drop down menu to change the size of an image

If you have an image like so:

<img src="suchnsuch.jpg" id="my-image" />

In the drop down element set the onChange attribute as so

<select onChange="alter_image( this.value );">
    <option value="default">Default</option>
    <option value="500">500px</option>
</select>

then define a Javascript function:

function alter_image( width ) {
    image = document.getElementById('my-image');
    image.style.width = width + "px";
}

When the drop down is changed it should call the alter_image function with its value and in turn alter the width property of the image.

If your image's width is defined as an attribute ( that is like so width="300px" ) then the width code should read

image.width = width + "px";

instead





© Copyright 2018 w3hello.com Publishing Limited. All rights reserved.