Ответ от SeregaA[гуру]
В мае разработчики ВКонтакте прикрыли фишку с аватаркой-обманкой, когда при нажатии на аватар пользователя появляется совсем другая фотография, связав аватар пользователя с альбомом «Фотографии с моей страницы». Однако, они не знают, что есть другой, похожий на этот, способ создания аватара-обманки.
Инструкция по созданию аватарки-обманки:
Открываем социальную сеть ВКонтакте в двух вкладках;
Заходим в первую вкладку;
Под аватаркой нажимаем на «Изменить фотографию», затем на «Изменить миниатюру» и оставляем окошко открытым;
Заходим на вторую вкладку;
Заходим в альбом «Фотографии с моей страницы» и удаляем фото, установленное как аватар;
Снова заходим в первую вкладку;
В окошке изменения миниатюры нажимаем на кнопку «Сохранить»;
Готово! На странице будет отображаться прежняя фотография, но при клике на аватар будет открываться другое фото.
Кстати говоря, фото, которое отображается при клике на аватар, можно изменять. Достаточно лишь зайти в альбом «Фотографии с моей страницы» и переместить требуемую фотографию в самый конец альбома.
Двойной мем ВКонтакте как сделать
Источник материала ))
SeregaA
(16229)
Ответ от 22 ответа[гуру]
Привет! Вот подборка тем с похожими вопросами и ответами на Ваш вопрос: Что нужно сделать, чтобы при нажатии на аватар вконтакте открывалась другая картинка?
Источник: 22oa.ru
Как сделать картинку, раскрывающуюся по клику на полный размер.
Под понятием превью ( от англ. preview — предварительный просмотр, также thumbnail — англ. ноготок) чаще всего понимается уменьшенная копия изображения с прикреплённой к ней ссылкой, ведущей на страницу с изображением оригинального размера. Так же этот термин может употребляться и по отношению к другим материалам (видео, 3D-арт, звуковые файлы). Источник
Это несложно!
1. Загружаем фотографию на Яндекс.Фотки .
2. Переходим на страницу фотографии, справа от фото в меню «В другом размере» выбираем размер превью. Для Я.ру важно: размер превью по горизонтали должен быть менее 600px (иначе картинка полностью не уместится на страничке).
3. После загрузки фото в выбранном размере кликаем по строке «Код для вставки на сайт или в блог» и копируем куда-нибудь ссылку из нижнего окошка. Это будет первая ссылка.
4. Вновь переходим на страницу фотографии, в меню «В другом размере» выбираем «Оригинал». Фото в полном размере откроется в новом окне, ссылку на эту картинку копируем из адресной строки браузера. Это вторая ссылка.
5. На своей странице создаём новый пост и в HTML-режиме пишем следующий код:
Теперь при клике по маленькой картинке в вашем посте в этом же окне будет загружаться большая картинка.
Источник: www.liveinternet.ru
Появление и исчезновение картинки при клике по кнопке на Javascript
От одного из моих подписчиков на YouTube канале поступил достаточно интересный вопрос. Он спросил, как сделать так, чтобы при нажатии на кнопку появлялась картинка в браузере. А при повторном нажатии на кнопку, чтобы эта картинка исчезала.
Этот вопрос показался мне интересным по нескольким причинам. Во-первых – его задал человек, который совершенно не разбирается в программировании, а моя цель именно в том, чтобы помогать таким людям. Во-вторых, ответив на этот вопрос я могу одновременно раскрыть несколько тем по программированию на Javascript.
Алгоритм программы
Первое с чего нужно начинать создание любой программы – это продумать её алгоритм. То есть нужно расписать каждый шаг, который должна будет выполнить наша программа на пути к реализации поставленной задачи. А также, нужно составить алгоритм своих действий при написании программы.
Последовательность создания программы
- Создать HTML документ и поместить на него 2 объекта: картинку и кнопку.
- Создать функцию, которая будет скрывать картинку (или отображать её), если пользователь нажмёт на кнопку.
- Создать событие для кнопки onClick, которое будет вызывать нашу функцию.
Алгоритм работы программы
- Нажатие на кнопку.
- Вызов функции.
- Если картинка в браузере не отображается, то показать её.
- Если картинка видна в браузере, то спрятать её.
Вот так вот приблизительно, для себя, мы набросали что должны сделать и как будем это реализовывать. Теперь можно приступать непосредственно к программированию.
Исчезновение картинки при клике по кнопке
Для начала, сделаем так, чтобы при нажатии на кнопку картинка исчезала.
HTML
Показать/Скрыть картинку
JS
function myImg()
В данном примере, при загрузке страницы в браузере, мы выводим на экран картинку Clipboard01. Для этой картинки мы указываем атрибуты id и style.
С помощью document.getElementById мы получаем ссылку на элемент по его идентификатору (по ID) и меняем атрибут style на display:none. То есть делаем картинку невидимой (скрываем её отображение в браузере).
Отображение картинки при нажатии на кнопку
Теперь давайте сделаем так, чтобы при нажатии на кнопку, картинка отображалась в браузере.
HTML
Показать/Скрыть картинку
JS
function myImg()
В данном примере, мы просто поменяли местами стиль отображения картинки. То есть, изначально при открытии HTML документа картинка у нас не видна (style=»display:none;»), а когда мы нажимаем на кнопку, то происходит замена display:none на display:block и картинка становится видимой.
Появление и исчезновение картинки при нажатии кнопки
Теперь, поняв как всё работает, мы можем объединить первый и второй вариант кода и написать условие, используя операторы If Then Else:
HTML
Показать/Скрыть картинку
JS
function myImg() < let elem = document.getElementById(‘img_1’); // получаем элемент по ID let style = getComputedStyle(elem); // получаем его стили if (style.display === ‘none’) < document.getElementById(‘img_1′).style.display=’block’; >else if (style.display !== ‘none’) < document.getElementById(‘img_1′).style.display=’none’; >>
В этом примере, мы изначально делаем картинку невидимой, указав style=»display:none;».
При нажатии на кнопку, мы получаем ссылку на нашу картинку по ID.
Затем, с помощью getComputedStyle получаем объект, содержащий значения всех CSS-свойств элемента (в данном случае нашей картинки).
После этого происходит проверка, если у картинки свойство display равно none (то есть, если картинка не отображается), то мы меняем его на block и тем самым выводим картинку на экран.
Если же свойство display не равно none (то есть картинка видна), то мы меняем его на none и тем самым скрываем изображение.
Обратите внимание на то, что втором условии мы выполнили проверку именно неравенства (указали НЕ равно none), хотя могли написать условие else if (style.display === ‘block’). Этот вариант тоже будет работать, но при условии что для отображения картинки мы всегда будем использовать display:block.
Видео по теме урока
Источник: d-nik.pro