как поменять картинку js
Для того, чтобы поменять картинку нужно изменить атрибут src у элемента на новый путь к картинке.
id="myImg" src="old-image.jpg" alt="Old Image"> onclick="changeImage()">Change Image function changeImage() const myImg = document.getElementById('myImg'); myImg.src = 'new-image.jpg'; > /scirpt> В результате выполнения кода выше, картинка на странице будет заменена на новую.
Как изменить картинку на сайте с помощью просмотра кода элемента?
Я знаю как менять текст, но с картинками как то не разобрался. Заранее спасибо! P.S. Я знаю что другие пользователи не смогут увидеть то что я сделал.
Лучший ответ
Остальные ответы
Картинку можно только поменять на другую картинку.
Вставляй путь новой картинки.
Магомед Расулов Ученик (136) 8 лет назад
То есть вставить путь нужной картинки в место картинки на сайте? Если так, то как мне узнать путь нужной картинки?
Дмитрий Мыслитель (5261) Выкладываешь картинку в интернет, открываешь её и смотришь какой у неё адрес.
Как изменить картинку на сайте при определенном разрешении?
Необходимо, чтобы при мобильном разрешении была одна картинка, а при десктопном разрешении — другая. Как это можно осуществить?
Отслеживать
10.5k 7 7 золотых знаков 25 25 серебряных знаков 41 41 бронзовый знак
задан 28 июл 2017 в 13:27
123 1 1 золотой знак 1 1 серебряный знак 6 6 бронзовых знаков
гуглить css media queries
28 июл 2017 в 13:35
Что именно за картинка? Фон или img?
28 июл 2017 в 13:37
Картинка img,не фон
28 июл 2017 в 13:49
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Медиа-запрос
Допустим, по дефолту имеем background-image:url(«images/main.png»); И определяем медиа-запрос для девайсов с разрешением от 320 до 500 пикселей:
@media (min-width:320px) and (max-width:500px) < .your-block < background-image:url("images/mobile.png"); >> Если нужно, чтобы менялась именно содержательная картинка(вставленная с помощью тега img в ваш html — алгоритм тот же, только у вас должно быть две картинки, допустим одна имеет класс mobile-img , вторая соответственно main-img . И получаете что-то вроде вот такого css
.mobile-img < display:none; >@media (min-width:320px) and (max-width:500px) < .mobile-img < display:block; >.main-img < display: none; >> Отслеживать
9,644 4 4 золотых знака 35 35 серебряных знаков 72 72 бронзовых знака
ответ дан 28 июл 2017 в 13:37
Klimenko Kirill Klimenko Kirill
2,226 1 1 золотой знак 11 11 серебряных знаков 37 37 бронзовых знаков
Я бы использовал js, чтобы не грузить большие картинки на мобильные
28 июл 2017 в 16:15
Можно и так, но это ведь уже вопрос опитимизации)
28 июл 2017 в 16:21
Смотрите в сторону атрибутов srcset, sizes у элемента img или используйте возможности элемента picture. Элемент picture имеет более «продвинутые» возможности.
Можно не только изменять (увеличивать или уменьшать) фактический размер картинки при различных плотностях или разрешения экрана устройства, но, например, отобразить вместо альбомной картинки — картинку портретной ориентации, что порой бывает полезно при создании адаптивного/отзывчивого сайта или приложения.
Поддержка браузерами srcset и picture.
Но там где возможно, например для логотипа, лучше использовать векторный формат изображений — SVG. Формат широко поддерживается браузерами.
Как вставить картинку в HTML-код страницы
В статье разбираем, как добавить картинки в HTML-код: какой формат изображения подходит, как изменить размер картинки в HTML, как задать выравнивание и добавить рамку.
Наш мозг устроен так, что мы лучше воспринимаем и запоминаем информацию, которая подкреплена визуальными образами. Можно потратить время на то, чтобы вспомнить и записать закон всемирного тяготения, но образ Ньютона, которому на голову падает яблоко, представляется сразу. Вспомните, сколько полезной информации сразу же ассоциируется с конкретной картинкой, схемой или иллюстрацией.
Точно так же визуальная составляющая важна для сайтов. Изображения привлекают внимание, помогают с восприятием информации и влияют на внешний вид страниц. Посмотрите на подборку красивых сайтов из галереи SiteSee — на них большая часть информации в картинках.
Если вы делаете сайт на движке, скорее всего, картинки на страницы можно добавить с помощью конструктора. Но если у вас самописный сайт или вы решили с нуля сверстать красивую рассылку, вам придется вставить изображение в HTML-код. Это несложно, но для новичка в сайтостроении может показаться задачей со звездочкой.
В статье пошагово и не торопясь разбираемся, как добавить картинку в HTML ��
Как вставить картинку в HTML-код:
- Выбрать изображение
- Определить формат изображений
- Выбрать название файла картинки
- Использовать img-тег
- Вставить ссылку в картинку
- Шпаргалка: как добавить картинку в HTML-код страницы
Выбрать изображение
Перед тем как добавить изображение в HTML-код сайта, найдите источник, с которого можно скачать картинки. Если используете фотографии, которые сделали самостоятельно, никаких проблем не возникнет. Другое дело, если планируете в качестве фона или дополнения к дизайну страницы вставить картинку в HTML из интернета. Размещение изображений на сайте без учета авторского права владельца может повлечь за собой неприятные последствия — вас могут заставить удалить картинку или даже оштрафовать.
Чтобы обезопасить себя, проверяйте условия, на которых разрешено использовать выбранные изображения.
Использование картинок регулирует группа лицензий Creative Commons. Это американская некоммерческая организация, которая разработала варианты соглашений, по которым в интернете распространяется контент.
На сайтах для скачивания картинок встречаются такие лицензии и условия использования бесплатных изображений:
- CC Attribution — чтобы использовать скачанные картинки, укажите автора.
- CC Attribution-NoDerivs — укажите автора и не видоизменяйте исходное изображение.
- CC Attribution-NonCommercial — укажите авторство и используйте картинку в некоммерческих целях.
- СС0 или Public Domain — можете свободно использовать в любых проектах без указания авторства.
Для платных изображений есть такие типы лицензий:
- Royalty-Free — покупаете картинку один раз и используете изображение без временных ограничений. Эксклюзивные права остаются у автора.
- Editorial — такие картинки нельзя использовать в коммерческих целях.
- Rights-Managed — получите исключительное право на использование картинки.
Вот список сервисов с бесплатными изображениями:
Они предлагают миллионы бесплатных картинок в высоком разрешении под лицензией СС0, которая дает свободно пользоваться ими для своих целей.
Если не нашли нужную картинку на бесплатных стоках, продолжите поиски на платных сервисах:
Большинство изображений распространяются по Royalty-Free лицензии.