Enlarge images in my html page using JavaScript

Question

I try to enlarge images in my html page by using JavaScript. The image in the html- source code always has the height/width 100 Pixel. By clicking on the image, the image should be displayed in original size. By clicking the image again, the image should displayed in height/width 100 Pixel.

Example image in the html source code:

<img src="image.jpg" onClick="swap(this)" onmouseover="" style="cursor: pointer;" height="100" width="100">

My JavaScript source code:

function swap(img)
 {
  if (img.width==="100")
   {
    img.width="auto";
    img.height="100%";
   }
  else
   {
    img.width="100";
    img.height="100";
   }
}

My Problem is the image size dose not change. What am I doing wrong? Does anyone have maybe a better idea?

===(strict comparison) will not make it true as img.width will be of type Number — Rayon
– Rayon, Commented May 2, 2016 at 8:05
Haven't done it in a while but i think you should use img.clientWidth, this returns the width as it is rendered in the browser. — namlik
– namlik, Commented May 2, 2016 at 8:07
Why not using JS only for toggling class and leave the rest of the job to CSS? — markoffden
– markoffden, Commented May 2, 2016 at 8:12
Are you looking for a pure-javascript solution or you are using any javascript framework/library? — Hitmands
– Hitmands, Commented May 2, 2016 at 8:20

PinkTurtle · Accepted Answer · 2016-05-02 09:28:24Z

2

Provided your images don't already have a CSS class, you can swap a full-size class easily.

function swap(img) {
  if (img.className !== "full-size") img.className = "full-size";
  else img.className = "";
}

.full-size {
  height: 100%;
  width: 100%;
}

<img src="https://multimedia.journalism.berkeley.edu/wp-content/uploads/2014/09/css101-main.jpg" onClick="swap(this)" onmouseover="" style="cursor: pointer;" height="100" width="100">

You'd be better off using jQuery to handle multiple classes on a single HTML element though.

edited May 2, 2016 at 9:28

answered May 2, 2016 at 8:42

PinkTurtle

7,0513 gold badges31 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Olli Over a year ago

Thanks to all of you for helping.

Shovalt · Accepted Answer · 2016-05-02 08:10:55Z

1

Using image.width is not the best practice, and it has been so for a very long time.

What you should be doing is using the "style" property, both in your HTML and in the JavaScript. Aside from that, you always need to define units, e.g. pixels (px), percent (%).

So your image should look something like this (I ignored the events):

<img style="cursor: pointer; width: 100%, height: 100%;">

I didn't understand if you wanted 100px or 100%, so change as needed.

Your JS should look something like this:

function swap(img)
 {
  if (img.style.width==="100%")
   {
    img.style.width="auto";
    img.style.height="100%";
   }
  else
   {
    img.style.width="100%";
    img.style.height="100%";
   }
}

answered May 2, 2016 at 8:10

Shovalt

6,8362 gold badges39 silver badges53 bronze badges

Comments

Zubair sadiq · Accepted Answer · 2016-05-02 08:14:45Z

1

Fiddle Link

<img src="https://c7.staticflickr.com/3/2538/3742771246_2648fa4e6e_b.jpg" onClick="swap(this)" onmouseover="" style="cursor: pointer;" height="100" width="100">
 <script>
   function swap(img)
    {
 debugger;
 if (img.width===100)
{
 img.style.height = 'auto';
 img.style.width = 'auto';
 }
else
{
   img.style.height = '100px';
img.style.width = '100px';
}
}</script>

answered May 2, 2016 at 8:14

Zubair sadiq

5006 silver badges23 bronze badges

Comments

Rayon · Accepted Answer · 2016-05-02 09:32:54Z

Use style property of the element to apply style. Use .width property just for conditions.

function swap(img) {
  if (img.width === 100) {
    //Remove the quotes around `100` as you are using strict comparison
    img.width = "auto";
    img.style.width = "auto";
    img.style.height = "100%";
  } else {
    img.width = "100";
    img.style.width = "";
    img.style.height = "";
  }
}

