<MyRusakov.ru />

Видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру" научит Вас "вдыхать жизнь" в страницы, делая их с потрясающими эффектами и максимальным удобством для пользователя.

Курс научит Вас писать скрипты на JavaScript, а также обучит использованию библиотеки jQuery и технологии Ajax.

Практически любой красивый сайт (с красивыми галереями изображений, слайдерами, плавными переходами и так далее) использует jQuery. А практически на любом серьёзном сайте вовсю используется технология Ajax, которая делает работу с сайтом максимальной удобной.

Поэтому курс "JavaScript, jQuery и Ajax с Нуля до Гуру" Вам просто необходим, если Вы хотите создавать по-настоящему достойные сайты.

Подробнее

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

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

Описание: Очень простой скрипт на языке 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-код ссылки для форумов (например, можете поставить её в подписи):

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

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

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

Ответить

Михаил Русаков Михаил Русаков 02.02.2011 17:12:56

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

Ответить

Александр Александр 21.01.2014 04:47:07

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

Ответить

Марина Марина 03.04.2011 20:39:42

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

Ответить

Михаил Русаков Михаил Русаков 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();

Ответить

Марина Марина 03.04.2011 21:10:46

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

Ответить

Марина Марина 03.04.2011 21:25:45

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

Ответить

Михаил Русаков Михаил Русаков 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> ничего трогать не надо.

Ответить

Марина Марина 03.04.2011 22:29:34

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

Ответить

Михаил Русаков Михаил Русаков 03.04.2011 22:34:33

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

Ответить

Alena Alena 13.04.2011 16:37:50

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

Ответить

Михаил Русаков Михаил Русаков 13.04.2011 16:41:11

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

Ответить

Марина Марина 13.04.2011 19:51:16

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

Ответить

Михаил Русаков Михаил Русаков 13.04.2011 21:20:27

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

Ответить

Марина Марина 13.04.2011 21:52:07

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

Ответить

Михаил Русаков Михаил Русаков 13.04.2011 21:56:41

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

Ответить

Марина Марина 13.04.2011 22:04:57

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

Ответить

Михаил Русаков Михаил Русаков 13.04.2011 22:40:06

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

Ответить

Марина Марина 14.04.2011 14:41:07

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

Ответить

Михаил Русаков Михаил Русаков 14.04.2011 16:39:24

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

Ответить

Марина Марина 20.04.2011 18:25:34

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

Ответить

Михаил Русаков Михаил Русаков 20.04.2011 21:24:03

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

Ответить

Марина Марина 20.04.2011 22:08:04

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

Ответить

Михаил Русаков Михаил Русаков 20.04.2011 22:10:11

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

Ответить

Даша Даша 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" /> Но картинка при нажатии по размерам остается прежней. Как с моим кодом сделать так, чтобы при нажатии картинка была больше.

Ответить

Михаил Русаков Михаил Русаков 28.04.2011 20:18:18

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

Ответить

Даша Даша 28.04.2011 20:35:13

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

Ответить

Михаил Русаков Михаил Русаков 28.04.2011 20:37:10

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

Ответить

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

Ответить

Михаил Русаков Михаил Русаков 03.06.2011 12:03:44

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

Ответить

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

Ответить

Михаил Русаков Михаил Русаков 04.06.2011 13:12:29

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

Ответить

Vitaly Vitaly 04.06.2011 15:59:04

Ok, spasibo, ydachi na gosah;-)

Ответить

Denis Denis 13.06.2011 19:14:50

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

Ответить

Михаил Русаков Михаил Русаков 13.06.2011 19:16:37

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

Ответить

Denis Denis 13.06.2011 19:22:18

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

Ответить

Элиза Элиза 09.09.2011 20:15:17

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

Ответить

Михаил Русаков Михаил Русаков 09.09.2011 20:48:59

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

Ответить

Элиза Элиза 10.09.2011 14:03:52

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

Ответить

Михаил Русаков Михаил Русаков 10.09.2011 14:06:15

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

Ответить

Элиза Элиза 10.09.2011 14:28:02

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

Ответить

Михаил Русаков Михаил Русаков 10.09.2011 14:35:21

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

Ответить

Элиза Элиза 10.09.2011 15:43:01

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

Ответить

Михаил Русаков Михаил Русаков 10.09.2011 15:57:46

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

Ответить

Элиза Элиза 10.09.2011 16:01:18

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

Ответить

Shipuleva Shipuleva 20.10.2011 10:10:07

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

Ответить

Михаил Русаков Михаил Русаков 10.01.2012 13:59:57

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

Ответить

Таня Танечкина Таня Танечкина 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>

Ответить

Михаил Русаков Михаил Русаков 10.01.2012 14:01:32

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

Ответить

Таня Танечкина Таня Танечкина 11.01.2012 11:08:18

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

Ответить

Михаил Русаков Михаил Русаков 11.01.2012 12:21:05

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

Ответить

Таня Танечкина Таня Танечкина 12.01.2012 12:13:56

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

Ответить

Александр Александр 16.02.2012 13:24:44

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

