<MyRusakov.ru />

Разработчик игр на Unreal Engine

Разработчик игр на Unreal Engine

Этот комплект с нуля всего за 7 месяцев сделает Вас Unreal-разработчиком. И при этом учиться достаточно 1 час в день.

Начнёте Вы с основ программирования, постепенно перейдя к C++. Затем очень подробно изучите Unreal Engine, и после научитесь программировать на C++ в Unreal Engine. В конце создадите крупный проект на C++ в Unreal Engine для своего портфолио.

Комплект содержит:

- 416 видеоуроков

- 95 часов видео

- 1024 задания для закрепления материала из уроков

- 3 финальных тестирования

- 4 сертификата

- 12 Бонусных курсов

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

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

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

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

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

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

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

Какая тема Вас интересует больше?

Увеличение картинки при клике

Увеличение картинки при клике

Описание: Очень простой скрипт на языке JavaScript, который требуется очень часто. Действительно, обычно картинки на сайте обладают небольшим размером, чтобы не увеличивать их до такого размера, когда это смотрится уже, как минимум, некрасиво. Однако, очень часто пользователи хотят увеличить картинку, и вот для их удобства и был сделан этот простой скрипт.

Результат: Кликните на любую фотографию. Если кликните ещё раз, то она вернётся в исходное состояние (P.S. На фото не я, а мой одногруппник).

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

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

<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 (вставлять между тегами <body> и </body>):

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

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

Гость Гость 02.02.2011 17:09:26

А куда вставлять этот скрипт ?

Ответить

Admin Admin 02.02.2011 17:12:56

На страницу, на которой Вы хотите, чтобы был такой эффект. Соответственно, между тегами <head> и </head> нужно вставить сам скрипт. А между <body> и </body> вставить картинки с обязательным атрибутом "onclick="changeSizeImage(this)".

Ответить

kocmu4 kocmu4 21.01.2014 04:47:07

Вставил всё правильно, Всё вроде бы работает, но не верно. Картинка почему то увеличивается только в одну сторону.. Меняя значения, добиваюсь того же результата.. только уже по горизонтали.. Что добавить в код? Что бы картинка увеличивалась и уменьшалась по обеим сторонам?

Ответить

sergeevna sergeevna 03.04.2011 20:39:42

Здравствуйте Михаил! Помогите пожалуйста! У меня такая проблема: не могу я понять, как написать скрипт что бы изображение открывалось не так как вы показали на примере, а в отдельном окне. Я только начинаю изучать всю эту примудрость."Сражаюсь" с этим скриптом уже вторую неделю... С нормальным описанием действй нашла только у вас, но не совсем то.Помогите пожалуйста!!!

Ответить

Admin Admin 03.04.2011 21:01:36

В функции changeSizeImage() удалите все строки, а взамен поставьте эти var win = "width=600,height=600,menubar=no,location=no,resizable=yes,scrollbars=yes"; newWin = window.open(im.src,"newWin",win); newWin.focus();

Ответить

sergeevna sergeevna 03.04.2011 21:10:46

Спасибо,попробую...

Ответить

sergeevna sergeevna 03.04.2011 21:25:45

