 Увеличение картинки при наведении мышки |
| веб-мастеру | Услуги SEO | Статьи Веб-Мастера | Доменные имена | SEO Tools | whois | книги веб-мастеру |
Здравствуйте, гость ( Вход | Регистрация )
  |
| liliya1919 |
  20.1.2009, 14:42
Сообщение
#1
|
|
Новичок  Группа: Пользователи Сообщений: 6 Регистрация: 1.6.2008 Пользователь №: 866  |
Люди!! Очень прошу,помогите !!!
Мне нужно чтобы при наведении мышки на маленький вариант картинки появлялась большая картинка. Как вот тут. http://www.templatemonster.com/ Облазила весь инет. Много всего перепробовала. Ничего не выходит=(( Объясните чайнику плиз КАК по-шагово сделать такой эффект???? Плиииз.очень нужно! |
   |
 
|
| EGORR |
20.1.2009, 16:08
Сообщение
#2
|
|
Продвинутый Группа: Свои Сообщений: 202 Регистрация: 10.1.2008 Пользователь №: 492 |
Цитата(liliya1919 @ 20.1.2009, 11:42)  Люди!! Очень прошу,помогите !!! Мне нужно чтобы при наведении мышки на маленький вариант картинки появлялась большая картинка. Как вот тут. http://www.templatemonster.com/ Облазила весь инет. Много всего перепробовала. Ничего не выходит=(( Объясните чайнику плиз КАК по-шагово сделать такой эффект???? Плиииз.очень нужно! Приведенный пример сделан на script.aculo.us Вики по нему здесь. Демо и how to здесь. Почти то что ты хочешь здесь. Можешь использовать jQuery Tooltip Plugin Демо здесь. Или jTip - The jQuery Tool Tip Демо здесь. Или clueTip : A jQuery Plugin How to здесь. |
|
|
|
| liliya1919 |
20.1.2009, 20:01
Сообщение
#3
|
|
Новичок Группа: Пользователи Сообщений: 6 Регистрация: 1.6.2008 Пользователь №: 866 |
|
|
|
|
| EGORR |
20.1.2009, 20:48
Сообщение
#4
|
|
Продвинутый Группа: Свои Сообщений: 202 Регистрация: 10.1.2008 Пользователь №: 492 |
Цитата(liliya1919 @ 20.1.2009, 17:01) Для тех кто в танке... Идешь на эту страницу. Ищешь Read More. Открывается мануал как это сделать. Вот этот ман. Я даже переведу Using zoomi is easy.(Не парься, liliya1919, это проще чем кажется) Go get jQuery if you haven't already done so. (Скачай jQuery, если еще не скачала) Download the script and include the following code in the <head> (Загрузи, и прилинкуй в голову страницы линком как показано) <script type="text/javascript" src="zoomi.js"></script> Now any <img> that you give the class="zoomi" to, will automatically turn into a zoomi image. Zoomi uses the alt="url" attribute to provide the url of the zoom2 image. Here is an example: (Таперича любой тег <img> , который поимеет класс "zoomi" станет автоматом изменять размер. Наш скрипт использует атрибут alt="url" для указания адреса второй картинки. Как на примере) <img class="zoomi" src="image1.jpg" alt="image2.jpg"> Zoomi also supports using one image. This allows you to save bandwidth, and makes creating thumbnails easy. Here is an example: (Наш скрипт также поддерживает использование одной картинки. Это помогает экономить трафик и сделает создание превьюшек простым и приятным. Смотри пример) <img class="zoomi" src="image.jpg" width="180"> For more examples, view the source code of this page.(Если вы до сих пор в танке, смотрите исходный код этой страницы.) |
|
|
|
| liliya1919 |
22.1.2009, 16:41
Сообщение
#5
|
|
Новичок Группа: Пользователи Сообщений: 6 Регистрация: 1.6.2008 Пользователь №: 866 |
А что такое download Zoomi. Т.е. зачем его "качать" и куда его вставлять?
|
|
|
|
| liliya1919 |
22.1.2009, 16:51
Сообщение
#6
|
|
Новичок Группа: Пользователи Сообщений: 6 Регистрация: 1.6.2008 Пользователь №: 866 |
// $(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(''); $('#bleach img.zoomi').zoomi(); $('.bw img') .zoom1().mouseover(function(){ $(this).zoom2().fadeIn(); }) .zoom2().mouseout(function(){ $(this).fadeOut(1600); }); });
когда я вставляю в голову страницы этот код. то он отображается в шапке страницы. почему? |
|
|
|
| sa†ana |
26.1.2009, 10:18
Сообщение
#7
|
 Продвинутый Группа: Супер Модераторы Сообщений: 232 Регистрация: 11.5.2007 Из: World Wide Web Пользователь №: 81 |
