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, May 02 '16 at 08: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, May 02 '16 at 08:07
Why not using JS only for toggling class and leave the rest of the job to CSS? — markoffden, May 02 '16 at 08:12
Are you looking for a pure-javascript solution or you are using any javascript framework/library? — Hitmands, May 02 '16 at 08:20

PinkTurtle · Accepted Answer · 2016-05-02T09:28:24.133

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 02 '16 at 09:28

answered May 02 '16 at 08:42

PinkTurtle

6,942
3
25
44

Thanks to all of you for helping. – Olli May 02 '16 at 09:51

score 1 · Answer 2 · answered May 02 '16 at 08:10

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%";
   }
}

score 1 · Answer 3 · edited May 23 '17 at 12:22

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?

Rayon · Answer 4 · 2016-05-02T09:32:54.343

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">

score 1 · Answer 5 · answered May 02 '16 at 08:14

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>

thepio · Answer 6 · 2016-05-02T09:43:38.370

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 02 '16 at 09:43

answered May 02 '16 at 08:14

thepio

6,193
5
35
54

1

this the first rational approach among other answers) – markoffden May 02 '16 at 08:16
`Controller`..`View`..`Angular`.. Why ? – Rayon May 02 '16 at 08:18
@Rayon I'm sorry, what? – thepio May 02 '16 at 08:20
@thepio, Angular is neither tagged in the question nor mentioned in the question.. Why does this answer based on `angular` ? – Rayon May 02 '16 at 08:22
1

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. – thepio May 02 '16 at 08:24
I added a non AngularJS way to do this. Once again I apologize for my mistake. – thepio May 02 '16 at 08:35

score 0 · Answer 7 · answered May 02 '16 at 08:29

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 02 '16 at 08:29

Ali Jamal

844
11
19

Enlarge images in my html page using JavaScript

7 Answers7