Простите еще раз!Наверно не суждено мне освоить этот прием :( Не получается. Если не сложно,напишите пожалуйста на вашем примере, как правильно это сделать ( что,где удалить и что,куда подставить).Простите еще раз:(((

Ответить

Admin Admin 03.04.2011 21:27:45

Код JavaScript (вставлять между тегами <head> и </head>):
<script language = "JavaScript"> function changeSizeImage(im) {
var win ="width=600,height=600"
newWin = window.open(im.src,"newWin",win);
newWin.focus();
}</script>
А в <body> ничего трогать не надо.

Ответить

sergeevna sergeevna 03.04.2011 22:29:34

я сделала как вы написали,все получилось,но почему картинка маленькая,а не увеличенная?

Ответить

Admin Admin 03.04.2011 22:34:33

Тут два варианта: 1. Увеличьте width и height (то есть вместо 600 поставьте, например, 1000). 2. Оригинальный размер самой картинки маленький (вот это скорее всего).

Ответить

alena alena 13.04.2011 16:37:50

А как сделать картинку ссылкой? Добавляю <a href = "">, тогда картинка не увеличивается...

Ответить

Admin Admin 13.04.2011 16:41:11

Так как картинка увеличивается при клике, то здесь необходимо решить: либо она будет увеличиваться при клике, либо переходить по ссылке при клике. По-другому, никак. Можно лишь изменить условия увеличения картинки, например, увеличивать при наведении мыши, а при клике переходить.

Ответить

sergeevna sergeevna 13.04.2011 19:51:16

Здравствуйте Михаил! Подскажите,как сделать так,что бы маленькая картинка в самом верху страницы повторялась

Ответить

Admin Admin 13.04.2011 21:20:27

Не очень понятна фраза "что бы маленькая картинка в самом верху страницы повторялась".

Ответить

sergeevna sergeevna 13.04.2011 21:52:07

Боюсь,что не смогу правильно объяснить( Есть шаблон. Он состоит из отдельных рисунков.Один из них находится на самом верху страницы образуя сплошную лнию.А в оригенале он 113х74.Как сделать что бы рисунок не меняясь занял всю ширину страницы? Извините за сумбурный ответ..

Ответить

Admin Admin 13.04.2011 21:56:41

Если Вы имеете ввиду растянуть один рисунок на всю страницу, то с помощью атрибута width тега <img>. Например, так: <img src = 'header.jpg' width = '100%' /> Если нужно сохранить оригинальную высоту, то так: <img src = 'header.jpg' width = '100%' height = '74' />

Ответить

sergeevna sergeevna 13.04.2011 22:04:57

Если делать так:<img src = 'header.jpg' width = '100%' height = '74' />, то получается ужас. Изображение растягивается.А в оригинале оно как бы повторяется(словно многократно копируется)

Ответить

Admin Admin 13.04.2011 22:40:06

Можно тогда воспользоваться CSS-свойством background: "background: url('header.jpg') repeat-x;".

Ответить

sergeevna sergeevna 14.04.2011 14:41:07

А где прописывать "background: url('header.jpg') repeat-x;".?

Ответить

Admin Admin 14.04.2011 16:39:24

Вместо тега <img> используйте <div id = 'header'></div> а в файле CSS-стилей добавьте такой код: #header { background: url('header.jpg') repeat-x; }

Ответить

sergeevna sergeevna 20.04.2011 18:25:34

Здравствуйте Михаил! Хочу создать простенький сайт.Знаний (пока что) минимум.Есть программа FrontPage.Посоветуйте с чего начать и та ли эта программа для начинающего?

Ответить

Admin Admin 20.04.2011 21:24:03

Простенький сайт можно создать на FrontPage, либо на Dreamweaver. О качестве, безусловно, говорить не приходится. Можно также создать сайт на Joomla. Всё это для начинающих.

Ответить

sergeevna sergeevna 20.04.2011 22:08:04

можно ли размещать сайт созданный в FrontPage на платном сервере? Если да,то какой по вашему мнению лучше?

Ответить

Admin Admin 20.04.2011 22:10:11

FrontPage помогает лишь создать сайт, а где размещать его - это уже другой вопрос. Из платных вариантов могу посоветовать Yutex. На данный момент этот сайт находится на их хостинге.

Ответить

dasha dasha 28.04.2011 20:12:21

Здравствуйте, Михаил. У меня проблема, помогите пожалуйста) Я вставила вот такой код : <a href="/_imager/Image/dom 130.jpg" rel="lightbox[roadtrip]"><img width="200" height="150" border="0" alt="" src="/_imager/Image/dom 130.jpg" /> Но картинка при нажатии по размерам остается прежней. Как с моим кодом сделать так, чтобы при нажатии картинка была больше.

Ответить

Admin Admin 28.04.2011 20:18:18

Здесь нет кода вообще. Если Вы хотите, как в данной статье, то тогда надо убрать тег <a> и добавить в <img> событие onclick. Если же Вы хотите, чтобы при клике по изображению открывалась новая страница с этим изображением, то тогда закройте после .../> тег </a>, потому что он у Вас сейчас не закрывается.

Ответить

dasha dasha 28.04.2011 20:35:13

Мне все равно не понятно) хотя все очень просто написано. Куда вставлять ... и вставлять одно слово onclick? В итоге это как должно выглядеть?

Ответить

Admin Admin 28.04.2011 20:37:10

Примерно так: <img src="foto1.jpg" height="150" onclick="changeSizeImage(this)" />

Ответить

Molchanov Molchanov 03.06.2011 07:26:37

Mihail spasibo bolshoe za etot script, ochen pomog, no mne nygnen nemnogo drygoi variant, popitayis ob'yasnit: voobshem nyjno chtobi takoi ge effect ostalsya chto pri click kartinka yvelichivaetsya, no nado chtobi bila odna bolshaya kartinka *eto ta kartinka kotoraya yge bila sfokysirovana* a pod nei malen'kie kartinki, t.e pri najatii na malen'kyiy kartinky ona zamenyaet bolshyiy. sorry esli ne ponyatno, pishy vecherom golova yge ne rabotaet) and sorry za latinicy....rus shrifta net. da...i eshe odin vopros, kak mogno izmenit razmer kartinok v vashem scripte? naprimer y vas stoit: var bigsize = "300"; //Размер большой картинки.....a mne nygno bolee tochi razmer naprimer 450X600 i takaya ge sityacia s melenikimi... Ogromnoe spasibo za vremya i nervi))) horoshego dnya.

Ответить

Admin Admin 03.06.2011 12:03:44

Для начала второй вопрос. Чтобы размер картинки был больше надо изменить 300 на, например, 600. Что касается первого вопроса, то здесь посложнее. Надо создать большое изображение с каким-нибудь id. Затем при клике по маленькому изображению вызывается функция. В этой функции считывается src изображения, по которому кликнули и передаётся src на то большое изображение с id.

Ответить

Molchanov Molchanov 04.06.2011 07:04:03

Spasibo za otvet, no ya imel vidy kak ystanovit shiriny..300 i 600 eto visata, eto ya ponyal chto pri neobhodimosti menyat' eti parametri..a vot kak bit' s shirinoi...kak ee vistavit..? a po povody pervogo voprosa..spasibo chto poyasnili ya teoreticheski ponyal kak eto...no ksojaleniyi ya ne vladeyi JAVA...i ne znayi sintaksis...esli eto ne bolshoi script i esli y vas est vozmognost' i vremya to nemogli bi vi napisat ego. a esli net vozmognosti..net problem..spasibo za vashi trydi. Best regards, Vitaly. P.S..esli mogy chem to pomoch' ya bydy rad eto sdelat...ya givy seichas v New Yorke...tak chto imeite vvidy. Horoshego dnya.

Ответить

Admin Admin 04.06.2011 13:12:29

Ширину задавать можно в теге img с помощью атрибута width. То есть там имеется height, а можно ещё написать width. В JavaScript (не Java!!!) im.width = 500; - вот так можно менять ширину. Что касается скрипта, то я, пожалуй, напишу об этом небольшую статью, потому что Вы не первый, кто просит нечто подобное. Но напишу через 1.5 - 2 недели, так как скоро госэкзамен, а к нему следует готовиться.

Ответить

Molchanov Molchanov 04.06.2011 15:59:04

Ok, spasibo, ydachi na gosah;-)

Ответить

Rabb1T Rabb1T 13.06.2011 19:14:50

Здравствуйте Михаил! Подскажите пожалуйста, как сделать чтобы картинка увеличивалась как в вашем примере с галереей, ну или даже как в этом примере, но увеличивалась она на свой реальный размер а не на тот который зафиксирован в коде ?

Ответить

Admin Admin 13.06.2011 19:16:37

Вот здесь реализовывалось нечто подобное, но только изображение открывалось в новом окне: http://myrusakov.ru/javascript-image-newwindow.html

Ответить

Rabb1T Rabb1T 13.06.2011 19:22:18

благодарю! попробую сделать так но с галереей. случайно на Ваш сайт наткнулся и уже нравится :)

Ответить

eliza eliza 09.09.2011 20:15:17

Здравствуйте, Михаил! Спасибо за статью! Подскажите, пожалуйста, как сделать на вашем примере, чтобы при клике на вторую картинку, первая уменьшалась, т.е. одновременно могла быть увеличена только одна?

Ответить

Admin Admin 09.09.2011 20:48:59

Надо добавить ещё одно поле (сразу после small_size): active_img, куда сохранять текущее увеличенное изображение. Затем при щелчке по картинке, у active_img выставлять маленький размер, а у новой картинки большой размер, причём в active_img записать теперь эту большую картинку.

Ответить

eliza eliza 10.09.2011 14:03:52

Михаил, а как бы мне сохранить текущее изображение в переменную js, если оно выводится переменной php в цикле - <img src="images/colors/<?php echo $options_color['base_var'] ?>.png"> ?

Ответить

Admin Admin 10.09.2011 14:06:15

Аналогично тому, как в примере. Вызываем функцию, передавая this.

Ответить

eliza eliza 10.09.2011 14:28:02

Извините, не доходит)) JS со мной не очень дружит. К тегу img я добавляю еще одно событие onclick: onclick="changeImageActive(<?php echo $options_color['base_var'] ?>)" Так? А как сохранить не поняла... var activeimg = '?';

