Главная » Создание сайтов » Верстка » Плавное увеличение картинки при наведении курсора

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

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

Раньше я писал об увеличение картинки при наведении при помощи css. Но она была не доработана.

Совсем недавно, мне требовалось сделать что-то похожее, только на jQuery. И я доделал тот пример и добавил эффекты при помощи jQuery. Вообщем у меня получилось два варианта:

  1. С использованием CSS, без jQuery.
  2. С использованием CSS и jQuery.

Сейчас я покажу вам два варианта.

1. С использованием CSS, без jQuery

Html код:

<a class="st" href="javascript:">
<div class="img"><img src="http://bitby.net/wp-content/uploads/2008/12/0000050.jpg" alt="" title="" /></div>
</a>

Css стили:

a.st .img{width:100px;height:124px;overflow:hidden;}
a.st .img img{width:100px;height:124px;}
a.st:hover .img{width:100px;height:124px;overflow:visible;visibility:hidden;}
a.st:hover .img img{visibility:visible;width:250px;height:274px;position:absolute;z-index:150;}

По сравнению с вариантом в прошлой статье, этот не раздвигает другой html вокруг. То есть картинка сама по себе, но в то же время, за ней закреплено место для маленькой картинки.

2. С использованием CSS и jQuery

Здесь мы оставим html код таким же, как и в предыдущем примере:

<a class="st" href="javascript:">
<div class="img"><img src="http://bitby.net/wp-content/uploads/2008/12/0000050.jpg" alt="" title="" /></div>
</a>

Вот теперь, css изменится:

a.st .img{width:100px;height:124px;}
a.st .img img{width:100px;height:124px;}
a.st:hover .img{width:100px;height:124px;overflow:visible;visibility:hidden;}
a.st:hover .img img{visibility:visible;position:absolute;z-index:150;}

Принципы css одинаковы в двух вариантах, только во втором, ширину и высоту мы будем трансформировать при помощи jQuery.

JQuery скрипт:

$(function(){
$('.img').hover(function(){
$(this).children('img').stop().animate({width:"250px",height:"274px"}, 400);
}, function(){ $(this).children('img').stop().animate({width:"100px",height:"124px"}, 400); });
});

При наведении курсора, мы плавно трансформируем ширину и высоту объекта, а затем, когда курсор будет убран, возвращаем css в исходное положение, опять же плавно.

Вот мы и разобрали два примера реализации. Плюсы и минусы я приводить не буду, но скажу так, существенных проблем нет у обоих примеров.

Работает: Mozilla Firefox 3.5.2, Opera 10.00, Chromium 4.0.204.0, Konqueror 4.3.1.

Если вы нашли ошибку в коде, сообщите пожалуйста в комментариях. С уважением, Vasilenko Ivan!
16 сентября 2009 в 8:4692 комментария Верстка, ,

