• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • SAS
  • Ruby
  • About
You are here: Home / HTML / Clicking on an Image to Enlarge it in HTML

Clicking on an Image to Enlarge it in HTML

July 7, 2022 Leave a Comment

In HTML, we can click on an image to enlarge it with the help of the JavaScript getElementById() method and by targeting the width and height properties of the image.

The best way to show this is with an example.


Let’s say we have the following HTML:

<div id="div1">
  <img id="image1" width="150px" height="150px" src="https://theprogrammingexpert.com/wp-content/uploads/example-img1.png">
</div>

If we want to enlarge the image to be double its width and height, we can use the getElementById() method to target the image and then change its width and height properties in the following JavaScript code.

var theImage = document.getElementById("image1");
theImage.width = theImage.width * 2;
theImage.height = theImage.height * 2;

When clicking on the image, the image will now double in size.

Note this can also be done in jQuery using the jQuery css() method.

Let’s see this example in action.

Clicking on an Image to Enlarge It Using JavaScript

In this example, we will have an image that we will want to enlarge. The image will have a width of 150px and a height of 150px.

Here is the simple HTML code for this example:

<div id="div1">
  <img id="image1" width="150px" height="150px" onclick="enlargeImg()" src="https://theprogrammingexpert.com/wp-content/uploads/example-img1.png">
</div>

We will use an onclick event to run the function “enlargeImg()” when the user clicks the image.

We can then use the getElementById() method to target the width and height properties of the image and use it to enlarge our image.

We can take our code from the example in the above section and put it into our function called enlargeImg().

Below is the JavaScript code which will allow the user to be able to double the size of the image:

function enlargeImg(){
  var theImage = document.getElementById("image1");
  theImage.width = theImage.width * 2;
  theImage.height = theImage.height * 2;
};

The final code and output for this example on clicking on an image to enlarge it in HTML is below:

Code Output:

Full Code:

<div id="div1">
  <img id="image1" width="150px" height="150px" onclick="enlargeImg()" src="https://theprogrammingexpert.com/wp-content/uploads/example-img1.png">
</div>

<script>

function enlargeImg(){
  var theImage = document.getElementById("image1");
  theImage.width = theImage.width * 2;
  theImage.height = theImage.height * 2;
};

</script>

Hopefully this article has been useful for you to understand how to in HTML, click on an image to enlarge it.

Other Articles You'll Also Like:

  • 1.  Adding CSS Important Property Using JavaScript
  • 2.  Using JavaScript to Stop a Timer
  • 3.  Remove Vowels From String In JavaScript
  • 4.  How to Give a Textarea a Max Length
  • 5.  Using JavaScript to Calculate Average of Array of Numbers
  • 6.  Using JavaScript to Declare Multiple Variables
  • 7.  Using JavaScript to Get Today’s Date
  • 8.  Find Common Elements in Two Arrays Using JavaScript
  • 9.  How to Clear a Textarea Field In JavaScript
  • 10.  Adding an Underline with JavaScript

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About The Programming Expert

the programming expert main image

Welcome to The Programming Expert. We are a group of US-based programming professionals who have helped companies build, maintain, and improve everything from simple websites to large-scale projects.

We built The Programming Expert to help you solve your programming problems with useful coding methods and functions in various programming languages.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

Copyright © 2023 · The Programming Expert · About · Privacy Policy