Ответить

Admin Admin 10.09.2011 14:35:21

Нет, HTML вообще трогать не надо, оставьте всё как есть. Менять надо только JavaScript. Добавить переменную, в которую сохранять объект, переданный в функцию: active_img = im;

Ответить

eliza eliza 10.09.2011 15:43:01

Тогда получается, что active_img.height равняется im.height. Как тогда отличить сохраненную картинку от новой? function changeSizeImage(im) { activeimg.height = smallsize; //активную уменьшаю im.height = bigsize; // вроде как новую увеличиваю activeimg = im; // это я увеличенную сохраняю в активную? } Бред написала, так ничего не работает))

Ответить

Admin Admin 10.09.2011 15:57:46

В общем, всё понятно, не понимаете. В понедельник напишу эту статью.

Ответить

eliza eliza 10.09.2011 16:01:18

Спасибо огромное!!! :)

Ответить

bjanka11 bjanka11 20.10.2011 10:10:07

Михаил, здравствуйте! Спасибо большое за замечательный скрипт. Подскажите, пожалуйста, а как сделать так, что бы картинка , увеличиваясь в размерах, не расширяла всю страницу. Другими словами чтобы увеличиваясь, она просто заслоняла все остальные картинки, находящиеся в одном с ней ряду. Понятно,что можно использовать ваш скрипт с показом картинки в новом окне, но получается не очень красиво - видны очертания окна, а хочется чтобы была только картинка...Надеюсь удалось объяснить мысль.. С уважением, Ольга

