Увеличение картинок при наведении курсора в статье блога без плагинов | Заметки вебмастера






Увеличение изображения в статьях без плагинов

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

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

Картинка будет увеличиваться сразу после того как вы подведете к ней курсор мыши, а код для осуществления этой функции будет всего в одну небольшую строчку.

Способы увеличения картинок в статьях веб-ресурса

В одной из своих прошлых статей я рассказывал, как осуществить подобную функцию с помощью плагина Auto Highslide.

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

Но тот кто давно занимается сайто- и блогостроением предпочтет другой вариант, который будет чуть посложнее, но намного эффективнее. Согласитесь, для веб-ресурса конечно намного лучше, если используется меньше различных весомых кодов.

Посмотрите на мой способ увеличения картинок при наведении курсора в действии. Подведите курсор к изображению, расположенному ниже и увидите как действует эта функция:

.

пляж мечты.

Если Вам нравится данный способ увеличения картинок в статьях, то читайте дальше, чтобы узнать как осуществить подобное на своём блоге.

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

Предлагаю вам посмотреть и скачать специальный код для реализации функции увеличения изображения в статьях при наведении курсора на него:

 onmouseover="this.style.width='auto'"onmouseout="this.style.width='100px'"

Скопируйте его и после вставки картинки в редакторе WordPress перейдите во вкладку текст (режим html) и вставьте его в это место:

 <img class="aligncenter" src="http://saranchinsergey.ru/wp-content/uploads/2014/07/plyazh-mechtyi.png" alt=""ВСТАВЬТЕ КОД СЮДА/>

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

Вы можете изменять ширину картинки, которая показывается изначально. Для этого задайте в коде свои параметры ширины(в пикселях). У меня начальная картинка имеет ширину в 100 пикселей:

 onmouseout="this.style.width='100px'"

Вот и все. Надеюсь, у вас получилось. Если нет, задавайте вопросы в комментариях.

Пользуясь случаем, предлагаю вам прочитать ещё одну полезную статью про то, как создать скриншот экрана монитора. Думаю, вам пригодится эта информация.

До новых встреч в моих новых статьях!

Успехов Вам и Удачи
С Уважением,


Книга о заработке в интернете:
Книга о заработке в интернете

Комментариев к статье: 24

  1. Юлия:

    Такой вариант увеличения — супер! Спасибо за такую информацию. Я что-то не очень довольна своим плагином. Буду пробовать таким образом реализовать увеличение!http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif

    Ответить

    • Сергей:

      Рад, что помог вам, Юлия http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif

      Ответить

      • Alexandr:

        Приятно видеть таких смелых девушек как Юля. Ничего не боятся, никакого кода. Молодцы!

        Ответить

        • Игорь:

          а чего бояться? Есть тестовый блог можно по эксперементировать.На крайняк если не получится,можно сделать откат.

          Ответить

          • Alexandr:

            Девушки при виде кода чуть в обморок не падают. Но попадаются очень умные и решительные как Юля.

            Ответить

  2. Мария Коротина:

    Очень интересный и полезный пост. Информация думаю пригодится, размещу у себя на блоге такое изображение.http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif

    Ответить

  3. Denis:

    автоматизировать бы это все, а то ручками устанешь так все прописывать.

    Ответить

    • Сергей:

      Надо написать микроплагин http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif

      Ответить

  4. Юрий Ваценко:

    Да, я как-то к этому отношусь не очень. Дело в том, что лучше сразу закинуть большие картинки, чтобы посетитель не запаривался в их увеличении. Ну, это мое мнение, а там, каждый решает сам.http://saranchinsergey.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif

    Ответить

  5. Alexandr:

    На любителя увеличение картинок. Каждый выбирает свой стиль в оформлении сайта. Но этот способ тоже может пригодиться!

    Ответить

  6. Виталий Охрименко:

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

    Ответить

    • Сергей Саранчин:

      На мобильных версиях этот способ, к сожалению, пока не тестировал :grin:

      Ответить

      • Виталий Охрименко:

        А вас вообще не парит что нет мобильной версии сайта. Гугль сейчас очень матюкается по этому поводу. Хотя да, вы же отказываетесь от сео, можно подзабить на мнение гугля

        Ответить

        • Сергей Саранчин:

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

          Ответить

  7. Оксана:

    интересный способ увеличить картинку в статье блога. Да и очень простой. Спасибо.

    Ответить

    • Сергей Саранчин:

      Да, Оксана, мне и самому нравится этот весьма эффективный способ :oops:

      Ответить

  8. Евген:

    Отличная статья! а как можно это применить ко всем картинкам в записях блога!??? а то как то вручную надоедает!

    Ответить

    • Сергей Саранчин:

      Спасибо Вам за оценку статьи!
      Ну, если вручную надоедает так делать, то лучше тогда пользоваться плагином :smile:

      Ответить

  9. Сергей:

    Здравствуйте!
    есть вопрос по реализации данного метода.
    Он конечно работает, не спорю, но есть небольшой нюанс — при первичной загрузке страницы (даже непосредственно этой) изображение вначале грузится большое, затем при наведении мыши уменьшается и начинает работать как положено.
    Так вот вопрос: как сделать так, чтобы изображение вначале подгружалось маленькое и лишь затем увеличивалось при наведении мыши?

    Ответить

    • Сергей Саранчин:

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

      Ответить

  10. Сергей:

    Методом проб и ошибок я пришел к выводу, что работает такая конструкция — указываем путь к фото и прописываем стиль с маленьким размером

    по крайней мере такое работает на тестовом сайте.
    Может это характерно только для моего шаблона.

    Да, кстати, теперь задался вопросом как сделать так, чтобы фото увеличивалось как бы над страницей, не раздвигая контент. Нашел в сети кучу вариантов, но какие то они громоздкие. Хотелось бы чего-то легкого, с минимальным кодом и желательно без плагинов. У вас нет чего-то наподобие такого же небольшого, но функционального кода?

    Ответить

    • Сергей Саранчин:

      Интересный вариант! Нужно тоже попробовать на тестовом. :smile: Нет, другого кода у меня нет, но можно что-нибудь подобное в сети откопать.

      Ответить

      • Сергей:

        Да, коды есть в сети, но боюсь для моего сайта на данный момент это не совсем актуально. Оставлю-ка я все как есть. Может чуть позже нечто подобное встрою на сайт. А пока просто поэкспериментирую дальше. Вообще вариант увеличение картинки, предложенный Вами, самый простейший. Что есть гуд для сайта в плане минимизации кода.

        Ответить

        • Сергей Саранчин:

          Согласен, Сергей. Мне он и самому нравится из-за своей простоты. Незамысловатый и действенный :grin:

          Ответить


НАПИШИТЕ СВОЙ ПЕРВЫЙ КОММЕНТАРИЙ НА ЭТОМ БЛОГЕ И ПОЛУЧИТЕ ПОДАРКИ!

Нажимая кнопку "ОТПРАВИТЬ" комментарий, Вы принимаете пользовательское соглашение и подтверждаете, что ознакомлены и согласны с политикой конфиденциальности этого сайта.

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: