Компьютер

ЧП Куликов Михаил Михайлович

Тел:

+380-(50)-589-55-02

Loading
Мы в социальных сетях...

    -  Вконтакте
    -  Facebook
    -  Google+
    -  Twitter
    -  LiveJournal
    -  Я.ру
    -  Одноклассники
    -  RSS
    -  Мой Круг
    -  YouTube
Прочее...

/images/certificate_small.png

Анализ: траст сайта it-kmm.com
Внимание!!! Заработал на 100% новый сервис.

Плавное увеличение картинки при наведении на нее курсора мыши


У начинающих веб-мастеров часто возникают вопрос: как сделать так, чтобы рисунок, размещенный на веб-странице увеличивался при наведении на него курсора мыши? Например, вот так:

 

Или так:

 

Делается это все очень просто.

1.Открываем любой редактор текста (например, блокнот) и копируем в него код:

img.expando{
   border: none;
   vertical-align: bottom;
}

Теперь сохраняем файл на жестком диске компьютера, назвав его imagesize.css Скачать готовый файл imagesize.css

2. Аналогично создаем файл imagesize.js (скачать готовый файл). Вот его код:

if (document.images){
 (function(){
  var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;
  var expConIm = function(im){
   im = im || window.event;
   if (!expConIm.r.test (im.className))
    im = im.target || im.srcElement || null;
   if (!im || !expConIm.r.test (im.className))
    return;
   var e = expConIm,
   widthHeight = function(dim){
    return dim[0] * cos + dim[1] + 'px';
   },
   resize = function(){
    cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
    im.style.width = widthHeight (e.ims[i].w);
    im.style.height = widthHeight (e.ims[i].h);
    if (e.ims[i].d && times > e.ims[i].jump){
     ++e.ims[i].jump;
     e.ims[i].timer = setTimeout(resize, speed);
    } else if (!e.ims[i].d && e.ims[i].jump > 0){
     --e.ims[i].jump;
     e.ims[i].timer = setTimeout(resize, speed);
    }
   }, d = document.images, i = d.length - 1;
   for (i; i > -1; --i)
    if(d[i] == im) break;
   i = i + im.src;
   if (!e.ims[i]){
    e.ims[i] = {im : new Image(), jump : 0};
    e.ims[i].im.onload = function(){
     e.ims[i].w = [e.ims[i].im.width - im.width, im.width];
     e.ims[i].h = [e.ims[i].im.height - im.height, im.height];
     e (im);
    };
    e.ims[i].im.src = im.src;
    return;
    }
   if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
   e.ims[i].d = !e.ims[i].d;
   resize ();
  };
  expConIm.ims = {};
  expConIm.r = new RegExp('\\bexpando\\b');
  if (document.addEventListener){
   document.addEventListener('mouseover', expConIm, false);
   document.addEventListener('mouseout', expConIm, false);
  }
  else if (document.attachEvent){
   document.attachEvent('onmouseover', expConIm);
   document.attachEvent('onmouseout', expConIm);
  }
 })();
}
3. Загружаем оба файла и рисунок на сервер, например в корневой каталог сайта.

4. В нужное место страницы вставляем код (скачать zip-архив с txt-документом, содержащим код).

<link rel="stylesheet" href="/imagesize.css" type="text/css" />
<script type="text/javascript" src="/imagesize.js"></script>
<div>
<img class="expando" border="0" src="/ИМЯ ВАШЕГО РИСУНКА.jpg" width="150" height="110">
</div>

Код приведен с учетом того, что все три файла находятся в корневом каталоге, в противном случае нужно будет изменить в коде адреса файлов. Также можно изменить начальные размеры рисунков (параметры width="НАЧАЛЬНАЯ_ШИРИНА" height="НАЧАЛЬНАЯ_ВЫСОТА"). Никаких визуальных редакторов - только javascript.
Результат работы:


Источник: http://ellibr.ucoz.ru/blog/veb_masteru_plavnoe_uvelichenie_kartinki_pri_navedenii_na_nee_kursora_myshi/2011-03-13-8.



Комментарии к посту «Плавное увеличение картинки при наведении на нее курсора мыши»

  • Влад says:

    Здравствуйте!
    А каким параметром скорость анимации регулируется?
    Спасибо!

  • admin says:

    Так он так и называется — speed

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

  • Павел says:

    Здравствуйте.

    У меня на сайте ряд картинок, к которым хочу применить указанный Вами метод. К счастью, все работает, но вот такой вопрос есть — каким образом можно сделать так, чтобы, при наведении на картинку, она увеличивалась «вниз», а не «вверх»? Т.е. сейчас остальные картинки в ряду раздвигаются и смещаются вниз, а мне хочется, чтобы они просто раздвигались, без того, чтобы съезжать вниз (это сильно портит вид). Подскажите, пожалуйста, каким образом это можно сделать. Полчаса игр в гляделки с кодом не помогли (

    Спасибо!

  • Павел says:

    Здравствуйте.

    К сожалению, предложенный вами вариант (посмотрел на странице разработчика все виды) не подходит, т.к. не происходит собственно «раздвигание» ряда картинок. Не могли бы вы подсказать что нужно заменить именно в примере, указанном в этой статье, чтобы не происходило «съезда вниз» картинок, стоящих в одном ряду с увеличиваемой? Т.е. задача заключается в том, чтобы они раздвигались только по горизонтали, а нужная картинка увеличивалась не «вверх», а «вниз»?

    Спасибо.

    • admin says:

      Добавить картинкам стиль style="vertical-align: top;"

      задача заключается в том, чтобы они раздвигались только по горизонтали

      Вы наверное хотели сказать во вертикали, а не горизонтали.
      Тогда еще и не трогать атрибут width у картинок, или height, если наоборот

  • Галина says:

    Огромное Вам спасибо за данное описание, просто спасли меня. Вставила все как вы сказали и все получилось. Единственное, сначала не поняла на каком основании получается порноразмерная картинка. Она у меня не умещалась при увеличении в экране…а потом дошло, что надо уменьшить саму картинку(размер в пикселах в Paint), которая увеличивается. Сделала, ваще круто!!Если что, я новичок!

  • Петр says:

    Доброго здоровья Михаил! Подскажи если знаешь: Установил плагин NextGEN Gallery , когда хотел довавить русификатор нет папки lang в плагине, я создал ее в корне плагина и поместил туда файл, но отображается по русски только ярлык Галерея и строка Управление альбомами, что сделать для всего отображения на русском?
    Я по возрасту не особо разбираюсь, поэтому решил спросить у Гуру по этим вопросам. Бизнесом в интернет не занимаюсь, это все чисто для себя. Тем более вижу тоже Украина, я с Лисичанска. Спасибо. Мой скайп zhurbapetr01

  • Александр says:

    4. В нужное место страницы вставляем код…
    А где то нужное место находится? Подскажите. Я начинающий.

  • Антон says:

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

DT

Курсы валют:

UAH

1 USD = 24.510 24.096
1 EUR = 27.100 26.525
1 RUR = 00.396 00.356

Антивирусы в формате SaaS
Подписаться письмом

Спонсоры...

SP: Android-розробник  LF:   PP:  

ubuntu == © Куликов М.М. (2011)
Сертифицированный партнер Dr.Web Free secondary DNS uaRating Rambler's Top100 Рейтинг@Mail.ru bigmir)net TOP 100 Яндекс цитирования Ranker Рейтинг сайта в веб-каталоге misto.zp.ua TOP.zp.ua