Ответить

Admin Admin 10.01.2012 13:59:57

Для этого надо поставить у картинок через CSS такое свойство: position: absolute;

Ответить

tan tan 10.01.2012 11:39:51

Михаил Здравствуйте! Спасибо за понятный код. Первый раз когда пробовала, всё получилось, а теперь на картинку кликаю, а она не увеличивается. Что не так.Спасибо! <html> <head> <title>Увеличение картинки</title> <head> <body> <table align="center"> <tr> <td align="center"> <img src="foto1.jpg" height="150" onclick="changeSizeOneImage(this)" /> <br /> <b>Фото 1</b> </td> </tr> </table>

Ответить

Admin Admin 10.01.2012 14:01:32

В моём примере функция называется changeSizeImage(), а в Вашем коде вызывается changeSizeOneImage(). Если Вы копировали JS-код у меня, то в неправильном названии вызываемой функции и заключается ошибка.

Ответить

tan tan 11.01.2012 11:08:18

Михаил, спасибо за ответ. Я брала код HTML, когда исправила ошибку- у меня также при клике на фотографию она не увеличивается. Если я правой клавишей вызыв. меню и открыть изображение-то фото увеличенное открывается отдельно на новой странице. С Уважением Татьяна.

Ответить

Admin Admin 11.01.2012 12:21:05

Исправьте onclick="changeSizeOneImage(this)" на onclick="changeSizeImage(this)"

Ответить

tan tan 12.01.2012 12:13:56

