Давайте посмотрим, как это происходит. Все ваши картинки, которые вы загружаете в блог, хранятся в веб-альбомах Picasa. Чтобы получить ссылку на нужное изображение, на его странице в альбоме справа берете на него ссылку, выбрав размер и установив галочку "Только изображение (ссылка отсутствует)", как на картинке:
Теперь давайте посмотрим полученную ссылку:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0PJqd0rLFd-pRXC9VaLel0zegwVfWRk1bpSqAWcxie2yWikaih3kwldpXpyCEAyIFS1pLtgz-7ZsVCI4FFCz-a53pLwW9NKIvs4abkB0zpPhqvFMBH1lP3PmcgR90V86uaX4Np0lCVv0H//800/anutiny-glazki.jpg
То, что выделено жирным, ширина изображения. Меняя это значение, мы получим картинки разных размеров.
Когда в редакторе сообщений мы устанавливаем размер изображений:
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="адрес_исходного_изображения" />
Рад что попал на ваш блог:) всё так понятно и сразу ясно! спасибо вам!!1
Пожалуйста, ostapoff! Заходите ещё :)
Светлана, я вообще чайник ))), подскажите, пожалуйста, как сделать чтоб при кликанье на картинку, она смогла открыться в новом окне в исходном большом размере???
Марина, смотрите в этом сообщении.
большое спасибо, всё получилось, как раз то, что надо!
Здраствуйте Светлана подскажите, а как можна получить код на табличку подписатся на новое сообщения, она серо-синяя у вас.Хотел бы и себе такую поставить на сайт.
Если вас не затруднит дайте код и как правельно установить.Спасибо за рание.
Здравствуйте, 12! Здесь смотрите: http://blogger.vipbiz.org/2012/01/nastraivaem-rss-podpisky-v-bloge.html
Отправить комментарий