Форум

_alta_ · #1 (**permalink**) 18.04.2016, 12:08

Всех приветствую. Нарыл в инете js скрипт, который по клику увеличивает изображение. Но увеличивает он только длину изображения, не затрагивая ширину. 2 дня возился с доработкой скрипта, так ничего и не получилось. Подскажите, пожалуйста, как его модернизировать. Вот, собственно, и сам скрипт:

<script language = "JavaScript">
var bigsize = "300"; //Размер большой картинки
var smallsize = "150"; //Размер маленькой картинки
function changeSizeImage(im) {
  if(im.height == bigsize) im.height = smallsize;
  else im.height = bigsize;
}
</script>

html:

<table align="center">
  <tr>
    <td align="center">
      <img src="foto1.jpg" height="150" onclick="changeSizeImage(this)" />
      <br />
      <b>Фото 1</b>
    </td>
    <td align="center">
      <img src="foto2.jpg" height="150" onclick="changeSizeImage(this)" />
      <br />
      <b>Фото 2</b>
    </td>
  </tr>
</table>

рони · #2 (**permalink**) 18.04.2016, 15:29

_alta_,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .big{
      transform: scale(2);
    }

 </style>
 </head>

<body>

<table align="center">
  <tr>
    <td align="center">
      <img src="http://javascript.ru/forum/images/smilies/cray.gif" height="150" onclick="this.classList.toggle('big')" />
      <br />
      <b>Фото 1</b>
    </td>
    <td align="center">
      <img src="http://javascript.ru/forum/images/smilies/cray.gif" height="150" onclick="this.classList.toggle('big')" />
      <br />
      <b>Фото 2</b>
    </td>
  </tr>
</table>


</body>
</html>

https://webref.ru/css/transform

_alta_ · #3 (**permalink**) 19.04.2016, 14:59

Сообщение от рони

_alta_,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .big{
      transform: scale(2);
    }

 </style>
 </head>

<body>

<table align="center">
  <tr>
    <td align="center">
      <img src="http://javascript.ru/forum/images/smilies/cray.gif" height="150" onclick="this.classList.toggle('big')" />
      <br />
      <b>Фото 1</b>
    </td>
    <td align="center">
      <img src="http://javascript.ru/forum/images/smilies/cray.gif" height="150" onclick="this.classList.toggle('big')" />
      <br />
      <b>Фото 2</b>
    </td>
  </tr>
</table>


</body>
</html>

https://webref.ru/css/transform

Благодарю. Очень выручили. +сик влепил.

Форум

Справочник

Discord чат

Курсы javascript