Михаил, здравствуйте! Ура, я нашла ошибку- я просто вставляла один код для HTML и у меня ничего не получалось, а я добавила в <head></head> ещё код Java Script и у меня все получилось. Спасибо. Только мне бы убрать между картинками пробелы- так как у меня их несколько.

Ответить

x3miSt x3miSt 16.02.2012 13:24:44

Здравствуйте Михаил. Подскажите пожалуйста как мне сделать увеличение фото как на этом сайте: http://playboys.uz/2012/anonsirovany-videokarty-radeon-hd77707750/

Ответить

Admin Admin 16.02.2012 16:38:07

Тут нужно JQuery, без него будет долго и трудно. Есть специальный плагин, названия не помню, поэтому поищите в google.

Ответить

x3miSt x3miSt 17.02.2012 13:56:06

Спасибо за информацию.

Ответить

ppk-center ppk-center 22.02.2012 21:51:00

Скрипт будет полезнее, если увеличение будет при наведении мыши. А так отличный скрипт!

Ответить

Anjelika Anjelika 02.04.2012 19:12:15

Работаю с div и не получается (( <div class="choise"><h1><img src="Images/Curtaine.png" height="150" onclick="changeSizeImage(this)" title="кликните мышкой" /></h1></div> Картинка не увеличивается. В чем проблема?

Ответить

Admin Admin 02.04.2012 19:42:18

Зачем картинку в h1 засунули?

Ответить

Anjelika Anjelika 02.04.2012 20:02:32

убрала, но все равно не работает (

Ответить

Admin Admin 02.04.2012 20:15:28

Тогда значит что-то неправильно скопировали, потому что код теперь точно правильный. Можете попробовать убрать временно div, но вряд ли поможет.

Ответить

Anjelika Anjelika 02.04.2012 20:26:20

вот привожу пример своего скрипта: <html> <head> <meta content="text/html; charset=utf8"> <title>Страница с приложением</title> <link rel="stylesheet" href="styleA.css" type="text/css"> <script src="script.js" > <script language = "JavaScript"> var bigsize = "300"; //Размер большой картинки var smallsize = "150"; //Размер маленькой картинки function changeSizeImage(im) { if(im.height == bigsize) im.height = smallsize; else im.height = bigsize; } </script> </head> <body> <div class="actions"><h1>Window1</h1></div> <div class="choise"><img src="Images/Curtaine.png" height="150" onclick="changeSizeImage(this)" title="кликните мышкой"/></div> </body> </html> и css: html, body{margin:0; padding:0;} div.actions h1 {height:600px; width:800px; margin-left:200px; border-style:outset; border-width:3px; } div.choise {height: 100px; width:800px; margin-left:200px; border-style:outset; border-width:3px; } div.choise img{background:url(Images/texture2.jpg) no-repeat scroll 50% 0 transparent; height:90; width:110; } div.choise img:active{} Проверила на сто рядов, но не увеличивается картинка и всё.

Ответить

Admin Admin 02.04.2012 20:31:31

О чём я и говорил, плохо скопировали. Тег <script src="script.js" > не закрыт.

Ответить

Anjelika Anjelika 03.04.2012 15:35:29

Да все равно не помогает, главное без div работает .... а мне надо именно с div.. В чем может быть причина?

Ответить

Admin Admin 03.04.2012 15:39:09

div.choise {height: 100px; - уберите это.

Ответить

юльчитай юльчитай 25.04.2012 15:38:47

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

Ответить

Admin Admin 25.04.2012 15:44:11

В ширину она не уменьшается, проверил. Браузер Firefox 11.0

Ответить

юльчитай юльчитай 25.04.2012 16:17:46

я смотрела в опере, сейчас зашла с хрома все отлично.А я целый день мучалась с этой фоткой думала у меня что-то не так.Спасибо Вам большое!!!

Ответить

kulag95 kulag95 03.05.2012 14:35:12

Здравствуй Михаил! у меня такая проблема я вставил вот этот скрипт : <body> <table align="center"> <tr> <td align="center"> <img src="z_a6e40f28.jpg" height="150" onclick="changeSizeImage(this)" /> <br /> <b>Фото 1</b> </td> <td align="center"> <img src="z_a6e40f28.jpg" height="150" onclick="changeSizeImage(this)" /> <br /> <b>Фото 2</b> </td> </tr> </table> </body> в html:и у меня почему та фото не увеличивается скажите почему?!

Ответить

Admin Admin 03.05.2012 16:23:37

Здесь нет скрипта, здесь только HTML-код, потому ничего и не работает.

Ответить

kulag95 kulag95 03.05.2012 16:36:54

Михаил ,если не трудно - ты бы мог дать мне скрипт а то очень нужно...

Ответить

Admin Admin 03.05.2012 16:47:06

В статье он имеется.

Ответить

kulag95 kulag95 03.05.2012 16:50:44

а всё спасибо я тупанул немного )Просто нам в школе задали сделать сайт через html - вот мы щяс все и делаем и в школе и дома ...А не подскажешь как сделать чтобы сайт видели другие люди ?!

Ответить

Admin Admin 03.05.2012 16:51:47

http://myrusakov.ru/site-to-internet.html

Ответить

kulag95 kulag95 19.05.2012 13:11:31

Здравствуй ещё раз - у меня вот такой вопрос - я скачал сайт(готовый шаблон - вообще всё есть что надо мне - но вот как я начинаю менять текст с английского на русский , то у меня после этого текст какой то вообще не понятный становится ) что за фигня - и как её исправить?

Ответить

Admin Admin 19.05.2012 13:22:21

Надо кодировку соблюдать. Если шаблон в UTF-8, значит, надо писать текст в этой кодировке, а не в какой-нибудь кириллице.

Ответить

kulag95 kulag95 19.05.2012 13:30:40

а как мне теперь эту проблему исправить?подскажи пожалуйста...

Ответить

Admin Admin 19.05.2012 13:35:54

Для начала сравните кодировку документа и какую кодировку выставляет браузер. Преобразуйте в эту кодировку (которую выставляет браузер) файл.

Ответить

kulag95 kulag95 19.05.2012 13:49:49

А как мне заменить кодировку в текстовом файле - в котором написан сайт?

Ответить

Admin Admin 19.05.2012 13:52:15

Через Notepad++ в меню "Кодировки" выберите "Преобразовать в ...", там и выберите необходимую кодировку.

Ответить

kulag95 kulag95 19.05.2012 13:53:34

Щяс попробую...

Ответить

kulag95 kulag95 19.05.2012 14:17:11

Всё спасибо большое ...всё получилось

Ответить

Puf-Gold Puf-Gold 22.11.2012 13:04:30

Благодарю! Все отлично получилось. Вопрос: как сделать, чтобы при наведении курсора на маленькую картинку стрелка была в виде лупы с плюсом, а при наведении на большую картинку лупа с минусом. Буду очень благодарна. С Уважением Людмила Украина, Харьков.

Ответить

Admin Admin 22.11.2012 17:00:42

cursor: url("zoom.cur") - через стиль можно добавить. А вот дальше нужно менять значение свойства cursor в JavaScript в зависимости от того, какой размер имеет изображение: большое или маленькое..

Ответить

Puf-Gold Puf-Gold 22.11.2012 17:02:50

Благодарю, что ответили. Буду разбираться. Хорошего дня и настроения!

Ответить

greg77 greg77 03.12.2012 16:06:01

Уважаемый Михаил. Опираясь на Ваши готовые скрипты, (за что большое спасибо!) я использую у себя вариант когда, при клике на любой из ряда уменьшенных картинок, появляется ее же отображение в отдельном но большем окне, помещенном на той же страничке сайта. Одна проблема которую я не смог решить: как сделать так, чтоб "под" либо "над" либо "рядом" с увеличенной картинкой появлялось ее текстовое описание - каждое для своей картинки? Думаю такой скрипт был бы очень полезен не только для меня одного! Спасибо.

Ответить

Admin Admin 03.12.2012 19:03:54

В данном скрипте прямо под картинкой есть её описание.

Ответить

voffka voffka 27.12.2012 10:10:13

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

Ответить

Admin Admin 27.12.2012 16:24:20

Поставить обработчик onmouseover вместо onclick.

Ответить

voffka voffka 27.12.2012 18:57:53

Спасибо.Получилось.А нет такой команды что бы навел курсор увеличилась картинка убрал с неё уменшилась.С командой onmouseover навел увеличилась а что бы уменшилась курсор нужно убрать с фото а потом вновь навести на него. Спасибо.

Ответить

Admin Admin 27.12.2012 19:35:06

Поставьте обработчик onmouseout, где вызовите функцию, уменьшающую изображение обратно.

Ответить

marselnorini marselnorini 23.02.2013 12:51:07

Михаил, здравствуйте. Ваш скрипт работает корректно, спасибо. А подскажите, пожалуйста, можно ли сделать так, чтобы при увеличении картинка оказывалась в определенном заданном месте таблицы? И как это сделать?

Ответить

Admin Admin 23.02.2013 13:05:21

Можно, для этого надо установить пустое изображение в этом месте. Затем при клике поменять значение src этого пустого изображения на src того изображения, по которому кликнули.

Ответить

marselnorini marselnorini 23.02.2013 13:38:12

Я уже нашел нужный мне скрипт у Вас же на сайте) Огромное Вам спасибо, Ваш сайт для нас, неумелых программеров, настоящее спасение)

Ответить

marselnorini marselnorini 23.02.2013 15:56:11

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

Ответить

Admin Admin 23.02.2013 21:09:40

Можно, но вопрос странный. Писать здесь много, но всё тривиально, поэтому если JS не знаете, то учите, если знаете, то не вижу никаких проблем в написании этого скрипта. Безусловно, начальное слово из базы вернёт PHP.

Ответить

Женька Женька 23.02.2013 23:26:47

Здравствуйте, подскажите пожалуйста как быть, взял ваш скрипт, всё работает, картинки располагаются в 2 столбца, так вот один столбец всегда увеличенный, то есть приходиться уменьшать его нажатием, второй работает нормально, как решить проблему?? Спасибо за ответ))

