Как заменить изображение

Как заменить изображение на новое сразу во всех местах использования изображения? #50312

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

Если раздел отсутствует на рабочей панели, то зайдите во вкладку “Настройки” и перейдите в раздел “Данные сайта”

Шаг 2

В Данных сайта выбираем из приведенного списка раздел Иллюстрации.

Шаг 3

Под изображением, которым нужно заменить, нажимаем кнопку Изменить.

Шаг 4

В открывшемся окне нажмите на кнопку «Выбрать файл»

Шаг 5

Выберите нужное вам изображение в каталогах компьютера и нажмите на кнопку Open(Откыть).

Шаг 6

После того, как путь к иллюстрации будет прописан нажмите на кнопку Сохранить изменения.

Читайте также

Мы создаём веб-сайты для России и зарубежных рынков с 1997 года. Наша команда – более пятисот сотрудников в разных странах и городах.

Понимание потребностей онлайн-бизнеса, опыт взаимодействия с тысячами клиентов, высокая квалификация персонала, собственные «ноу-хау» и хороший объём заказов позволяют веб-студии Мегагрупп.ру предлагать услуги высокого качества по удивительно низким и «вкусным» ценам.

Этот сайт был создан на платформе
CMS S3 от Megagroup.ru

Данный сайт защищен с помощью reCAPTCHA и соответствует
Политике конфиденциальности и Условиям использования Google.

Как заменить изображение без изменений HTML?

Всем привет! Я полный нуб в JS и прошу помощи. Гуглил много, но видимо моих знаний не хватает. Суть такая. Есть изображение, добавленное в html и у него нет id и только class . Как я могу с помощью JS или jQuery заменить картинку Вот фрагмент html:

Пытался присвоить id с помощью:

function myFoo1()

и заменять:

$('#defimage').attr('src', '/fileservice/file/download/a/233337/sc/494/h/c803022e0f37921830b75a0d243e73e0.png') 

Отслеживать
543 5 5 серебряных знаков 14 14 бронзовых знаков
задан 13 дек 2020 в 21:11
Константин Константин
11 1 1 бронзовый знак

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

element.querySelector(); — найдет первый попавшийся элемент.

const image = document.querySelector('.image'); image.setAttribute('src', 'https://picsum.photos/200/300?grayscale');

если картинок несколько

const images = document.querySelectorAll('.image'); images.forEach((image) => < image.setAttribute('src', 'https://picsum.photos/200/300?grayscale'); >);

Отслеживать
ответ дан 13 дек 2020 в 21:21
7,404 2 2 золотых знака 11 11 серебряных знаков 25 25 бронзовых знаков

Представим ситуацию, что у нас есть сайт, на котором есть всё, а нам нужна лишь картинка.
Первое, что я бы советовал сделать, это найти её родителя, который имеет идентификатор и чем уникальнее, тем лучше.

Допустим мы нашли и это выглядит так:

  
Как выглядит жираф
 
Жираф
 
 

Нам нужно обратиться к этому родителю по идентификатору, потом найти в нём все картинки, а после чего уже по порядковому номеру (индексу) найти именно нашу.

document // Обратимся к документу .getElementById('content') // Потому к родителю .getElementsByTagName('img')[0] // Возмём в нём первый по счёту элемент IMG .src = '//i.imgur.com/vsDvm4a.png' // И изменим в нём ссылку на нужную.

  
Как выглядит жираф
 
Жираф
 
 

Если наша картинка будет не первой, а допустим десятой, то нам нужно указать .getElementsByTagName(‘img’)[9] (9, потому что отсчёт с нуля).

В jQuery запись будет проще:

$('#content img') // Ищем IMG в родителе .eq(0) // Берём первую картинку .attr('src', '//i.imgur.com/vsDvm4a.png'); // Меняем значение атрибута SRC на своё

  
Как выглядит жираф
 
Жираф
 
 

Как изменить изображение в фотошопе, используя быструю маску

