Задать вопрос
Tolly
@Tolly
css

Как заменить картинку, одну на другую?

Как при выключенном javascript заменить картинку с одной на другую?

Код на codepen, но без тега noscript, так как при отключенном javascript сайт не работает.

<!DOCTYPE html>
<html lang="en">
<head>
	<style>
		img {width: 200px; height: 200px;}
		div {width: 200px; height: 200px; overflow: hidden;}
	</style>
</head>
<body>

<div>
	<img src="https://loremflickr.com/g/200/200/carnaval">
	<noscript>
		<img src="https://loremflickr.com/g/200/200/cat">
	</noscript>
</div>

</body>
</html>
  • Вопрос задан
  • 642 просмотра
Комментировать
Подписаться 3 Простой Комментировать
Решения вопроса 3
delphinpro
@delphinpro Куратор тега CSS
frontend developer
dollar показал один и вариантов (не лучший).
Вот еще один (тоже хреновый)
<img src="https://loremflickr.com/g/200/200/carnaval"
     style="display:none"
     onload="this.style.display='inline-block'"
>


И еще один, применяемый повсеместно, лучший на мой взгляд (плюс одно решение будет работать для любых элементов)

<html id="no-js" lang="en">
<head>
  <script>document.documentElement.id = 'js'</script>
  <style>#no-js .no-js-hidden { display: none !important; }</style>
  ...
</head>
<body>
...
<img class="no-js-hidden" src="https://loremflickr.com/g/200/200/carnaval">
...


Плюс вы можете использовать в ваших стилях селекторы #no-js и #js для разделения по принципу наличия включенного javascript
Ответ написан
1 комментарий
1 комментарий
dollar
@dollar
Делай добро и бросай его в воду.
Если я вас правильно понял, то примерно так:
<div>
  <script>
    document.write('<img src="https://loremflickr.com/g/200/200/carnaval">');
  </script>
  <noscript>
    <img src="https://loremflickr.com/g/200/200/cat">
  </noscript>
</div>
Ответ написан
9 комментариев
9 комментариев
@Insayt
Играйте значением z-index https://codepen.io/anon/pen/qvoEex
Ответ написан
3 комментария
3 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Настройка сервера
18 апр. 2024, в 21:56
2000 руб./за проект
Помощь с водпресс
18 апр. 2024, в 21:00
150 руб./за проект
Спарсить ссылки на все товары конкретного продавца в озон
18 апр. 2024, в 20:13
2000 руб./за проект
Ещё заказы