Ответить

Михаил Русаков Михаил Русаков 16.02.2012 16:38:07

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

Ответить

Александр Александр 17.02.2012 13:56:06

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

Ответить

Павел Павел 22.02.2012 21:51:00

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

Ответить

Власова Анжелика Власова Анжелика 02.04.2012 19:12:15

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

Ответить

Михаил Русаков Михаил Русаков 02.04.2012 19:42:18

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

Ответить

Власова Анжелика Власова Анжелика 02.04.2012 20:02:32

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

Ответить

Михаил Русаков Михаил Русаков 02.04.2012 20:15:28

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

Ответить

Власова Анжелика Власова Анжелика 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{} Проверила на сто рядов, но не увеличивается картинка и всё.

Ответить

Михаил Русаков Михаил Русаков 02.04.2012 20:31:31

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

Ответить

Власова Анжелика Власова Анжелика 03.04.2012 15:35:29

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

Ответить

Михаил Русаков Михаил Русаков 03.04.2012 15:39:09

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

Ответить

Юля Юля 25.04.2012 15:38:47

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

Ответить

Михаил Русаков Михаил Русаков 25.04.2012 15:44:11

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

Ответить

Юля Юля 25.04.2012 16:17:46

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

Ответить

Санёк Санёк 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:и у меня почему та фото не увеличивается скажите почему?!

Ответить

Михаил Русаков Михаил Русаков 03.05.2012 16:23:37

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

Ответить

Санёк Санёк 03.05.2012 16:36:54

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

Ответить

Михаил Русаков Михаил Русаков 03.05.2012 16:47:06

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

Ответить

Санёк Санёк 03.05.2012 16:50:44

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

Ответить

Михаил Русаков Михаил Русаков 03.05.2012 16:51:47

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

Ответить

Санёк Санёк 19.05.2012 13:11:31

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

Ответить

Михаил Русаков Михаил Русаков 19.05.2012 13:22:21

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

Ответить

Санёк Санёк 19.05.2012 13:30:40

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

Ответить

Михаил Русаков Михаил Русаков 19.05.2012 13:35:54

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

Ответить

Санёк Санёк 19.05.2012 13:49:49

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

Ответить

Михаил Русаков Михаил Русаков 19.05.2012 13:52:15

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

Ответить

Санёк Санёк 19.05.2012 13:53:34

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

Ответить

Санёк Санёк 19.05.2012 14:17:11

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

Ответить

Людмила Овсянникова Людмила Овсянникова 22.11.2012 13:04:30

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

Ответить

Михаил Русаков Михаил Русаков 22.11.2012 17:00:42

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

Ответить

Людмила Овсянникова Людмила Овсянникова 22.11.2012 17:02:50

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

Ответить

Gregory Gregory 03.12.2012 16:06:01

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

Ответить

Михаил Русаков Михаил Русаков 03.12.2012 19:03:54

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

Ответить

Владимир Владимир 27.12.2012 10:10:13

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

Ответить

Михаил Русаков Михаил Русаков 27.12.2012 16:24:20

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

Ответить

Владимир Владимир 27.12.2012 18:57:53

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

Ответить

Михаил Русаков Михаил Русаков 27.12.2012 19:35:06

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

Ответить

Аэтре Аэтре 23.02.2013 12:51:07

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

Ответить

Михаил Русаков Михаил Русаков 23.02.2013 13:05:21

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

Ответить

Аэтре Аэтре 23.02.2013 13:38:12

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

Ответить

Аэтре Аэтре 23.02.2013 15:56:11

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

Ответить

Михаил Русаков Михаил Русаков 23.02.2013 21:09:40

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

Ответить

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

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

Ответить

Михаил Русаков Михаил Русаков 24.02.2013 10:25:16

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

Ответить

Анна Анна 24.03.2013 17:34:39

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

Ответить

Михаил Русаков Михаил Русаков 24.03.2013 20:15:31

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

Ответить

Анна Анна 24.03.2013 23:38:29

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

Ответить

Михаил Русаков Михаил Русаков 25.03.2013 06:41:14

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

Ответить

Валерия Валерия 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> И т.д. Заранее большое спасибо за ответ! С уважением, Валерия

Ответить

Михаил Русаков Михаил Русаков 28.03.2013 15:57:23

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

Ответить

Валерия Валерия 28.03.2013 16:00:22

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

Ответить

Валерия Валерия 28.03.2013 16:05:28

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

Ответить

Михаил Русаков Михаил Русаков 28.03.2013 17:27:16

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

Ответить

Сергей Морской Сергей Морской 10.04.2013 02:27:45

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

Ответить

Михаил Русаков Михаил Русаков 10.04.2013 11:14:54

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

Ответить

Галя Кулакова Галя Кулакова 25.05.2013 19:57:38

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

Ответить

Михаил Русаков Михаил Русаков 25.05.2013 22:32:10

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

Ответить

Галя Кулакова Галя Кулакова 25.05.2013 22:36:33

спасибо

Ответить

Алина Алина 13.07.2013 20:30:43

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

Ответить

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