<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

В начале курса у нас будет только идея, а в конце готовый продукт, который можно использовать в практических целях.

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Увеличение только одной картинки при клике

Увеличение только одной картинки при клике

Описание: Я уже выкладывал скрипт увеличение картики при клике. Однако, мне задали вопрос, как сделать так, чтобы в один момент могла бы быть увеличена только одна картинка. То есть когда кликают по другой картинке, текущая увеличенная должна быть уменьшена. Вот такой скрипт я и предлагаю Вашему вниманию.

Результат: Кликните на любую фотографию. Если кликните ещё раз, то она вернётся в исходное состояние. Причём, одновременно увеличенной может быть только одна фотография.

Фото 1
Фото 1
Фото 2
Фото 2

Код JavaScript (вставлять между тегами <head> и </head>):

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

Код HTML (вставлять между тегами <body> и </body>):

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (24):

eliza eliza 12.09.2011 21:29:32

Михаил, большое спасибо!!!

Ответить

aselka88 aselka88 13.09.2011 17:47:26

очень признательна сайт мне нравится...всё то, что нужно.Нечего лишнего.

Ответить

sarcodin sarcodin 30.12.2011 21:41:57

Да, спасибо все достаточно просто и легко, еще раз спасибо!

Ответить

Hellsvin Hellsvin 09.01.2012 12:52:26

Отличный скрипт , спасибо !!!

Ответить

LiuLiuJons LiuLiuJons 31.01.2012 19:27:26

Большое спасибо, простой и работающий скрипт! :) А к нему можно ещё добавить, чтобы фон при этом был затемнённым? Нашла много примеров с использованием LightBox, но хотелось бы использовать Ваш исходный код с открытием картинки, потому что он действительно прост и понятен.

Ответить

Admin Admin 31.01.2012 19:30:45

Я напишу статью про затемнение фона на следующей неделе (без подключения к скрипту).

Ответить

LiuLiuJons LiuLiuJons 31.01.2012 19:42:32

Спасибо! Только вот затемнить как раз получилось (кривым методом наверное, но всё же удалось), пример брала отсюда: http://www.xiper.net/examples/css/background.html а вот как бы это связать с Вашим скриптом ума не приложу.. Может не стоило к <div> привязывать это затемнение..

Ответить

Admin Admin 31.01.2012 19:49:18

Если брать пример по ссылке, то достаточно у блока #TB_overlay делать display: block;, когда картинка увеличена, и display: none;, когда картинка скрыта.

Ответить

LiuLiuJons LiuLiuJons 31.01.2012 20:45:04

Что-то меня заклинило..Так прописала в скрипте: if(im.height == bigsize) {im.height = smallsize; document.getElementById(TB_overlay).style.display = 'none'; } else { im.height = bigsize; document.getElementById(TB_overlay).style.display = 'block'; } Сам элемент: <div id="TB_overlay"> </div> Плюс по умолчанию #TB_overlay имеет в стилях имеет опцию: display: none; чтобы с самого начала открытия страницы фон не затемнялся. Скрипт работает, но фон не меняется.. Что я неправильно написала, подскажите пожалуйста?

Ответить

Admin Admin 31.01.2012 20:48:56

document.getElementById("TB_overlay").style.display, в кавычках надо писать TB_overlay.

Ответить

LiuLiuJons LiuLiuJons 31.01.2012 21:43:06

Да, действительно не заметила, спасибо! Только один недостаток - таким образом всё затемняется, в том числе и картинка, да и уменьшить её назад нет возможности.

Ответить

Admin Admin 31.01.2012 22:05:04

Здесь уже нужно поиграться со следующими свойствами: z-index, position: absolute; и, возможно, top, left. Также лучше поместить картинки в отдельный div, к которому и применять все эти свойства.

Ответить

kazamaki kazamaki 09.03.2012 23:40:49

У меня вопрос как мне увеличивать картинку и в ширину а не только в висоту?

Ответить

Admin Admin 09.03.2012 23:42:25

Менять атрибут width.

Ответить

kazamaki kazamaki 09.03.2012 23:50:25

При смени атрибута меняетса сама картинка а мне нужно штоб сама картинка била width="100" height="100" а при нажатие на нейо width="700" height="700" если етот невозможно подскажите пожалуста другой скрипт в котором ето столо би визможним

Ответить

Admin Admin 10.03.2012 00:15:15

Как при смене ширины может меняться сама картинка?

Ответить

kazamaki kazamaki 10.03.2012 00:36:05

я не в те атрибути вводил width уже розобоался спс

Ответить

annata annata 25.08.2012 01:37:49

Уважаемый Михаил, подскажите, пожалуйста, как сделать так, чтобы картинка увеличивалась на свои сто процентов. Но не в новом окне. Спасибо.

Ответить

mnurgaliev mnurgaliev 05.06.2013 16:18:02

Михаил, в данном скрипте можно убрать последнюю проверку if, а сразу после строки "active_img = im;" писать "im.height = bigsize;"

Ответить

Admin Admin 05.06.2013 23:22:57

Да, согласен. Убрал лишнее, спасибо!

Ответить

Allidjan Allidjan 25.06.2013 00:12:44

Михаил подскажите как сделать, при наведении мыши на одну из картинок она плавно увеличивалась, а когда мышь уходит из картинки, картинка плавно уменьшалась до первоначального размера. С одной картинкой это сделать просто, а вот если их несколько у меня не выходит. После первого отрабатывания фу-ции по увеличению теряется ссылка на картинку (this).

Ответить

Admin Admin 25.06.2013 10:37:32

Каждую картинку пометьте уникальным id. И по этому id изменяйте параметры изображения.

Ответить

Smiley Smiley 24.02.2014 18:47:35

Здравствуйте, Михаил. а я на эту тему вот такую функцию написал и она работает. скажите правильная ли она и можно ли ее использовать? var count = 0; function OnClickImg (img){ if (count == 0) { img.width = 500; count = count + 1; return; } if (count != 0) { img.width = 100; count = 0; } }

Ответить

tikkiwiki tikkiwiki 04.03.2014 14:04:43

Здравствуйте, Тимур. Неплохо.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.