20 дек. 2011 г.

Работа с изображениями в Blogger

Blogger даёт нам возможность, загрузив единожды наше изображение, получить различные вариации его размеров.

Давайте посмотрим, как это происходит. Все ваши картинки, которые вы загружаете в блог, хранятся в веб-альбомах Picasa. Чтобы получить ссылку на нужное изображение, на его странице в альбоме справа берете на него ссылку, выбрав размер и установив галочку "Только изображение (ссылка отсутствует)", как на картинке:

Теперь давайте посмотрим полученную ссылку:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0PJqd0rLFd-pRXC9VaLel0zegwVfWRk1bpSqAWcxie2yWikaih3kwldpXpyCEAyIFS1pLtgz-7ZsVCI4FFCz-a53pLwW9NKIvs4abkB0zpPhqvFMBH1lP3PmcgR90V86uaX4Np0lCVv0H//800/anutiny-glazki.jpg

То, что выделено жирным, ширина изображения. Меняя это значение, мы получим картинки разных размеров.

100 | 200 | 300 | 400 | 500

Когда в редакторе сообщений мы устанавливаем размер изображений:
1600 - исходный размер, как может быть и 800 для картинок меньших размеров,
640 - очень крупный,
400 - крупный,
320 - средний,
200 - маленький.

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

Используя полученные знания, теперь мы можем оживить наш блог. Можем, например, сделать увеличение изображения при наведении мыши:

Используем для этого код:
<a href="ссылка" onmousemove="getElementById('image').src='ссылка_на_изображение'"><img id="image" src="ссылка_на_миникопию_изображения" /></a>
Также можете добавить Галерею изображений в блог.

9 комментариев

КатеринаКвашонкина

Света, добрый день. Очень интересная статья, спасибо. Все получилось сразу. Можно ли добавить "слов", чтобы увеличенная (после наведения мыши картинка) потом опять становилась маленькой (при клике или после отведения мыши в сторону, ну или еще как нибудь)?

Светлана Ковалева Светлана Ковалева

Пожалуйста, Катерина! Можно и так, попробуйте использовать этот код:

<style type="text/css">
  img.big {
    cursor: pointer;
    max-width: 200px;
  }
  img.big:hover {
    max-width: none;
  }
</style>

<img class="big" src="адрес_исходного_изображения" />

ostapof

Рад что попал на ваш блог:) всё так понятно и сразу ясно! спасибо вам!!1

Светлана Ковалева Светлана Ковалева

Пожалуйста, ostapoff! Заходите ещё :)

Марина Поюнова

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

Светлана Ковалева Светлана Ковалева

Марина, смотрите в этом сообщении.

Марина Поюнова

большое спасибо, всё получилось, как раз то, что надо!

12

Здраствуйте Светлана подскажите, а как можна получить код на табличку подписатся на новое сообщения, она серо-синяя у вас.Хотел бы и себе такую поставить на сайт.
Если вас не затруднит дайте код и как правельно установить.Спасибо за рание.

Светлана Ковалева Светлана Ковалева

Здравствуйте, 12! Здесь смотрите: http://blogger.vipbiz.org/2012/01/nastraivaem-rss-podpisky-v-bloge.html

Отправить комментарий