Увеличение картинки при клике
Описание: Очень простой скрипт на языке JavaScript, который требуется очень часто. Действительно, обычно картинки на сайте обладают небольшим размером, чтобы не увеличивать их до такого размера, когда это смотрится уже, как минимум, некрасиво. Однако, очень часто пользователи хотят увеличить картинку, и вот для их удобства и был сделан этот простой скрипт.
Результат: Кликните на любую фотографию. Если кликните ещё раз, то она вернётся в исходное состояние (P.S. На фото не я, а мой одногруппник).
Фото 1 |
Фото 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> -
Создано 13.12.2010 13:20:40
-
Михаил Русаков
Комментарии (119):
А куда вставлять этот скрипт ?
Ответить
На страницу, на которой Вы хотите, чтобы был такой эффект. Соответственно, между тегами <head> и </head> нужно вставить сам скрипт. А между <body> и </body> вставить картинки с обязательным атрибутом "onclick="changeSizeImage(this)".
Ответить
Вставил всё правильно, Всё вроде бы работает, но не верно. Картинка почему то увеличивается только в одну сторону.. Меняя значения, добиваюсь того же результата.. только уже по горизонтали.. Что добавить в код? Что бы картинка увеличивалась и уменьшалась по обеим сторонам?
Ответить
Здравствуйте Михаил! Помогите пожалуйста! У меня такая проблема: не могу я понять, как написать скрипт что бы изображение открывалось не так как вы показали на примере, а в отдельном окне. Я только начинаю изучать всю эту примудрость."Сражаюсь" с этим скриптом уже вторую неделю... С нормальным описанием действй нашла только у вас, но не совсем то.Помогите пожалуйста!!!
Ответить
В функции changeSizeImage() удалите все строки, а взамен поставьте эти var win = "width=600,height=600,menubar=no,location=no,resizable=yes,scrollbars=yes"; newWin = window.open(im.src,"newWin",win); newWin.focus();
Ответить
Спасибо,попробую...
Ответить
Простите еще раз!Наверно не суждено мне освоить этот прием :( Не получается. Если не сложно,напишите пожалуйста на вашем примере, как правильно это сделать ( что,где удалить и что,куда подставить).Простите еще раз:(((
Ответить
Код 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> ничего трогать не надо.
Ответить
я сделала как вы написали,все получилось,но почему картинка маленькая,а не увеличенная?
Ответить
Тут два варианта: 1. Увеличьте width и height (то есть вместо 600 поставьте, например, 1000). 2. Оригинальный размер самой картинки маленький (вот это скорее всего).
Ответить
А как сделать картинку ссылкой? Добавляю <a href = "">, тогда картинка не увеличивается...
Ответить
Так как картинка увеличивается при клике, то здесь необходимо решить: либо она будет увеличиваться при клике, либо переходить по ссылке при клике. По-другому, никак. Можно лишь изменить условия увеличения картинки, например, увеличивать при наведении мыши, а при клике переходить.
Ответить
Здравствуйте Михаил! Подскажите,как сделать так,что бы маленькая картинка в самом верху страницы повторялась
Ответить
Не очень понятна фраза "что бы маленькая картинка в самом верху страницы повторялась".
Ответить
Боюсь,что не смогу правильно объяснить( Есть шаблон. Он состоит из отдельных рисунков.Один из них находится на самом верху страницы образуя сплошную лнию.А в оригенале он 113х74.Как сделать что бы рисунок не меняясь занял всю ширину страницы? Извините за сумбурный ответ..
Ответить
Если Вы имеете ввиду растянуть один рисунок на всю страницу, то с помощью атрибута width тега <img>. Например, так: <img src = 'header.jpg' width = '100%' /> Если нужно сохранить оригинальную высоту, то так: <img src = 'header.jpg' width = '100%' height = '74' />
Ответить
Если делать так:<img src = 'header.jpg' width = '100%' height = '74' />, то получается ужас. Изображение растягивается.А в оригинале оно как бы повторяется(словно многократно копируется)
Ответить
Можно тогда воспользоваться CSS-свойством background: "background: url('header.jpg') repeat-x;".
Ответить
А где прописывать "background: url('header.jpg') repeat-x;".?
Ответить
Вместо тега <img> используйте <div id = 'header'></div> а в файле CSS-стилей добавьте такой код: #header { background: url('header.jpg') repeat-x; }
Ответить
Здравствуйте Михаил! Хочу создать простенький сайт.Знаний (пока что) минимум.Есть программа FrontPage.Посоветуйте с чего начать и та ли эта программа для начинающего?
Ответить
Простенький сайт можно создать на FrontPage, либо на Dreamweaver. О качестве, безусловно, говорить не приходится. Можно также создать сайт на Joomla. Всё это для начинающих.
Ответить
можно ли размещать сайт созданный в FrontPage на платном сервере? Если да,то какой по вашему мнению лучше?
Ответить
FrontPage помогает лишь создать сайт, а где размещать его - это уже другой вопрос. Из платных вариантов могу посоветовать Yutex. На данный момент этот сайт находится на их хостинге.
Ответить
Здравствуйте, Михаил. У меня проблема, помогите пожалуйста) Я вставила вот такой код : <a href="/_imager/Image/dom 130.jpg" rel="lightbox[roadtrip]"><img width="200" height="150" border="0" alt="" src="/_imager/Image/dom 130.jpg" /> Но картинка при нажатии по размерам остается прежней. Как с моим кодом сделать так, чтобы при нажатии картинка была больше.
Ответить
Здесь нет кода вообще. Если Вы хотите, как в данной статье, то тогда надо убрать тег <a> и добавить в <img> событие onclick. Если же Вы хотите, чтобы при клике по изображению открывалась новая страница с этим изображением, то тогда закройте после .../> тег </a>, потому что он у Вас сейчас не закрывается.
Ответить
Мне все равно не понятно) хотя все очень просто написано. Куда вставлять ... и вставлять одно слово onclick? В итоге это как должно выглядеть?
Ответить
Примерно так: <img src="foto1.jpg" height="150" onclick="changeSizeImage(this)" />
Ответить
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.
Ответить
Для начала второй вопрос. Чтобы размер картинки был больше надо изменить 300 на, например, 600. Что касается первого вопроса, то здесь посложнее. Надо создать большое изображение с каким-нибудь id. Затем при клике по маленькому изображению вызывается функция. В этой функции считывается src изображения, по которому кликнули и передаётся src на то большое изображение с id.
Ответить
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.
Ответить
Ширину задавать можно в теге img с помощью атрибута width. То есть там имеется height, а можно ещё написать width. В JavaScript (не Java!!!) im.width = 500; - вот так можно менять ширину. Что касается скрипта, то я, пожалуй, напишу об этом небольшую статью, потому что Вы не первый, кто просит нечто подобное. Но напишу через 1.5 - 2 недели, так как скоро госэкзамен, а к нему следует готовиться.
Ответить
Ok, spasibo, ydachi na gosah;-)
Ответить
Здравствуйте Михаил! Подскажите пожалуйста, как сделать чтобы картинка увеличивалась как в вашем примере с галереей, ну или даже как в этом примере, но увеличивалась она на свой реальный размер а не на тот который зафиксирован в коде ?
Ответить
Вот здесь реализовывалось нечто подобное, но только изображение открывалось в новом окне: http://myrusakov.ru/javascript-image-newwindow.html
Ответить
благодарю! попробую сделать так но с галереей. случайно на Ваш сайт наткнулся и уже нравится :)
Ответить
Здравствуйте, Михаил! Спасибо за статью! Подскажите, пожалуйста, как сделать на вашем примере, чтобы при клике на вторую картинку, первая уменьшалась, т.е. одновременно могла быть увеличена только одна?
Ответить
Надо добавить ещё одно поле (сразу после small_size): active_img, куда сохранять текущее увеличенное изображение. Затем при щелчке по картинке, у active_img выставлять маленький размер, а у новой картинки большой размер, причём в active_img записать теперь эту большую картинку.
Ответить
Михаил, а как бы мне сохранить текущее изображение в переменную js, если оно выводится переменной php в цикле - <img src="images/colors/<?php echo $options_color['base_var'] ?>.png"> ?
Ответить
Аналогично тому, как в примере. Вызываем функцию, передавая this.
Ответить
Извините, не доходит)) JS со мной не очень дружит. К тегу img я добавляю еще одно событие onclick: onclick="changeImageActive(<?php echo $options_color['base_var'] ?>)" Так? А как сохранить не поняла... var activeimg = '?';
Ответить
Нет, HTML вообще трогать не надо, оставьте всё как есть. Менять надо только JavaScript. Добавить переменную, в которую сохранять объект, переданный в функцию: active_img = im;
Ответить
Тогда получается, что active_img.height равняется im.height. Как тогда отличить сохраненную картинку от новой? function changeSizeImage(im) { activeimg.height = smallsize; //активную уменьшаю im.height = bigsize; // вроде как новую увеличиваю activeimg = im; // это я увеличенную сохраняю в активную? } Бред написала, так ничего не работает))
Ответить
В общем, всё понятно, не понимаете. В понедельник напишу эту статью.
Ответить
Спасибо огромное!!! :)
Ответить
Михаил, здравствуйте! Спасибо большое за замечательный скрипт. Подскажите, пожалуйста, а как сделать так, что бы картинка , увеличиваясь в размерах, не расширяла всю страницу. Другими словами чтобы увеличиваясь, она просто заслоняла все остальные картинки, находящиеся в одном с ней ряду. Понятно,что можно использовать ваш скрипт с показом картинки в новом окне, но получается не очень красиво - видны очертания окна, а хочется чтобы была только картинка...Надеюсь удалось объяснить мысль.. С уважением, Ольга
Ответить
Для этого надо поставить у картинок через CSS такое свойство: position: absolute;
Ответить
Михаил Здравствуйте! Спасибо за понятный код. Первый раз когда пробовала, всё получилось, а теперь на картинку кликаю, а она не увеличивается. Что не так.Спасибо! <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>
Ответить
В моём примере функция называется changeSizeImage(), а в Вашем коде вызывается changeSizeOneImage(). Если Вы копировали JS-код у меня, то в неправильном названии вызываемой функции и заключается ошибка.
Ответить
Михаил, спасибо за ответ. Я брала код HTML, когда исправила ошибку- у меня также при клике на фотографию она не увеличивается. Если я правой клавишей вызыв. меню и открыть изображение-то фото увеличенное открывается отдельно на новой странице. С Уважением Татьяна.
Ответить
Исправьте onclick="changeSizeOneImage(this)" на onclick="changeSizeImage(this)"
Ответить
Михаил, здравствуйте! Ура, я нашла ошибку- я просто вставляла один код для HTML и у меня ничего не получалось, а я добавила в <head></head> ещё код Java Script и у меня все получилось. Спасибо. Только мне бы убрать между картинками пробелы- так как у меня их несколько.
Ответить
Здравствуйте Михаил. Подскажите пожалуйста как мне сделать увеличение фото как на этом сайте: http://playboys.uz/2012/anonsirovany-videokarty-radeon-hd77707750/
Ответить
Тут нужно JQuery, без него будет долго и трудно. Есть специальный плагин, названия не помню, поэтому поищите в google.
Ответить
Спасибо за информацию.
Ответить
Скрипт будет полезнее, если увеличение будет при наведении мыши. А так отличный скрипт!
Ответить
Работаю с div и не получается (( <div class="choise"><h1><img src="Images/Curtaine.png" height="150" onclick="changeSizeImage(this)" title="кликните мышкой" /></h1></div> Картинка не увеличивается. В чем проблема?
Ответить
Зачем картинку в h1 засунули?
Ответить
убрала, но все равно не работает (
Ответить
Тогда значит что-то неправильно скопировали, потому что код теперь точно правильный. Можете попробовать убрать временно div, но вряд ли поможет.
Ответить
вот привожу пример своего скрипта: <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{} Проверила на сто рядов, но не увеличивается картинка и всё.
Ответить
О чём я и говорил, плохо скопировали. Тег <script src="script.js" > не закрыт.
Ответить
Да все равно не помогает, главное без div работает .... а мне надо именно с div.. В чем может быть причина?
Ответить
div.choise {height: 100px; - уберите это.
Ответить
Добрый день!Подскажите пожалуйста я создала свой сайт на народе, и мне понравилось как вы сделалаи увеличение картинки по фото, но почему-то после повторного клика фотка не возвращаеться к прежнему размеру а уменьшаеться ещё в ширину, у вас на сайте тоже также, а как сделать чтобы она увеличивалась а потом уменьшалась до прежнего размера.Заранее спасибо!
Ответить
В ширину она не уменьшается, проверил. Браузер Firefox 11.0
Ответить
я смотрела в опере, сейчас зашла с хрома все отлично.А я целый день мучалась с этой фоткой думала у меня что-то не так.Спасибо Вам большое!!!
Ответить
Здравствуй Михаил! у меня такая проблема я вставил вот этот скрипт : <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:и у меня почему та фото не увеличивается скажите почему?!
Ответить
Здесь нет скрипта, здесь только HTML-код, потому ничего и не работает.
Ответить
Михаил ,если не трудно - ты бы мог дать мне скрипт а то очень нужно...
Ответить
В статье он имеется.
Ответить
а всё спасибо я тупанул немного )Просто нам в школе задали сделать сайт через html - вот мы щяс все и делаем и в школе и дома ...А не подскажешь как сделать чтобы сайт видели другие люди ?!
Ответить
http://myrusakov.ru/site-to-internet.html
Ответить
Здравствуй ещё раз - у меня вот такой вопрос - я скачал сайт(готовый шаблон - вообще всё есть что надо мне - но вот как я начинаю менять текст с английского на русский , то у меня после этого текст какой то вообще не понятный становится ) что за фигня - и как её исправить?
Ответить
Надо кодировку соблюдать. Если шаблон в UTF-8, значит, надо писать текст в этой кодировке, а не в какой-нибудь кириллице.
Ответить
а как мне теперь эту проблему исправить?подскажи пожалуйста...
Ответить
Для начала сравните кодировку документа и какую кодировку выставляет браузер. Преобразуйте в эту кодировку (которую выставляет браузер) файл.
Ответить
А как мне заменить кодировку в текстовом файле - в котором написан сайт?
Ответить
Через Notepad++ в меню "Кодировки" выберите "Преобразовать в ...", там и выберите необходимую кодировку.
Ответить
Щяс попробую...
Ответить
Всё спасибо большое ...всё получилось
Ответить
Благодарю! Все отлично получилось. Вопрос: как сделать, чтобы при наведении курсора на маленькую картинку стрелка была в виде лупы с плюсом, а при наведении на большую картинку лупа с минусом. Буду очень благодарна. С Уважением Людмила Украина, Харьков.
Ответить
cursor: url("zoom.cur") - через стиль можно добавить. А вот дальше нужно менять значение свойства cursor в JavaScript в зависимости от того, какой размер имеет изображение: большое или маленькое..
Ответить
Благодарю, что ответили. Буду разбираться. Хорошего дня и настроения!
Ответить
Уважаемый Михаил. Опираясь на Ваши готовые скрипты, (за что большое спасибо!) я использую у себя вариант когда, при клике на любой из ряда уменьшенных картинок, появляется ее же отображение в отдельном но большем окне, помещенном на той же страничке сайта. Одна проблема которую я не смог решить: как сделать так, чтоб "под" либо "над" либо "рядом" с увеличенной картинкой появлялось ее текстовое описание - каждое для своей картинки? Думаю такой скрипт был бы очень полезен не только для меня одного! Спасибо.
Ответить
В данном скрипте прямо под картинкой есть её описание.
Ответить
Здраствуйте Михаил. Подскажите как сделать так,что бы картинка увеличивалась не при клике, а при наведении курсора.Спасибо.
Ответить
Поставить обработчик onmouseover вместо onclick.
Ответить
Спасибо.Получилось.А нет такой команды что бы навел курсор увеличилась картинка убрал с неё уменшилась.С командой onmouseover навел увеличилась а что бы уменшилась курсор нужно убрать с фото а потом вновь навести на него. Спасибо.
Ответить
Поставьте обработчик onmouseout, где вызовите функцию, уменьшающую изображение обратно.
Ответить
Михаил, здравствуйте. Ваш скрипт работает корректно, спасибо. А подскажите, пожалуйста, можно ли сделать так, чтобы при увеличении картинка оказывалась в определенном заданном месте таблицы? И как это сделать?
Ответить
Можно, для этого надо установить пустое изображение в этом месте. Затем при клике поменять значение src этого пустого изображения на src того изображения, по которому кликнули.
Ответить
Я уже нашел нужный мне скрипт у Вас же на сайте) Огромное Вам спасибо, Ваш сайт для нас, неумелых программеров, настоящее спасение)
Ответить
Михаил, простите, не нашел, как еще с Вами можно связаться, поэтому спрошу здесь. Вы не подскажете, можно ли сделать так, чтобы взятое из базы слово было разделено скриптом на буквы, а потом каждой букве присвоена картинка? Это нужно для того, чтобы генерировать слова в заголовках.
Ответить
Можно, но вопрос странный. Писать здесь много, но всё тривиально, поэтому если JS не знаете, то учите, если знаете, то не вижу никаких проблем в написании этого скрипта. Безусловно, начальное слово из базы вернёт PHP.
Ответить
Здравствуйте, подскажите пожалуйста как быть, взял ваш скрипт, всё работает, картинки располагаются в 2 столбца, так вот один столбец всегда увеличенный, то есть приходиться уменьшать его нажатием, второй работает нормально, как решить проблему?? Спасибо за ответ))
Ответить
Если не видите подобных проблем у меня, значит, ищите ошибку у себя. И не забывайте, что изначально изображение должно быть маленьким. Для этого задаются width и height.
Ответить
Здравствуйте.Такой вопрос:у вас и миниатюра и увеличенная картинка открываются по центру,а как сделать,чтобы исходная картинка была слева по умолчанию,а увеличенная уже по центру открывалась?
Ответить
Создать в центре пустой (src="") img с большим размером, в котором при клике на картинку менять атрибут src на тот, который у картинки, по которой кликнули.
Ответить
а можете это кодом прописать?
Ответить
http://myrusakov.ru/javascript-gallery-slideshow.html - вот это за основу, но если JS не знаете, то не получится использовать.
Ответить
Михаил, здравствуйте! Спасибо большое за замечательный скрипт, но есть вопрос. Его уже задавали, но так как я новый человек в данном направлении, не совсем разобралась. Я пыталась сделать так, что бы картинка, увеличиваясь в размерах, не расширяя всю страницу, тоесть чтобы увеличиваясь, она просто заслоняла все остальные картинки, находящиеся рядом с ней. Вы писали что нужно поставить у картинок через 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> И т.д. Заранее большое спасибо за ответ! С уважением, Валерия
Ответить
В тег img надо вставлять это свойство.
Ответить
Сейчас попробую! Спасибо)
Ответить
Не получилось, теперь все картинки сьехали одна на другую... Я прописала: <img src="images/images/1.jpg" height="200" onclick="changeSizeOneImage(this)" style="position: absolute;"/> Подскажите, что не так?
Ответить
Тогда только регулируя свойства top и left у изображений. position: absolute тоже оставить.
Ответить
Отличный скрипт. Попробовал без таблицы, маленькая картинка относительно большой съезжала вниз. А с таблицей маленькая и большая картинки находятся на одной линии(так, конечно, красивее смотрится). В этом и есть смысл таблицы?
Ответить
Таблицы и сделаны для выравнивания элементов по вертикали.
Ответить
А почему после вставления скрипта мой код становится невалидным, и показывает ошибки в <script language = "JavaScript">
Ответить
Пишите <script type="text/javascript">
Ответить
спасибо
Ответить
Здравствуйте. У меня возникла такая проблема: после того как я сделала увеличение картинок, они все роспологаются в один ряд и автоматично расширяют страницу по ширине. А как сделать чтобы картинки были в 2 и больше ряда???Большое спасибо.
Ответить
Михаил,здравствуйте! Создал по вашему уроку инет-магазин! хочется внести дополнения,по вашему скрипту вроде все понятно..но не все, мы картинку получается растягиваем?но тогда получается качество теряется..или мы вставляем в папку img два изображения основное и увеличенное?
Ответить
Здравствуйте, как сделать ,что бы на одной странице картинки увеличивались по-разному?!
Ответить
Здравствует Михаил, у меня проблема с скриптом http://myrusakov.ru/uvelichenie-kartinki-klik.html, я его вставляю, оно работает правильно, все OK, но мне нужна чтобы скрипт параметр height получал от scc, так как в html вставляя параметр height код будет не валидным, что только не пробовал, не получается: Помогите если не трудно Спасибо.
Ответить
Держите: <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.: Михаилу спасибо за скрипт)
Ответить
Здравствуйте Михаил Помогите понять а если путь до картинке в масcиве вот так <img alt= "" src="<?php echo $filesall[$idfilesall]; ?> " height="150" onclick="changeSizeImage(this)" /> У меня так не работает может поможете.
Ответить
Доброго времени суток. Помогите понять, в вашем коде переменные var bigsize и smallsize сделаны вне функции. В моем понимании при щелчке на кнопку вызывается функция и соответственно выполняется код который внутри функции, а как связаны между собой img и переменные bigszie и smllsize? Внутри функции сразу указано что если im равно bigsize то присвоить ей значение переменной smalsize иначе наоборот. Не могу понять как это срабатывает? Ведь мы не где не указывали что если первый клик то присвоить bigsize. Пожалуйста объясните подробнее.
Ответить
Поясните пожалуйста эту функцию {if (img.height==bigsize) img.height=smallsize else img.height=bigsize; }
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.