Комментарии — 92 комментария

  1. #5761 dimedr в 16:12, 18 сентября 2009:

    Ответить | Цитировать

    спасибо, первый вариант очень подходит!

  2. #7138 Станислав в 20:36, 15 октября 2009: (подписался)

    Ответить | Цитировать

    а IE ведь тоже отображает без проблем...или это как само собой разумеющееся )

  3. #7140 WebMast в 20:45, 15 октября 2009:

    Ответить | Цитировать

    Станислав, сейчас я не имею данной возможности тестировать в этом браузере. Скажите какой версии вы тестировали и я добавлю в статью.

  4. #7407 Дмитрий в 16:55, 21 октября 2009:

    Ответить | Цитировать

    Ошибка в коде

    див внутри а

    это не есть гуд

    валидацию на validator.w3.org не пройдете

  5. #7557 ЭМИЛЬ в 21:12, 26 октября 2009:

    Ответить | Цитировать

    помогите пожалуйста сделать так же как на сайте dedrkoi.ru

    ответ на zaiemil@ya.ru

  6. #7965 Влад в 11:53, 6 ноября 2009:

    Ответить | Цитировать

    А как сделать чтоб открывлось не вниз вправо, а вверх и влево к примеру!

  7. #7969 WebMast в 17:14, 6 ноября 2009:

    Ответить | Цитировать

    Влад, я бы делал так же, только поднимать вверх и делать отрицательный отступ слева. Примерно так:

    * Стандартные: 100×100.

    * animate (width:"150px", height:"150px", left:"-50px", top:"-50px");

    Вот и все...

  8. #8308 Анатолий в 21:12, 22 ноября 2009: (подписался)

    Ответить | Цитировать

    * animate (width:"150px", height:"150px", left:"-50px", top:"-50px");

    В таком случае картинка прыгает резко в левый верхний угол.

  9. #8318 WebMast в 14:33, 23 ноября 2009:

    Ответить | Цитировать

    Блин, забыл о времени... Нужно время задать:

    animate ({width:"150px", height:"150px", left:"-50px", top:"-50px"}, 400);

    Где 400 — это время в мс.

  10. #8351 Seraph в 14:41, 24 ноября 2009:

    Ответить | Цитировать

    А можно выложить весь код, а то так не совсем понятно куда вставлять «animate ({width:»150px", height:"150px", left:"-50px", top:"-50px"}, 400);"

  11. #8354 WebMast в 15:28, 24 ноября 2009:

    Ответить | Цитировать

    Примерно вот так:

    $(function (){

    $('.img').hover (function (){

    $(this).children ('img').stop ().animate ({{width:»150px", height:"150px", left:"-50px", top:"-50px"}}, 400);

    }, function (){ $(this).children ('img').stop ().animate ({width:"100px",height:"100px",left:"0",top:"0"}, 400); });

    });

  12. #8395 Анатолий в 22:32, 25 ноября 2009: (подписался)

    Ответить | Цитировать

    Всё равно фигня по этому коду выходит :).

    Почему в первом варианте картинка увеличивается вниз и вправо? И зафиксирован левый верхний угол картинки. Какими параметрами это определяется?

    Как сделать что бы зафиксирован был правый верхний край картинки и увеличивалась она влево и вниз?

    Можно сделать так, что бы зафиксирован был центр картинки, а увеличивалась она от центра одинаково во все стороны?

  13. #8404 WebMast в 10:09, 26 ноября 2009:

    Ответить | Цитировать

    Вот смотри: bitby.net/wp-demo/web/img...or-jquery/3.html

    Насчет твоих вопросов, отвечаю на все по порядку:

    1. Картинка закреплена на странице сверху и слева. Значит ей болше некуда изменять свои размеры, кроме как вниз вправо. Так ведут себя все стандартные браузеры. Чтобы изменить это, нужно ковыряться с отрицательными отступами...

    2. Здесь нужно делать как всегда, только делать отрицательный оступ слева.

    3. Можно... В каждую сторону по отрицательному отступу.

  14. #8989 Дмитрий в 19:44, 25 декабря 2009:

    Ответить | Цитировать

    Промучился целый день... неужели нельзя готовый ( не сырой) материал делать... Вроде работает, а в Internet Explorer всё равно картинки прыгают... Где я ошибся ? применил здесь aquanara1.ru/panorama170.html и можно как то получить нормальный скрипт типа такого : highslide.com/ref/hs.Expa...otype.onMouseOut очень красиво там работает , но совершенно не понятно как...

  15. #9031 WebMast в 16:30, 27 декабря 2009:

    Ответить | Цитировать

    Берешь эффект с highslide.com и делаешь свой, полностью анологичным образом.

  16. #9045 Дмитрий в 17:27, 28 декабря 2009:

    Ответить | Цитировать

    Спасибо , я уже разобрался, сделал по принцыпу highslide.com ... там всё чётко работает... (только они там грозятся , что она лицензионная...) Надеюсь сильно ругаца не будут ... Так, что, если кто чего не понял — спрашивайте...

  17. #9292 Xpyctik в 13:25, 30 января 2010:

    Ответить | Цитировать

    Здравствуйте, мне очень подходит вариант реализации с css но они все со следующей строки начинаются, как их выставить в ряд. Я пооолный профан в этом деле, сильно не ругайтесь:)

  18. #9293 WebMast в 16:04, 30 января 2010:

    Ответить | Цитировать

    Нужно грамотно прописать стили для этой картинки... Все зависит от внешних объектов на странице.

  19. #9307 Александр в 23:26, 2 февраля 2010:

    Ответить | Цитировать

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

  20. #9308 WebMast в 17:58, 3 февраля 2010:

    Ответить | Цитировать

    Александр, у меня во всех примерах используются «не прозрачные» картинки.

  21. #9337 Гость в 11:04, 12 февраля 2010:

    Ответить | Цитировать

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

  22. #9338 WebMast в 11:25, 12 февраля 2010:

    Ответить | Цитировать

    Можно... Все зависит от вашего кода. Если можно задать ссылкам определенный идентификатор, то сделать намного проще. Иначе нужны другие варианты.

  23. #9343 Серж в 0:04, 18 февраля 2010: (подписался)

    Ответить | Цитировать

    а можно сюда как-то гиперссылку добавить, чтобы при увеличении на ней можно было кликнуть?

  24. #9347 WebMast в 9:06, 19 февраля 2010:

    Ответить | Цитировать

    Можно, замените href у ссылки, на свой путь к сайту:

    <a class="st" href="javascript:" rel="nofollow">

  25. #9353 AlexM в 17:44, 20 февраля 2010: (подписался)

    Ответить | Цитировать

    у меня возникла проблема с выходом в интернет и вот что я понял:

    src="http://bitby.net/wp-demo/files/jquery.js не работает без доступа к интернет. а как это можно обойти? Спасибо!

  26. #9354 WebMast в 18:23, 20 февраля 2010:

    Ответить | Цитировать

    AlexM, откройте в своем браузере страницу: bitby.net/wp-demo/files/jquery.js. Затем нажмите сохранить как и выберите путь для сохранения. Фреймворк остался на вашем компьютере и вам стоит лишь прописать правильный путь к нему.

  27. #9355 AlexM в 21:02, 20 февраля 2010: (подписался)

    Ответить | Цитировать

    А не могли бы Вы мне подсказать, как именно прикрепить файл сценария jScript? С CSS все понятно, а jScript что то не хочет.

  28. #9356 WebMast в 21:16, 20 февраля 2010:

    Ответить | Цитировать

    Смотрите, сохраняете файл. Далее на своей странице прописываете в исходном коде, между <head> и </head> такую строчку:

    <script src="путь к файлу (например js/jquery.js)" type="text/javascript"></script>

  29. #9357 AlexM в 21:19, 20 февраля 2010: (подписался)

    Ответить | Цитировать

    Спасибо большое, теперь все ОК!

  30. #9372 артём в 18:51, 23 февраля 2010: (подписался)

    Ответить | Цитировать

    куда этот долбанный jquery вставлять,ни фига не понятно,в джумле вообще ни фига не работает.

  31. #9373 WebMast в 18:58, 23 февраля 2010:

    Ответить | Цитировать

    артём, можно подробнее? Что именно не работает?

  32. #9374 артём в 19:03, 23 февраля 2010: (подписался)

    Ответить | Цитировать

    не увеличивается фотка,куда jquery скрипт надо засунуть в джумле????и вообще в джумле работает этот скрипт???Css понятно в редактирование css а jquery куда в редактирование html? если да то не получается,надо может какие-то пути ещё прописать в джумле,уже 2 часа долблюсь,все варианты перепробовал,навожу на картинку на локалке,подпись внизу javascript и ни фига не увеличивается,попробовал первый вариант,всё получилось,но мне не понравилось,хочу плавное увеличение поскажите,как можно поподробней пожалуйста!!!!!!

  33. #9375 AlexM в 20:03, 23 февраля 2010: (подписался)

    Ответить | Цитировать

    Добрый вечер, у меня есть такой вопрос: помоги разобраться с .Hta и если можно посоветуйте литературу. Базовые знания у меня имеются, но все же хочется знать больше! Спасибо!

  34. #9376 артём в 20:43, 23 февраля 2010: (подписался)

    Ответить | Цитировать

    ничего не получается ну подскажите!!

  35. #9377 AlexM в 21:03, 23 февраля 2010: (подписался)

    Ответить | Цитировать

    Привет, Артем.

    Если я правильно понял, то для Html выглядит все это дело вот так:

    страница 1

  36. #9378 AlexM в 21:05, 23 февраля 2010: (подписался)

    Ответить | Цитировать

    после первого Head и после meta

  37. #9379 WebMast в 21:19, 23 февраля 2010:

    Ответить | Цитировать

    артём, я не знаю как редактируется в жумле, но нужно найти где-то редактирование шапки. Далее ищи строчку </head>. И вместо нее вставляй:

    <script src="http://bitby.net/wp-demo/files/jquery.js" type="text/javascript"></script> </head>

    Далее ищи строку <body>, и вместо нее вставляй:

    <body> <script> $(function(){ $('.img').hover(function(){ $(this).children('img').stop().animate({width:"250px",height:"274px"}, 400); }, function(){ $(this).children('img').stop().animate({width:"100px",height:"124px"}, 400); }); }); </script>

    Далее в нужное место в коде вставь html:

    <a class="st" href="javascript:" rel="nofollow"> <div class="img"><img src="http://bitby.net/wp-content/uploads/2008/12/0000050.jpg" alt="" title="" /></div> </a>

  38. #9380 WebMast в 21:21, 23 февраля 2010:

    Ответить | Цитировать

    AlexM, возможно в сообщении «Февраль 23rd, 2010 20:03» ты хотел вставить код? Для вставки кода используй тег code.

  39. #9381 артём в 11:36, 24 февраля 2010: (подписался)

    Ответить | Цитировать

    А вот здесь какой у меня путь примерно до jquery.js,где у меня должен jquery лежать в джумле в какой папке.

  40. #9382 WebMast в 12:25, 24 февраля 2010:

    Ответить | Цитировать

    При включенном интернете можете использовать наш путь (bitby.net/wp-demo/files/jquery.js), если хотите использовать локально. то:

    Заливаете фреймворк (jquery) например в корневую папку сайта (там где index.php), далее редактируете index.php. Ищите </head> и вместо него вставляете: <script src="http://bitby.net/wp-demo/files/jquery.js" type="text/javascript"></script> </head>

  41. #9383 артём в 12:41, 24 февраля 2010: (подписался)

    Ответить | Цитировать

    а где в джумле корневая папка сайта?

  42. #9385 артём в 18:08, 24 февраля 2010: (подписался)

    Ответить | Цитировать

    ваше изображение получилось через джумлу поместить а какк своё -то поставить,какой путь-то надо прописать?????????????

  43. #9386 WebMast в 18:10, 24 февраля 2010:

    Ответить | Цитировать

    артём, напиши мне по icq, пожалуйста.

  44. #9387 артём в 18:11, 24 февраля 2010: (подписался)

    Ответить | Цитировать

    не блина получилось,только моё изо как-то сжато,гденужные минуса прописать?

  45. #9388 артём в 18:33, 24 февраля 2010: (подписался)

    Ответить | Цитировать

    а ещё скажите пожалуйста,если после того,как перенесу свой сайт с локального на удаленный сервер,будут работать изображения,если я заливал фреймворк,то есть делал всё что для локального требуется?

  46. #9389 WebMast в 18:50, 24 февраля 2010:

    Ответить | Цитировать

    Меняешь в css ширину и высоту:

    a.st .img{width:100px;height:124px;} a.st .img img{width:100px;height:124px;} a.st:hover .img{width:100px;height:124px;overflow:visible;visibility:hidden;} a.st:hover .img img{visibility:visible;position:absolute;z-index:150;}

    Все значения width — меняешь на начальную ширину своей картинки.

    Все значения height — меняешь на начальную высоту своей картинки.

    Далее скрипт:

    $(function(){ $('.img').hover(function(){ $(this).children('img').stop().animate({width:"250px",height:"274px"}, 400); // Значения ширины и высоту, когда навели курсор. }, function(){ $(this).children('img').stop().animate({width:"100px",height:"124px"}, 400); // Начальные значения ширины и высоты. }); });

  47. #9390 артём в 19:10, 24 февраля 2010: (подписался)

    Ответить | Цитировать

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

  48. #9391 Женя в 19:41, 24 февраля 2010: (подписался)

    Ответить | Цитировать

    Реально ли это вместе с mootools использовать?

    У меня на сайте шаблон с mootools — его не выкинешь...

    Или может можно как-то использовать библиотеку mootools вместо jQuery?

    Не могу нарыть такого на mootools (((

  49. #9392 WebMast в 13:46, 25 февраля 2010:

    Ответить | Цитировать

    артём:

    1. Насчет смазывания, скорее всего это зависит от качество картинки.

    2. Задай родительскому блоку, например в нашем примере это .img, свойство position со значением absolute.

    3. Пример можно посмотреть?

    Женя, конечно реально. Я с mootools не знаком, но даже если на нем нельзя, то использовать два фреймворка можно. Одна лишь проблема при этом, и jQuery и mootools используют для селекторов знак «$». Для того, чтобы изменить во всех кодах jQuery знак «$» на свой, используйте .noconflict ():

    var $j = jQuery.noConflict();

    В дальнейшем вам нужно будет пользоваться в jQuery скриптах не «$», а «$j». Например $j('#id').css({display:'none'});.

  50. #9394 артём в 18:41, 25 февраля 2010: (подписался)

    Ответить | Цитировать

    что за родительский блок,где он именно в джумле??? в css может просто прописать это значение для img например или как нибудь так можно??

  51. #9395 WebMast в 18:56, 25 февраля 2010:

    Ответить | Цитировать

    Родительский блок — это блок, внутри которого расположена картинка. В жумле, в прочем как и везде, ты вставляешь код:

    <a class="st" href="javascript:" rel="nofollow"> <div class="img"><img src="http://bitby.net/wp-content/uploads/2008/12/0000050.jpg" alt="" title="" /></div> </a>

    Как видно, что перед img есть блок с классом img. Этот блок и является родительским. Попробуй ему задать абсолютное позиционирование (position:absolute).

  52. #9396 артём в 18:57, 25 февраля 2010: (подписался)

    Ответить | Цитировать

    задать в css?

  53. #9397 артём в 19:05, 25 февраля 2010: (подписался)

    Ответить | Цитировать

    не непомогает всё равно все изо которым я задал эту анимацию катаются по сторонам,а которым не задал класс стоят нормально!!!

  54. #9398 WebMast в 19:08, 25 февраля 2010:

    Ответить | Цитировать

    артём, хотелось бы посмотреть. Есть возможность увидеть в интернете? Кстати, напиши мне по icq: 407{9}{9}4950.

  55. #9426 AlexM в 22:08, 6 марта 2010: (подписался)

    Ответить | Цитировать

    Доброго дня суток. Мне не дает покоя один недочет, возникающий при использовании jQuery: если делать так, как Вы описывали, то получается, что если картинка находится слева, то по все длине будет показана в браузерах ссылка, при нажатии на которую переходим по ссылке. как сделать, чтобы ссылки высвечивались и были функциональны только при наведении на картинку?

  56. #9433 WebMast в 20:29, 9 марта 2010:

    Ответить | Цитировать

    AlexM, вам нужна реализация:

    1. Показывается маленькая картинка на странице.

    2. При наведении курсора на эту картинку, она увеличивалась и поверх картинки появлялась ссылка.


    Если да, то лучше пользоваться совсем другим кодом.

  57. #9583 Серж в 21:05, 5 апреля 2010: (подписался)

    Ответить | Цитировать

    помогите плиз.

    Все работало ок. После вставки в шаблон джумлы возникла следующая проблема: в Опере по прежнему все ок, а вот в IE8, картинки увеличиваются, но назад не уменьшаются... что делать?

    (Вариант1,без jQuery)

  58. #9623 ear-trap в 12:06, 25 апреля 2010:

    Ответить | Цитировать

    Во, первых, огромное спасибо! Но есть вопрос.

    Я хочу сделать плавное увеличение с JQuery. То, как картинка увеличивается, меня полностью устраивает. Но уменьшается она резко: при отведении мышки от картинки, обрамляющие элементы становятся видны мгновенно. У вас на примере то же самое: только отводишь мышку, Текст 3 проявляется тотчас же. Можно ли этого избежать?

  59. #9624 WebMast в 13:24, 25 апреля 2010:

    Ответить | Цитировать

    ear-trap, как я понимаю, все дело в том, что браузер не воспринимает нашу анимацию, а только лишь конечное значение. Хотя это не правильно. Ведь если взглянуть под капот jQuery, то мы каждый раз меняем ширину на заданную, следовательно такого быть не может и это баг!

    Вот теперь я полностью разобрался. Смотрите. Когда мы наводим курсор, картинке задается z-index, этим мы перекрываем собой текст. Когда убираем курсор, z-index становится прежним и текст залазит наверх. Чтобы избавиться от этого, измените:

    a.st2 .img2 img{width:100px;height:124px;} на:

    a.st2 .img2 img{width:100px;height:124px;position:absolute;z-index:150;}

    И все работает как надо :).

  60. #9627 ear-trap в 2:49, 26 апреля 2010:

    Ответить | Цитировать

    Спасибо за быстрый ответ! Я понял ваше решение (раньше не знал что такое z-index — новичек я). Но результат после отвода мыши у меня тот же :( Причем что в вашем примере (скачивал и изменял код), что у меня в блоге, и в разных браузерах. Продолжаю экспериментировать...

  61. #9628 ear-trap в 3:00, 26 апреля 2010:

    Ответить | Цитировать

    А, всё, разобрался — я недооценил свойство position:absolute; в вашей подсказке. Без него не работало) Еще раз огромное спасибо!

    Кстати, если кому-то интересно, вот полный код со всеми блоками и т.д. для картинки, увеличивающейся по наведению, красиво убирающейся и еще и со ссылкой. Прямо в таком виде его можно вставлять в html файл (а я пихал в html/js виджет блоггера)

    a.st2 .img2{width:150px;height:150px;} a.st2 .img2 img{width:150px;height:150px;position:absolute;z-index:150;} a.st2:hover .img2{width:150px;height:150px;overflow:visible;} a.st2:hover .img2 img{visibility:visible;position:absolute;z-index:150;} $(function(){ $('.img2').hover(function(){ $(this).children('img').stop().animate({width:"300px",height:"300px"}, 400); }, function(){ $(this).children('img').stop().animate({width:"150px",height:"150px"}, 400); }); }); <a href="http://ear-trap.blogspot.com" rel="nofollow"></a>

  62. #9629 ear-trap в 3:04, 26 апреля 2010:

    Ответить | Цитировать

    Черт, здесь вставка режет код. Не смотрите код из предыдущего поста.

    Вот нормальная ссылка: paste.org.ru/?hqcsua

  63. #9631 WebMast в 9:49, 26 апреля 2010:

    Ответить | Цитировать

    ear-trap, надо было сразу показать вам пример:

    bitby.net/wp-demo/web/img...or-jquery/4.html

  64. #9716 arjuna в 2:23, 1 июня 2010:

    Ответить | Цитировать

    Привет, а не подскажешь ли как сделать чтобы в варианте с jQuery, размер картинки оставался тот же, а «камера» как бы надвигалась на заданную область картинки, например на человека в желтом в данном случае. То есть сначала видна картинка целиком, а при наведении курсора — увеличенная область с человеком в желтом и при этом размеры картинки остаются неизменными, а то что не влезает уходит «за края»?

  65. arjuna, создаете блок (width:x;height:y;overflow:hidden;). В него помещаете картинку. Задаете ей параметры начального изображения (width:x;height:y;). При наведении курсора, увеличиваете изображение.

  66. #9721 arjuna в 17:13, 1 июня 2010:

    Ответить | Цитировать

    Спасибо большое за ответ, чуть попозже попробую

  67. #9722 arjuna в 20:11, 1 июня 2010:

    Ответить | Цитировать

    а в css что-нибудь надо поправить? а то скрипт не срабатывает, сейчас структура такая:

  68. #9724 arjuna в 20:12, 1 июня 2010:

    Ответить | Цитировать

    a

    div img

    div ovevfl

    img

    /div

    /div

    /a

  69. #9725 arjuna в 20:28, 1 июня 2010:

    Ответить | Цитировать

    все, я разобрался, спасибо за скрипт

  70. #9746 Андрей в 20:57, 9 июня 2010: (подписался)

    Ответить | Цитировать

    Тут набросал маленький PHP script который в зависимости от картинки сам генерирует CSS и HTML код. Может кому и пригодится (мне уже пригодился :-)

    <?php

    //checks if the form has been submitted

    if (isset ($_POST['Submit']))

    {

    //reads the name of the file the user submitted for uploading

    $image=$_FILES['image']['name'];

    $scale = $_POST['scale'];

    if ($image) {

    $info = getimagesize ( $image);

    $t = time ();

    $w = $info[0];

    $ww = (int) $w/$scale;

    $h = $info[1];

    $hh = (int)$h/$scale;

    echo «Insert in the CSS:»;

    echo «a.st_».$t." .img_".$t."{width:".$ww."px;height:".$hh."px;overflow:hidden;border:0 none;}"."«;

    echo „a.st_“.$t.» .img_".$t." img{width:".$ww."px;height:".$hh."px;border:0 none;}"."«;

    echo „a.st_“.$t.»:hover .img_".$t."{width:".$ww."px;height:".$hh."px;overflow:visible;visibility:hidden;border:0 none;}"."«;

    echo „a.st_“.$t.»:hover .img_".$t." img{width:".$w."px;height:".$h."px;visibility:visible;position:absolute;z-index:150;border:0 none;}"."";

    echo «Insert in the HTML:»;

    echo htmlspecialchars ("");

    echo htmlspecialchars (" ");

    echo htmlspecialchars (" ");

    echo htmlspecialchars (" ");

    echo htmlspecialchars ("");

    }

    }

    ?>

    Image to analyse:

    Scale:

  71. #9749 Димон в 10:08, 11 июня 2010:

    Ответить | Цитировать

    Дмитрий, нужна ваша помощь, вы говорили, что разобрались с highslide.com/ref/hs.Expa...otype.onMouseOut.

    WebMast, не могли бы вы скинуть его e-mail мне на мыло? Боюсь, здесь он не увидит моё сообщение.

  72. #9887 Наталья в 11:31, 20 июля 2010: (подписался)

    Ответить | Цитировать

    Хороший скрипт, все получилось, но вот ужасно получается

    когда картинка в абзаце, внутри текста ((((( у меня сама картинка прыгает на новую стоку и после нее тоже новая строка начинается, и еще после картинки почему то текст без стиля, стиль применяется к абзацу в css... я так поняла что div на нее так действует... подскажите пожалуйста как исправить??? может этот скрипт не подходит к абзацу???

  73. #10168 artistoo7 в 18:36, 26 августа 2010: (подписался)

    Ответить | Цитировать

    помогите мне пожалуйста уменья проблема с этим скриптом.

    я закинул на свой сайт http://kinokritik.ucoz.com

    и он не совсем корректно работает помогите мне

  74. Наталья, скрипт предназначен именно для картинок.

    Не совсем понятна ваша идея задачи. Опишите или покажите пример.

    Может поможет: bitby.net/web/plavnoe-izm...vysoty-u-obekta/

    artistoo7, посмотрите: bitby.net/wp-demo/web/img...or-jquery/4.html

  75. #10609 Владимир в 20:55, 8 октября 2010:

    Ответить | Цитировать

    Автор плагина, благодарность тебе, всё просто и со вкусом! Очень нравится!!!

  76. #10725 Александр в 13:49, 25 ноября 2010:

    Ответить | Цитировать

    Не работает в IE6, увеличивает — более менее, а вот когда уменьшается, то криво. Вопросс:

    1. можно ли его сделать кросбраузерным (на всех проверял везде работает на УРА, а вот IE6 косячит)

    2. можно ли как-то запретить выполнение скрипта если пользователь открыл сайт в IE6?

    Буду очень признателен за ответ!

  77. [...] Текст3 Статья на bitby.net, «Плавное увеличение картинки при на... [...]

  78. #10820 Алексей в 0:58, 6 января 2011:

    Ответить | Цитировать

    спасибо, все подходит, делал свое, собрал все на ура, Ваш подредактировал под себя все супер, оч. признателен!:)

  79. #10840 Alex в 14:08, 16 января 2011:

    Ответить | Цитировать

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

  80. #10841 NNNNNN в 15:25, 16 января 2011:

    Ответить | Цитировать

    Помогите, пожалуйста... У меня этот «скрипт» работает на ура!) Но я, мягко говоря, чайник, и не понимаю, где именно надо указать размер «уменьшенной» и «оригинальной» картинки...

    А то моя картинка совсем не такая, как тут, а где именно «габариты» картинки указывать надо — мне не ясно)

  81. #10842 NNNNNN в 16:06, 16 января 2011:

    Ответить | Цитировать

    разобрался!)

    А как сделать, чтобы картинка была гиперссылкой? Мол, при наведении курсора — увеличение, а при нажатии — переход по ссылке?

  82. #10851 Алёна в 12:40, 18 января 2011: (подписался)

    Ответить | Цитировать

    Подскажите, пожалуйста, как сделать( использую 1 вариант с css) чтобы несколько картинок на странице увеличивались при наведении курсора.Голову сломала, никак не разберусь!!!

  83. #10884 Дмитрий888 в 12:19, 26 января 2011: (подписался)

    Ответить | Цитировать

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

  84. #10979 Дмитрий в 15:49, 14 февраля 2011:

    Ответить | Цитировать

    Способ с CSS не корректно работает в ИЕ8 — увеличивается, но при отведении мышки не уменьшается обратно. Как решить?

  85. #10985 Ирина в 17:08, 16 февраля 2011:

    Ответить | Цитировать

    Уважаемые мастера, добрый вечер. Столкнулась с неожиданной проблемой. Взяв за основу код для CSS и javascript решила прописать смещение картинки вверх при анимации. В итоге она хоть и делает скачок вверх, потом увеличивается, выглядит это мило. Но вот следующая за ней картинка тупо делает скачек вверх и все. Я прописала в animate параметры top соответственно -100px и 0pxб что может быть не так? Заранее спасибо за ответ.

  86. [...] Текст3 Статья на bitby.net, «Плавное увеличение картинки при на... [...]

  87. #11642 Дмитрий в 10:09, 1 июня 2011:

    Ответить | Цитировать

    АВТОРУ РЕСПЕКТ. Работает классно. долго пытался сам такое сделать не то получалось , теперь разобрался СПАСИБО

  88. #11686 Жека в 20:07, 11 июня 2011:

    Ответить | Цитировать

    Первый скрипт не работает в ИЕ, кто найдет решение, киньте сюда, для окружающих...

  89. #14887 Антон в 16:35, 18 апреля 2012:

    Ответить | Цитировать

    Здравствуйте! Объясните, пожалуйста, таблицу стилей

    a.st .img{width:100px;height:124px;overflow:hidden;}

    a.st .img img{width:100px;height:124px;}

    a.st:hover .img{width:100px;height:124px;overflow:visible;visibility:hidden;}

    a.st:hover .img img{visibility:visible;width:250px;height:274px;position:absolute;z-index:150;}

    вот повторы .img img это что значит??

  90. #14908 vanoID в 12:10, 19 апреля 2012:

    Ответить | Цитировать

    Класс .img объект изображения

  91. #17294 оля в 13:54, 5 июля 2012: (подписался)

    Ответить | Цитировать

    здравствуйте!!

    помогите пожалуйста.

    нужно тоже увеличить картинку при наведении курсора,но не на сайте а в power point. версия 2003 года.

    я в языках программирования ничего не понимаю а задание дали(

    если не сложно научите)

  92. #47540 Freddy в 19:14, 25 февраля 2015:

    Ответить | Цитировать

    WebMast писал(а):

    #9389 WebMast в 18:50, 24 февраля 2010:

    Ответить | Цитировать

    Меняешь в css ширину и высоту:

    a.st .img{width:100px;height:124px;}

    a.st .img img{width:100px;height:124px;}

    a.st:hover .img{width:100px;height:124px;overflow:visible;visibility:hidden;}

    a.st:hover .img img{visibility:visible;position:absolute;z-index:150;}

    Все значения width — меняешь на начальную ширину своей картинки.

    Все значения height — меняешь на начальную высоту своей картинки.

    Далее скрипт:

    $(function (){

    $('.img').hover (function (){

    $(this).children ('img').stop ().animate ({width:"250px",height:"274px"}, 400); // Значения ширины и высоту, когда навели курсор.

    }, function (){ $(this).children ('img').stop ().animate ({width:"100px",height:"124px"}, 400); // Начальные значения ширины и высоты.

    });

    });

    Красавчик!

    После твоего комента всё заработало!

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

имя:

e-mail:

сайт:

текст:

Подписаться, не комментируя