Ответить

Admin Admin 24.02.2013 10:25:16

Если не видите подобных проблем у меня, значит, ищите ошибку у себя. И не забывайте, что изначально изображение должно быть маленьким. Для этого задаются width и height.

Ответить

ausik ausik 24.03.2013 17:34:39

Здравствуйте.Такой вопрос:у вас и миниатюра и увеличенная картинка открываются по центру,а как сделать,чтобы исходная картинка была слева по умолчанию,а увеличенная уже по центру открывалась?

Ответить

Admin Admin 24.03.2013 20:15:31

Создать в центре пустой (src="") img с большим размером, в котором при клике на картинку менять атрибут src на тот, который у картинки, по которой кликнули.

Ответить

ausik ausik 24.03.2013 23:38:29

а можете это кодом прописать?

Ответить

Admin Admin 25.03.2013 06:41:14

http://myrusakov.ru/javascript-gallery-slideshow.html - вот это за основу, но если JS не знаете, то не получится использовать.

Ответить

ler4ik_solnce ler4ik_solnce 28.03.2013 15:44:10

Михаил, здравствуйте! Спасибо большое за замечательный скрипт, но есть вопрос. Его уже задавали, но так как я новый человек в данном направлении, не совсем разобралась. Я пыталась сделать так, что бы картинка, увеличиваясь в размерах, не расширяя всю страницу, тоесть чтобы увеличиваясь, она просто заслоняла все остальные картинки, находящиеся рядом с ней. Вы писали что нужно поставить у картинок через CSS такое свойство: position: absolute; Подскажите пожалуйста, куда именно нужно его поставить, ведь когда я его вставляю возле каждой картинки, "действует" оно почему то только на первую. Скрипт: <table align="center" > <tr> <td align="center" style type="text/css" position: absolute;/> <img src="images/images/666.png" height="200" onclick="changeSizeOneImage(this)" /> <br /> <b>Фото 1</b> </td> <td align="center" > <img src="images/images/777.png" height="200" onclick="changeSizeOneImage(this)" /> <br /> <b>Фото 2</b> </td> <tr> И т.д. Заранее большое спасибо за ответ! С уважением, Валерия

