Как заставить изображение onclick менять все цвета текста?
Я хотел добавить на свой веб-сайт функцию, при которой щелчок по красному изображению превращает текст всей страницы в красный и так далее для других цветов. Я попытался выполнить приведенный ниже код, но он меняет только цвет, установленный для <h>, но не текст в <div> или стилизованный в css. Извините, если это немного сбивает с толку. Я только начинаю.
<body text = "<?PHP echo $_SESSION["textcolor"]; ?>">
<ul>
<li><a href='change_color.php?w=1'><img src='images/black.png'></a></li>
<li><a href='change_color.php?w=2'><img src='images/blanched_almond.png'></a></li>
<li><a href='change_color.php?w=3'><img src='images/orange.png'></a></li>
<li><a href='change_color.php?w=4'><img src='images/dark_red.png'></a></li>
</ul>
</body>
change_color.php
<?PHP
session_start();
$w = $_GET['w'];
switch ($w)
{
case 1:
$_SESSION["textcolor"] = "#00000";
break;
case 2:
$_SESSION["textcolor"] = "#ffebcd";
break;
case 3:
$_SESSION["textcolor"] = "ffa500";
break;
case 4:
$_SESSION["textcolor"] = "8b0000";
break;
}
echo "<script>window.history.back()</script>";
?>
Вы хотите продолжать делать это на php, что влечет за собой вызов сервера каждый раз, или будет возможность сделать это в Javascript на стороне клиента?
Я сейчас учусь делать простую сеть и хочу делать это лучше. Если делать это в javascript лучше, это возможно @AHaworth
Почему бы не сделать это на чистом JS?
Если это не сработает, мне, возможно, придется сделать это в JS
Я заметил, что у вас есть случайный закрывающий </div> в вашем примере кода, и я не знаю, что вы имеете в виду под <h> - нет <h> - вы имели в виду <h1> в заголовке? В настоящее время ваш пример показывает только список ссылок. Ваш вопрос не совсем ясен, поэтому, пожалуйста, не торопитесь и перефразируйте его так, чтобы было легко понять, какое содержание страницы вы говорите, как оно структурировано и какие элементы на этой странице вы хотите изменить. цвет.
Ответы 3
Цвет текста можно установить с помощью свойства CSS color (атрибут body элементов text устарел и неэффективен в использовании) - лучше всего это делать на самом элементе body, поэтому каждый дочерний узел наследует стиль через CSS.
Я определенно не эксперт по PHP, но считаю, что правильный способ вывода значения из PHP во встроенное значение должен дать вам то, что вам нужно:
<body style = "color: <?php echo($_SESSION['textcolor']);?>">...</body>
РЕДАКТИРОВАТЬ
Если вы хотите сделать это немного более удобным для пользователя, вы можете добавить клиентский JavaScript для обработки изменений цвета за вас. Ваш код HTML и JavaScript будет выглядеть примерно так (см. Рабочую демонстрацию ниже):
<ul>
<li><a href = "#" data-col = "#000000">Black</a></li>
<li><a href = "#" data-col = "#ff0000">Red</a></li>
<li><a href = "#" data-col = "#00ff00">Green</a></li>
<li><a href = "#" data-col = "#0000ff">Blue</a></li>
</ul>
<hr />
<h1>Change colours using the links - without browser refresh!</h1>
<p>Authoritatively target ethical imperatives for customer directed meta-services. Professionally implement robust platforms through user-centric niches.</p>
<div>This is some text inside a div</div>
<script>
const links = Array.from(document.querySelectorAll('a[data-col]'));
links.forEach((link) => {
link.addEventListener('click', (e) => {
e.preventDefault();
document.body.style.color = link.getAttribute('data-col');
});
});
</script>Этот код работает в любом современном браузере - без необходимости в сервере, поскольку ваш единственный статический HTML-код может быть запущен сам по себе, даже в файловой системе.
Я сделал то, что ты сказал, ничего не меняется.
@underrated - я обновил свой ответ решением на основе JavaScript, так как это может быть более подходящим.
Это не работает для текста внутри div.
Я задам еще один вопрос, чтобы прояснить это.
Я считаю, что решение, которое я предоставил, решает описанную вами проблему - пользователь выбирает разные цвета, и содержимое на странице перекрашивается в этот цвет - независимо от того, находится ли текст в div или каком-либо другом элементе. Разве это не то, что вы хотели сделать?
PHP просматривает ваш код построчно. И вы отправляете переменную $_SESSION["textcolor"] в строке 1, но вы устанавливаете для нее значение ниже. Вот почему тег цвета был пуст. Вам просто нужно написать код PHP перед кодом HTML следующим образом:
<?PHP
session_start();
$w=$_GET['w'];
switch($w)
{
case 1:$_SESSION["textcolor"] = "#00000";break;
case 2:$_SESSION["textcolor"] = "#ffebcd";break;
case 3:$_SESSION["textcolor"] = "ffa500";break;
case 4:$_SESSION["textcolor"] = "8b0000";break;
}
echo "<script>
window.history.back()</script>";
?>
<body text = "<?PHP echo $_SESSION["textcolor"];?>">
<ul>
<li><a href='change_color.php?w=1'><img src='images/black.png'></a></li>
<li><a href='change_color.php?w=2'><img src='images/blanched_almond.png'></a></li>
<li><a href='change_color.php?w=3'><img src='images/orange.png'></a></li>
<li><a href='change_color.php?w=4'><img src='images/dark_red.png'></a></li></div>
</ul>
</body>
Я его протестировал, работает отлично. : D
Я только что понял, что это два отдельных файла. Решение заключается в инициализации сеанса в КАЖДОМ файле, который использует переменную $_SESSION следующим образом:
<body text = "<?PHP session_start(); echo $_SESSION["textcolor"];?>">
Обновлено: Еще одна вещь, которую вы должны исправить, - это то, что ваша программа отображает предупреждение, когда параметр поиска w не установлен. Вы можете исправить это, заменив это:
$w=$_GET['w'];
switch($w)
{
case 1:$_SESSION["textcolor"] = "#00000";break;
case 2:$_SESSION["textcolor"] = "#ffebcd";break;
case 3:$_SESSION["textcolor"] = "ffa500";break;
case 4:$_SESSION["textcolor"] = "8b0000";break;
}
с этим:
if (isset($_GET['w'])) {
$w=$_GET['w'];
switch($w)
{
case 1:$_SESSION["textcolor"] = "#00000";break;
case 2:$_SESSION["textcolor"] = "#ffebcd";break;
case 3:$_SESSION["textcolor"] = "ffa500";break;
case 4:$_SESSION["textcolor"] = "8b0000";break;
}
}
Он просто проверяет, установлен ли w, и просто пропускает оператор switch, если это не так.
И еще: в комментариях сказано, что text не является допустимым свойством HTML. Он древний, и вы не должны использовать его для чего-то большего, чем бездельничанье или тестирование, но это свойство (см. раздел «Свойства»).
Я сделал то, что вы просили, но он работает только с кодом в разделе <h>, но не в <div>. Даже цвет текста нижнего колонтитула не изменился.
Я нашел проблему и отредактировал свой ответ. Кстати: вы должны добавить имя файла к каждому блоку кода, если вы публикуете несколько файлов, я думал, что два блока кода в вашем вопросе были в одном файле.
Я сделал то, что вы сказали, но первое, что я увидел, это мой текст <h1> стал синим. И когда я вставил код поиска w, который вы мне дали, экран стал белым, когда я щелкнул изображение.
Я задам еще один вопрос, чтобы прояснить это.
Я только что сделал это, я думаю, это не лучший способ, но я думаю, что это сработает для вас. Также обратите внимание, где вы используете '! Important' в css.
<ul>
<li><a href = "#" data-col = "#000000">Black</a></li>
<li><a href = "#" data-col = "#ff0000">Red</a></li>
<li><a href = "#" data-col = "#00ff00">Green</a></li>
<li><a href = "#" data-col = "#0000ff">Blue</a></li>
</ul>
<hr />
<h1>Change colours using the links - without browser refresh!<span>TTTTT</span></h1>
<p>Authoritatively target ethical imperatives for customer directed meta-services. Professionally implement robust platforms through user-centric niches.</p>
<script>
const textNode = (el) => {
var n, a=[], walk=document.createTreeWalker(el,NodeFilter.SHOW_TEXT,null,false);
while(n=walk.nextNode()) a.push(n);
return a;
}
document.body.onload = () => {
const colors = Array.prototype.slice.call(document.querySelectorAll('a[data-col]'));
colors.map((value, key) => {
value.addEventListener('click', () => {
let node = Array.prototype.slice.call(textNode(document.body));
node.map((valueNode) => {
valueNode.parentNode.style.color = value.getAttribute('data-col');
})
});
})
}
</script>
@underrated, вы должны рассказать мне больше об этой проблеме. Я не знаю сейчас, какие изображения вы хотите заменить на какой текст
Спасибо! Вы действительно решили мою проблему! И под «не лучшим способом» вы можете объяснить, чтобы я мог принять к сведению в будущем.
@underrated Под этим я имел в виду, что я сделал это решение за 3 минуты, я не мог позволить себе больше времени прямо сейчас: D
Да, кстати, есть ли способ сделать так, чтобы цвет текста оставался неизменным при переходе на следующую страницу?
И можете ли вы исключить какой-либо класс, такой как нижний колонтитул или кнопка: hover? Извините за беспокойство.
Нет такого свойства html, как текст. Вы можете добавить тег стиля и цвет = $ _SESSION ["textcolor"]; Примерно так <body style = "color: '<? PHP echo $ _SESSION [" textcolor "];?>';">