Потомучто не должен=)
-------------------- |
|
|
|
| fadey |
8.4.2009, 14:24
Сообщение
#8
|
|
Прохожий Группа: Пользователи Сообщений: 4 Регистрация: 19.2.2009 Пользователь №: 1 746 |
Делал все по инструкции. не увеличивает(
|
|
|
|
| John 3D |
4.5.2009, 23:07
Сообщение
#9
|
|
Прохожий Группа: Пользователи Сообщений: 1 Регистрация: 4.5.2009 Пользователь №: 2 082 |
У меня тоже не получается, я загруженый код скрипта, сохранил как zoomi.js и положил в корневую папку, и вписала исходный код где указан имено этот скрипт zoomi.js, но после сохранения и подстовления своих картинок у меня не увеличиваются картинки, почему может я неправельно задал имя скрипту? Какие скрипты и под какими имена они должны лежать в корневой папке будьте добры подскажите чтобы все работало правельно, мне очень этот скрипт понравился, помогите)))
|
|
|
|
| Prefix |
14.5.2009, 15:27
Сообщение
#10
|
|
Прохожий Группа: Пользователи Сообщений: 1 Регистрация: 14.5.2009 Пользователь №: 2 128 |
Кроме zoomi.js нужно скачать и положить рядом jquery-1.3.2.min (скачать по ссылке Download Zoomi) или jquery.js если найдете.
Для примера эти скрипты, Картинки и HTML файл ложите в одну директорию в корень сайта, потом когда заработает настроите пути куда надо. теперь сделайте ссылки на оба скрипта. Причем сначала на jquery-1.3.2.min (или jquery.js) и только потом на zoomi.js!!! ПРИМЕР для index.htm: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <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> </head> <body> <img class="zoomi" src="Sea.jpg" width=80 alt="Fly.jpg" > <!-- Simgle image mode --> <img class="zoomi" src="Vegetable.jpg" width=80 > </body></html> Заработает!!! |
|
|
|
| storm |
13.9.2009, 15:00
Сообщение
#11
|
|
Новичок Группа: Пользователи Сообщений: 7 Регистрация: 13.9.2009 Пользователь №: 2 684 |
Цитата(liliya1919 @ 20.1.2009, 12:42) Люди!! Очень прошу,помогите !!! Мне нужно чтобы при наведении мышки на маленький вариант картинки появлялась большая картинка. На своем сайте я использовал нечто похожее на то, что тебе нужно. Зайди на него и посмотри html-код страницы, на которой использован скрипт (раздел "картинки"). Чтобы воспользоваться этим скриптом необходимо сделать две вещи: 1. Скопировать сам скрипт (заключен в тегах <script> </script>) 2. Скопировать строку вызова скрипта на обработку картинки Пример строки вызова: <a href="#" onmouseover="doTooltip(event,0)" onmouseout="hideTip()"> <img src="Маленькая картинка.расширение"> </a> 3. Изменить в (1.) и (2.) параметры массива array, т.е. подставить свои названия картинок + пути к ним+ цвет фона, на котором будет распологаться увеличенная картинка. Настройки данного скрипта интуитивно понятны любому пользователю, который хоть немного умеет програмировать на любом языке, от pascal и basic до javascript и php. Вот адрес моего сайта: http://ktulhu-medved.narod.ru/ |
|
|
|
| gid |
13.9.2009, 15:08
Сообщение
#12
|
|
Администратор форума Группа: Главные администраторы Сообщений: 771 Регистрация: 27.11.2006 Из: Россия Пользователь №: 1 |
Цитата На своем сайте я использовал нечто похожее на то, что тебе нужно. Из-за использования фреймов в 10 опере выглядит, мягко говоря, некрасиво... при наведении картинка расположена справа от курсора мыши, и часть ее оказывается под соседним фреймом.... как вариант, можно сделать автоматическое определение того, с какой стороны от курсора показывать картинку... хотя идеальный вариант ориентироваться по позиции самой картинки в документе, что бы однозначно избежать проблем с отображением. -------------------- В своей работе я использую:
∙ Sape - для купли/продажи ссылок со страниц сайтов  ∙ Miralinks и Advego - для купли/продажи рекламных статей∙ SEOBudget и CS Yazzle - для оценки бюджета ∙ SeoPult - для автоматического продвижения (когда ленюсь)∙ HT-Systems - надежный хостинг, для больших сайтов Хочу жить на о.Самуи ***** Мониторинг позиций сайтов ***** Создание сайтов и их поисковая оптимизация  |__| RU-домены за 170 рублей |__| SU-домены за 460 рублей |__| |
|
|
|
| storm |
13.9.2009, 17:26
Сообщение
#13
|
|
Новичок Группа: Пользователи Сообщений: 7 Регистрация: 13.9.2009 Пользователь №: 2 684 |
Цитата Из-за использования фреймов в 10 опере выглядит, мягко говоря, некрасиво... Согласен, но что делать, если хостинг бесплатный, а там нет php? Так что правильное отображение возможно тольео в IE...((( Цитата хотя идеальный вариант ориентироваться по позиции самой картинки в документе, что бы однозначно избежать проблем с отображением Не подскажешь, как это сделать? |
|
|
|
| romashka_ks* |
15.1.2010, 23:43
Сообщение
#14
|
 Прохожий Группа: Пользователи Сообщений: 1 Регистрация: 15.1.2010 Пользователь №: 3 116 |
Цитата(Prefix @ 14.5.2009, 15:27) Кроме zoomi.js нужно скачать и положить рядом jquery-1.3.2.min (скачать по ссылке Download Zoomi) или jquery.js если найдете. Для примера эти скрипты, Картинки и HTML файл ложите в одну директорию в корень сайта, потом когда заработает настроите пути куда надо. теперь сделайте ссылки на оба скрипта. Причем сначала на jquery-1.3.2.min (или jquery.js) и только потом на zoomi.js!!! ПРИМЕР для index.htm: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <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> </head> <body> <img class="zoomi" src="Sea.jpg" width=80 alt="Fly.jpg" > <!-- Simgle image mode --> <img class="zoomi" src="Vegetable.jpg" width=80 > </body></html> Заработает!!! Спасибо вам большое! Лично у меня заработало!  а вот пример с сайта http://www.sunsean.com/zoomi/ №3, там где картинка с девушкой по клику увеличивается, у меня никак не выходит.... скопировала часть исходного кода страницы и что-то у меня не то, а понять что не могу.. при нажатии на маленькое изображение открывается что угодно, только не увеличенное изображение.. (( --------------------  |
|
|
|
| Volvoman |
8.2.2010, 21:30
Сообщение
#15
|
|
Прохожий Группа: Пользователи Сообщений: 2 Регистрация: 8.2.2010 Пользователь №: 3 204 |
Ребят, у кого получилось, помогите разобраться. Скрипты очень нужные и суперские, но чтот у меня не получилось. Расскажите по шагово , что скачать, где именно, куда положить. 3 часа просидел, так и не разобрался. Пожалста, на вас надежда.
|
|
|
|
 |
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0
|
Текстовая версия | Сейчас: 9.2.2012, 12:50 |
Русская версия Invision Power Board
v2.1.7 © 2012 IPS, Inc.