Ответить

Admin Admin 28.03.2013 15:57:23

В тег img надо вставлять это свойство.

Ответить

ler4ik_solnce ler4ik_solnce 28.03.2013 16:00:22

Сейчас попробую! Спасибо)

Ответить

ler4ik_solnce ler4ik_solnce 28.03.2013 16:05:28

Не получилось, теперь все картинки сьехали одна на другую... Я прописала: <img src="images/images/1.jpg" height="200" onclick="changeSizeOneImage(this)" style="position: absolute;"/> Подскажите, что не так?

Ответить

Admin Admin 28.03.2013 17:27:16

Тогда только регулируя свойства top и left у изображений. position: absolute тоже оставить.

Ответить

sergkosm sergkosm 10.04.2013 02:27:45

Отличный скрипт. Попробовал без таблицы, маленькая картинка относительно большой съезжала вниз. А с таблицей маленькая и большая картинки находятся на одной линии(так, конечно, красивее смотрится). В этом и есть смысл таблицы?

Ответить

Admin Admin 10.04.2013 11:14:54

Таблицы и сделаны для выравнивания элементов по вертикали.

Ответить

gala_78 gala_78 25.05.2013 19:57:38

А почему после вставления скрипта мой код становится невалидным, и показывает ошибки в <script language = "JavaScript">

