 Увеличение картинки при наведении мышки |
| веб-мастеру | Услуги SEO | Статьи Веб-Мастера | Доменные имена | SEO Tools | whois | книги веб-мастеру |
Здравствуйте, гость ( Вход | Регистрация )
  |
| Volvoman |
 14.2.2010, 17:51
Сообщение
#16
|
|
Прохожий  Группа: Пользователи Сообщений: 2 Регистрация: 8.2.2010 Пользователь №: 3 204  |
 Спасибо все кто ответил отзывчивые люди  ...все что описано выше у меня не работает, поковырялся в исходных текстах страниц что указанны выше, и в итоге сделал что работает все...всем удачи... |
   |
 
|
| denart56 |
12.6.2010, 20:43
Сообщение
#17
|
|
Прохожий Группа: Пользователи Сообщений: 4 Регистрация: 12.6.2010 Пользователь №: 3 636 |
Цитата(Volvoman @ 8.2.2010, 21:30)  Ребят, у кого получилось, помогите разобраться. Скрипты очень нужные и суперские, но чтот у меня не получилось. Расскажите по шагово , что скачать, где именно, куда положить. 3 часа просидел, так и не разобрался. Пожалста, на вас надежда. Покажу на примере как сделал на сайте, который недавно делал: http://www.aliden.spb.ru/page.php?68, при наведении на дверь или на расцветку она увеличивается. С сайта, указанного выше http://www.sunsean.com/zoomi/ скачал два скрипта: jquery-min.js zoomi.js скачать их можно одним архивом отсюда: http://forum.nordtelecom.spb.ru/download/file.php?id=83 Причем файлы кидаем в корень сайта, там где лежит страничка на котрой будет выполняться код. Далее вот код где все описывается что откуда берем: <script type="text/javascript" src="jquery-min.js"></script> <script type="text/javascript" src="zoomi.js"> // <!-- Examples of dynamically calling zoomi --> $(function(){ $('#zoomme img').zoom1().click(function(){ $(this).zoom2().fadeIn().click(function(){ $(this).hide(); return false; }) .end().parent().addClass('red'); return false; }); for(i=1; i<=5; ++i) $('#bleach').append('<img class="zoomi" src="bleach/'+i+'.jpg" height="110">'); $('#bleach img.zoomi').zoomi(); $('.bw img') .zoom1().mouseover(function(){ $(this).zoom2().fadeIn(); }) .zoom2().mouseout(function(){ $(this).fadeOut(1600); }); }); </script> Это нужно поместить между <head> </head> вашей странички. <img class="zoomi" src="ваша картинка" width="хх" height="хх" border="х" align="хх" > А это код самой картинки. Да чуть не забыл, у меня скрипт не работал, когда я указывал тег alt="ххххххх". Надеюсь Вы заметите что делали неправильно. |
|
|
|
| Rayne |
3.9.2010, 13:54
Сообщение
#18
|
|
Прохожий Группа: Пользователи Сообщений: 1 Регистрация: 3.9.2010 Пользователь №: 3 898 |
Добрый день всем, с примера приведенными тут разобрался, спасибо всем.
Вопрос еще, а как сделать чтоб было как тут http://www.marina-kamenovskaya.ru/index-2.html ?? |
|
|
|
| Quansh |
11.11.2010, 4:05
Сообщение
#19
|
|
Прохожий Группа: Пользователи Сообщений: 1 Регистрация: 11.11.2010 Пользователь №: 4 119 |
Всем привет! Поставил на сайт этот скрипт, все получается, кроме четвертого варианта, когда картинка увеличивается при нажатии..не могли бы вы написать коды html и css, которые надо вставить в страницу, а то все перепробовал и никак((
|
|
|
|
| Azleea |
14.1.2011, 18:55
Сообщение
#20
|
|
Прохожий Группа: Пользователи Сообщений: 1 Регистрация: 14.1.2011 Пользователь №: 4 303 |
Скачала скрипты...решила попробовать сделать, так как написано в примерах...у меня ничего не получилось. Вот код моей исходной страницы...может я делаю что-то не так?
<html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head><title>zoomi</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="zoomi.js"></script> <script type="text/javascript"> // <!-- Examples of dynamically calling zoomi --> $(function(){ $('#zoomme img').zoom1().click(function(){ $(this).zoom2().fadeIn().click(function(){ $(this).hide(); return false; }) .end().parent().addClass('red'); return false; }); for(i=1; i<=5; ++i) $('#bleach').append('<img class="zoomi" src="bleach/'+i+'.jpg" height="110">'); $('#bleach img.zoomi').zoomi(); $('.bw img') .zoom1().mouseover(function(){ $(this).zoom2().fadeIn(); }) .zoom2().mouseout(function(){ $(this).fadeOut(1600); }); }); </script> </head> <body> <!-- Simgle image mode --> <img class="zoomi" scr="Gryffindor.jpg" style="width:200px;"> </body> </html> |
|
|
|
| wwwlena |
18.2.2011, 14:36
Сообщение
#21
|
|
Прохожий Группа: Пользователи Сообщений: 1 Регистрация: 18.2.2011 Пользователь №: 4 438 |
Спасибо EGORR! мне тоже увеличение надо было, с твоими доходчивыми объяснениями все заработало! :-)
|
|
|
|
| mamekh |
9.8.2011, 1:37
Сообщение
#22
|
|
Прохожий Группа: Пользователи Сообщений: 1 Регистрация: 9.8.2011 Пользователь №: 5 122 |
На этой странице, http://ellibr.ucoz.ru/blog/veb_masteru_pla...hi/2011-03-13-8 , еще один пример скрипта для увеличения картинки при наведении на нее курсора.
|
|
|
|
| Affortsit |
27.11.2011, 19:19
Сообщение
#23
|
|
Новичок Группа: Пользователи Сообщений: 6 Регистрация: 4.6.2011 Пользователь №: 4 881 |
Широкая река спокойна, образованный человек скромен.
-------------------- Исцеление Семь рек осушила, холста не смочила.
|
|
|
|
 |
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0
|
Текстовая версия | Сейчас: 9.2.2012, 12:51 |
Русская версия Invision Power Board
v2.1.7 © 2012 IPS, Inc.