Наверно выделение и вырезание частей изображения одна из самых часто используемых операций. И от того, насколько хорошо мы выделили объект во многом зависит качество итогового изображения. На прошлом уроке мы использовали для выделения волшебную палочку и магнитное лассо. Эти инструменты иногда очень полезны, особенно при контрастном фоне изображения (белое на черном, синее на желтом и т.д.). Но что делать, если у нас, например, вот такое изображение.

Здесь нам не поможет ни волшебная палочка, ни магнитное лассо. Поэтому попробуем выделить наших собачек с помощью быстрой маски. Для этого создайте новый файл, поместите на его первый слой похожее фото и возьмите на панели инструментов инструмент -лассо- (не -магнитное лассо-, а просто -лассо-). Наша задача выделить область вокруг собачек, например, вот так:

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

Теперь возьмите инструмент -быстрая маска-:

Теперь двойным щелчком снова кликните по этому инструменту, чтобы появилось окно параметров. Убедитесь, что у Вас стоят такие же параметры:

Быстрая маска преобразовывает выделение во временную маску для упрощения редактирования. Она появляется в виде цветного наложения с настраиваемой прозрачностью. После редактирования при помощи любого инструмента рисования маска преобразуется обратно в выделенную область изображения.

Сейчас наше изображение выглядит так:

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

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

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

Теперь Редактирование -> Инверсия -> Del на клавиатуре и в итоге наши собачки выглядят так:

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

Создайте новый файл, размером 800 Х 300 с прозрачным фоном. Создайте новый слой и назовите его -шапка-. Пусть шапка сайта имеет размеры 800 Х 150 пикселов. Значит надо выделить прямоугольную область на слое -шапка- размером в половину холста и залить ее, например, коричневым цветом:

Теперь создайте новый слой с именем -собачки-. Чтобы перетащить на этот слой наших собачек, делаем активным окно с собачками (щелкаем по нему), копируем их (Ctrl+C), делаем активным окно с шапкой сайта и на слой -собачки- вставляем (Ctrl+V).

Наши собачки очень большие для шапки, поэтому их придется уменьшить. Для этого выбираем в меню Редактирование -> Трансформация -> Масштаб или Ctrl+t. Вокруг слоя с собачками появится рамка:

Подведите мышку к правому нижнему углу этой рамки, указатель мыши примет вид двунаправленной стрелки. Нажмите левую клавишу мыши и, удерживая нажатой клавишу Shift на клавиатуре, нажатой левой клавишей мыши уменьшайте размер рамки (ведите мышь к верхнему левому углу рамки).

Как только добьетесь нужного размера, щелкните по галочке на панели параметров:

Теперь выровняйте расположение собачек с помощью инструмента -перемещение- . Можно добавить эффекты. Для этого сделайте двойной щелчок мыши по слою на панели слоев, откроется окно эффектов слоя, выберите, например, тень и внутренняя тень:

Получится вот так:

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

Сначала соберем наши слои в один. Для этого в меню: Слой -> Выполнить сведение. Теперь на панели слоев у нас один слой.

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

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

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

В этой палитре фиксируются все ваши действия, нашим последним действием было кадрирование, щелкните на предыдущий шаг (Выполнить сведение), наше изображение снова имеет несколько слоев. Таким образом, можно откатывать шаги назад, если результат каких-либо изменений вам не нравится. Есть один нюанс: палитра «История» запоминает только 20 последних шагов. Подробнее о палитре «История» будет рассказано в уроке 8.

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

admin@site-do.ru
site-do.ru © 2009-2019 Копировать материалы сайта запрещено!
За нарушение авторских прав предусмотрена уголовная ответственность!
Телефон редакции +7(499)346-89-56
127051, г.Москва, Цветной бульвар, д. 11, стр. 6, офис 405.

Редактор Wix: Как заменить изображение на сайте

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

Важно:

Бесплатные медиафайлы Wix доступны только для цифрового использования на площадке Wix. Подробнее об этом в Условиях использования.

Чтобы заменить изображение:

1. Нажмите на фото в редакторе.
2. Нажмите Заменить фото.
3. Выберите новое фото в Медиаменеджере
4. Нажмите Выбрать изображение.

Совет:

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