Ответить

Admin Admin 25.05.2013 22:32:10

Пишите <script type="text/javascript">

Ответить

gala_78 gala_78 25.05.2013 22:36:33

спасибо

Ответить

Alina1989 Alina1989 13.07.2013 20:30:43

Здравствуйте. У меня возникла такая проблема: после того как я сделала увеличение картинок, они все роспологаются в один ряд и автоматично расширяют страницу по ширине. А как сделать чтобы картинки были в 2 и больше ряда???Большое спасибо.

Ответить

white-hot white-hot 26.02.2015 15:41:47

Михаил,здравствуйте! Создал по вашему уроку инет-магазин! хочется внести дополнения,по вашему скрипту вроде все понятно..но не все, мы картинку получается растягиваем?но тогда получается качество теряется..или мы вставляем в папку img два изображения основное и увеличенное?

Ответить

qwerti qwerti 02.05.2015 15:02:44

Здравствуйте, как сделать ,что бы на одной странице картинки увеличивались по-разному?!

Ответить

lglevon lglevon 20.10.2015 14:28:39

Здравствует Михаил, у меня проблема с скриптом http://myrusakov.ru/uvelichenie-kartinki-klik.html, я его вставляю, оно работает правильно, все OK, но мне нужна чтобы скрипт параметр height получал от scc, так как в html вставляя параметр height код будет не валидным, что только не пробовал, не получается: Помогите если не трудно Спасибо.

Ответить

watahw watahw 10.11.2015 00:19:53

Держите: <script> var bigsize = "auto"; //Размер большой картинки var smallsize = "300px"; //Размер маленькой картинки function changeSizeImage(im) { if(im.style.height == bigsize) im.style.height = smallsize; else im.style.height = bigsize; } </script> Вместо auto - ваша высота в пикселях или процентах. (в разметке ничего не менять) P.S.: Михаилу спасибо за скрипт)

Ответить

sync sync 28.03.2016 08:05:29

Здравствуйте Михаил Помогите понять а если путь до картинке в масcиве вот так <img alt= "" src="<?php echo $filesall[$idfilesall]; ?> " height="150" onclick="changeSizeImage(this)" /> У меня так не работает может поможете.

Ответить

Dolphin Dolphin 28.11.2016 08:01:07

Доброго времени суток. Помогите понять, в вашем коде переменные var bigsize и smallsize сделаны вне функции. В моем понимании при щелчке на кнопку вызывается функция и соответственно выполняется код который внутри функции, а как связаны между собой img и переменные bigszie и smllsize? Внутри функции сразу указано что если im равно bigsize то присвоить ей значение переменной smalsize иначе наоборот. Не могу понять как это срабатывает? Ведь мы не где не указывали что если первый клик то присвоить bigsize. Пожалуйста объясните подробнее.

Ответить

1234567890 1234567890 08.12.2016 09:43:42

Поясните пожалуйста эту функцию {if (img.height==bigsize) img.height=smallsize else img.height=bigsize; }

Ответить

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