Менять цветовую гамму сайта с помощью случайной картинки?

Question

[myaso_26]

Здравствуйте. Хотел задать вопрос. Ситуация такая, у меня есть стандартный скрипт на рандом картинки. При обновлении страницы, выбирается случайная и ставится на шапку.

<script language="JavaScript">
<!--
var a=Math.round(Math.random()*3)
image = new Array();
image[0]="img/green.png"
image[1]="img/black.png"
image[2]="img/blue.png"
document.write ("<img src="+image[a]+">");
//-->
</script>

Я бы хотел, присвоить к этим параметрам определенные переменные, чтобы при случайной выбранной картинке, менялась цветовая гамма сайта. Например цвет шрифта, элементы hr и h1, и так далее.
Чтобы примерно было так:
- Обновил страницу, случайно выбралось green.png, и сайт приобрел зеленые элементы.
- Снова обновил страницу, случайно выбралась blue.png, и сайт стал с синими элементами.

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

Answer 1

[Антон]

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

image = new Array();
image[0]=array(
 'path' => 'адрес до картинки',
'class' => 'green',
)

И делать это лучше не на JS, а на PHP в вашем случае, + дописывать к подключению стиля
GET параметр, который не будет давать css'ке закешироваться

<link rel="stylesheet" href="style.css?v=<?= time()?>">

Comments

[myaso_26]

Вот что что, познания, даже такими легкими, что в java, что в php, похвастаться не могу. Мне нужен какой-нибудь пример рабочий, чтобы разобраться в этом. Если вам не сложно.

[Виталий Першин]

вот так:

image[0] = {
    'path':  'адрес до картинки',
    'class':  'green',
}

[myaso_26]

Виталий, Спасибо, это я понял, а как передать этот параметр в body? Чтобы не мешали другим классам, ведь картинок будет около 15, и у каждого свой класс.

Answer 2

[Вадим Кот]

С помощью javascript можно вычислить средний цвет изображения и затем уже его применять как необходимо
Вот статья на хабре по этому поводу https://habr.com/ru/post/419309/
Там используется библиотека https://github.com/fast-average-color/fast-average... - в статье есть примеры использования. Ну и в readme репозитория (https://github.com/fast-average-color/fast-average... документация с примерами.

Comments

[myaso_26]

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

Человек. в черном костюме, с голубыми глазами - картинка под номером #1
Девушка в фиолетовом платье, с черными глазами - картинка под номером два

Когда скрипт выбирает случайную картинку, допустим под номером два, мне не нужно было чтобы сайт приобретал фиолетовые тона, а наоборот, черные. А если допустим выбирается первая картинка, то не черные тона, а голубые.

[Вадим Кот]

Тогда все еще проще и нужно просто в массив с изображениями добавить еще и заранее предопределенные цвета и при выбора рандомного элемента массива оперировать этим цветом

const a = Math.round(Math.random() * 3);
const image = [];
image[0] = {src: "img/green.png", color: "d2d2d2"};
image[1] = {src: "img/black.png", color: "142222"};
image[2] = {src: "img/blue.png", color: "cccccc"};
document.write ("<img src=" + image[a].src + ">");
// image[a].color цвет соответствующий для рандомной картинки

[myaso_26]

Вадим Кот, Я понял, спасибо. Ну лечше наверно будет подтягивать целый класс в body, только как это сделать. Обойти кеширование я в принципе смогу стилей, чтобы браузер постоянно заного загружал сайт и не хранил в себе уже загруженное.

[Вадим Кот]

myaso_26, А чем вам кеширование помешало? Вы же будете и картинку вставлять и класс добавлять скриптом к уже подгруженным в браузер ресурсам. Скрипт на стороне клиента будет уже делать все необходимые манипуляции.

[myaso_26]

Вадим Кот, ну ладно, хорошо. То есть, получается так? Если не правильно, подправьте пожалуйста

<html>
<head>
</head>

<body>
<script language="JavaScript">
const a = Math.round(Math.random() * 3);
const image = [];
image[0] = {
    'path':  'адрес до картинки',
    'class':  'green',
}
image[1] = {
    'path':  'адрес до картинки',
    'class':  'green',
}
document.write ("<img src="+image[a].path+">");
document.write ("<body class="+image[a].class+">");
</script>
</body>
</html>

[Вадим Кот]

myaso_26, вместо

document.write ("<body class="+image[a].class+">");

используйте document.body.classList.add

const body = document.body;
const a = Math.round(Math.random() * 3);
const image = [];

image[0] = {src: "img/green.png", color: "green"};
image[1] = {src: "img/black.png", color: "black"};
image[2] = {src: "img/blue.png", color: "blue"};

document.write ("<img src=" + image[a].src + ">");
body.classList.add(image[a].color);

Так как вы делаете, вы перезатрете те классы, которые уже есть в body

[Вадим Кот]

И изображение нужно создавать так

const img = document.createElement('img');
img.src = image[a].src;

И вставлять его в дом с помощью appendChild() https://developer.mozilla.org/ru/docs/Web/API/Node...
или insert​Before() https://developer.mozilla.org/ru/docs/Web/API/Node...
Прочтите https://learn.javascript.ru/modifying-document