How to Change the Image Width With Javascript
JavaScript is an object-oriented scripting language used to provide enhanced user interfaces and dynamic websites. The JavaScript programming language is primarily used to write functions that are embedded in HTML pages. The scripting language can also be used to change the height and width values of an image on a web page. An initial width value may be set. A second width value may be used to change the size of the image when a button is clicked and the "changeSize" function is called.
Other People Are Reading
Instructions
-
-
1
Create a web page. Notepad is a free HTML editor that may be used to create web pages in HTML. Graphic-based editors such as Adobe Dreamweaver or Adobe Flash may also be used.
-
2
Copy and paste the following code into your HTML file:
<html>
<head>
<script type="text/javascript">
function changeSize()
{
document.getElementById("imagename").height="250";
document.getElementById("imagename").width="250";
}
</script>
</head>
<body><img id="compman" src="imagename.gif" width="300" height="98" />
<br /><br />
<input type="button" onclick="changeSize()" value="Change size of image" /></body>
</html> -
-
3
Replace the "document.getElementById("imagename").width=" width value with your desired width. This is the width that the image will initially appear.
-
4
Replace the "<img id="compman" src="imagename.gif" width=" width value with your desired width. This is the width that the image will appear when the user clicks the "Change size of image" button on your page, prompting the script to run.
-
5
Save the file by clicking "File" and then "Save As" from the top menu of your editing program. Enter a name for your file and click "Save."
-
1
References
- Photo Credit code image by charles taylor from Fotolia.com