<img src="http://www.mariodemiranda.com/uploads/showcase/4_pic_indian-art-4.jpg" onClick="swap(this)" onmouseover="" style="cursor: pointer;" height="100" width="100">

Edit: Using css class, .contains,.add/.remove will be handy.

function swap(img) {
  img.classList.contains('fs') ? img.classList.remove('fs') : img.classList.add('fs')
}

.fs {
  width: auto;
  height: 100%;
}

<img src="http://www.mariodemiranda.com/uploads/showcase/4_pic_indian-art-4.jpg" onClick="swap(this)" onmouseover="" style="cursor: pointer;" height="100" width="100">

Community · Accepted Answer · 2017-05-23 12:22:46Z

Your actual code:

In your code the problem was, as stated in comments, the strict comparaison where you were comparing a string with a number, because img.width is a number and "100" is a string.

So to fix it you just need to change the comparaison, either byu using == comparaison or just 100 instead of "100":

function swap(img) {
  if (img.width === 100) {
    img.width = "auto";
    img.height = "100%";
  } else {
    img.width = "100";
    img.height = "100";
  }
}

<img src="image.jpg" onClick="swap(this)" onmouseover="" style="cursor: pointer;" height="100" width="100">

Alternatives:

In fact in Javascript to access an element attribute (width or height) you better use element.getAttribute() method, this is how should be your code:

function swap(img) {
  if (img.getAttribute("width") === "100") {
    img.width = "auto";
    img.height = "100%";
  } else {
    img.width = "100";
    img.height = "100";
  }
}

<img src="image.jpg" onclick="swap(this)" onmouseover="" style="cursor: pointer;" height="100" width="100">

Otherwise, just use height and width as properties in the style of your element, then access it using element.style.height.

Further reading:

For further reading you can see the diffirence between height/width element attributes and styles properties, here:

Should I specify height and width attributes for my IMGs in HTML?

thepio · Accepted Answer · 2016-05-02 09:43:38Z

1

I would prefer using css to do this and changing the element class accordingly when click occurs.

The script:

function swap(img) {
  if (img.classList.contains('fullsize')) {
    img.classList.remove('fullsize');
  } else {
    img.classList.add('fullsize');
  }
}

The element:

<img src="image.jpg" onclick="swap(this)" class="resize-image" style="cursor: pointer;">

CSS:

.resize-image {
  width: 100px;
  height: 100px;
}

.resize-image.fullsize {
  width: auto;
  height: 100%;
}

// Or if using SASS etc

.resize-image {
  width: 100px;
  height: 100px;

  &.fullsize {
    width: auto;
    height: 100%;
  }
}

edited May 2, 2016 at 9:43

answered May 2, 2016 at 8:14

thepio

6,2635 gold badges38 silver badges55 bronze badges

6 Comments

markoffden Over a year ago

this the first rational approach among other answers)

Rayon Over a year ago

Controller..View..Angular.. Why ?

thepio Over a year ago

@Rayon I'm sorry, what?

Rayon Over a year ago

@thepio, Angular is neither tagged in the question nor mentioned in the question.. Why does this answer based on angular ?

thepio Over a year ago

Oh god, you are correct. Somehow I ended up here even though I was going through angularjs related questions only. In this case your answer is the correct one, even though it would be still better to manipulate a css class in my opinion.

|

Ali Jamal · Accepted Answer · 2016-05-02 08:29:38Z

0

function swap(img)
 {
 debugger
  if (img.style.width==="100px")
   {
    img.style.width="auto";
    img.style.height="100%";
   }
  else
   {
    img.style.width="100px";
    img.style.height="100px";
   }
}

answered May 2, 2016 at 8:29

Ali Jamal

84011 silver badges19 bronze badges

Collectives™ on Stack Overflow

Enlarge images in my html page using JavaScript

7 Answers 7

1 Comment

Comments

Comments

Comments

Comments

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

Comments

Comments

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related