Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.04.2016, 12:08
Новичок на форуме
Отправить личное сообщение для _alta_ Посмотреть профиль Найти все сообщения от _alta_
 
Регистрация: 18.04.2016
Сообщений: 2

Увеличение изображения по клику
Всех приветствую. Нарыл в инете 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

_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
Ответить с цитированием
  #3 (permalink)  
Старый 19.04.2016, 14:59
Новичок на форуме
Отправить личное сообщение для _alta_ Посмотреть профиль Найти все сообщения от _alta_
 
Регистрация: 18.04.2016
Сообщений: 2

Сообщение от рони Посмотреть сообщение
_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
Благодарю. Очень выручили. +сик влепил.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смена фонового изображения по кругу, по клику на одну кнопку Manoftheyear Элементы интерфейса 7 21.03.2016 06:45
Увеличение изображения Дмитрий-Шмитрий Элементы интерфейса 0 31.01.2016 13:29
Увеличение изображения hedindoom Элементы интерфейса 6 01.11.2014 22:04
Простейшее увеличение изображения pr1est Events/DOM/Window 5 15.04.2013 23:59
Увеличение изображения при наведении Альви Элементы интерфейса 7 09.09.2011 21:10