помогите пожалуйста с версией для слабовидящих
При использовании белого текста на черном фоне иконка не пропадает, так как является черная, изменил цвет на фотошопе, как сделать так, чтобы при использовании черной темы автоматически появлялась белая картинка.
//Изменение цвета $("#color a").on("click", function() { $("body").removeClass("standart"); $("body").removeClass("invert"); $("body").removeClass("blue"); switch ($(this).attr("id")) { case "standart": $("body").addClass("standart"); document.cookie = "color=standart; path=/"; break; case "invert": // это черный фон $("body").addClass("invert"); document.cookie = "color=invert; path=/"; break; case "blue": $("body").addClass("blue"); document.cookie = "color=blue; path=/"; break; } }) |
Цитата:
http://htmlbook.ru/faq/kak-sdelat-ch...vedenii-na-nee |
Не совсем нужно это для данной задачи. Задача не заключается в том, чтобы при наведении курсора менялась картинка. Благодарю за помощь, Ваш пример использую для другой задачи.
Спасибо!! |
SAncheZ,
что мешает добавить три строки $("картинка").attr("src", "ссылка на белую") // ссылка на чёрную Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Цитата:
|
<body class="invert big">
<div id="blind-panel"> <span id="font-size"> Размер шрифта: <a id="font-small" title="Маленький шрифт">A</a> <a id="font-medium" class="" title="Средний шрифт">A</a> <a id="font-big" title="Большой шрифт" class="active">A</a> </span> <span id="color"> Цвет сайта: <a id="standart" title="Черное на белом">A</a> <a id="invert" title="Белое на черном">A</a> <a id="blue" title="Черное на синем">A</a> </span> </div> <div class="wrapper"> <header class="header"> <a class="logo" href="https://kpfu.ru/elabuga"><img src="./portal_blind_files/logo_min.png"></a> <h1></h1> <div id="horisontal-menu"> <div> <nav role="navigation" aria-labelledby="block-blind-nauka-menu" id="block-blind-nauka" class="contextual- <ul> <li> </li> </ul> </nav> </div> </div> </header><!-- .header--> ************************************************** ********** js //Изменение цвета $("#color a").on("click", function() { $("body").removeClass("standart"); $("body").removeClass("invert"); $("body").removeClass("blue"); switch ($(this).attr("id")) { case "standart": $("body").addClass("standart"); document.cookie = "color=standart; path=/"; break; case "invert": $("body").addClass("invert"); $("logo").attr("src", "ссылка на белую") document.cookie = "color=invert; path=/"; break; case "blue": $("body").addClass("blue"); document.cookie = "color=blue; path=/"; break; } }) |
SAncheZ,
используйте форматирование форума, кнопки перед вами
$(function() {
$("#color a").on("click", function()
{
$("body").removeClass("standart");
$("body").removeClass("invert");
$("body").removeClass("blue");
switch ($(this).attr("id"))
{
case "standart":
$("body").addClass("standart");
$(".logo img").attr("src", "./portal_blind_files/logo_min.png")
document.cookie = "color=standart; path=/";
break;
case "invert":
$("body").addClass("invert");
$(".logo img").attr("src", "ссылка на белую, где ссылка?")
document.cookie = "color=invert; path=/";
break;
case "blue":
$("body").addClass("blue");
$(".logo img").attr("src", "./portal_blind_files/logo_min.png")
document.cookie = "color=blue; path=/";
break;
}
})
});
|
SAncheZ, так более понятно?
<style type='text/css'>
div {
width: 200px;
height: 200px;
border: 1px solid;
}
.black {
width: 200px;
height: 200px;
background-image: url('http://htmlbook.ru/example/images/sun1.png');
}
.standart {
background-image: url('http://htmlbook.ru/example/images/sun2.png');
}
</style>
<div class='black'></div>
<div class='standart'></div>
|
Обратите внимание, что standard, а не standart! Вместо печенек лучше использовать локальное хранилище!
<div id="color">
<button id="standard">standard</button>
<button id="invert">invert</button>
<button id="blue">blue</button>
</div>
<div class="logo"><img></div>
<style>
html, body {
background: no-repeat center;
height: 100%;
}
body.standard {
background-color: white;
}
body.invert {
background-color: black;
}
body.blue {
background-color: blue;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
function setTheme(id) {
var images = {
standard: "https://picsum.photos/id/1081/640/480",
invert: "https://picsum.photos/id/1004/640/480",
blue: "https://picsum.photos/id/1015/640/480"
};
$("body").addClass(id);
$(".logo img").attr("src", images[id]);
localStorage.color = id;
}
$(function() {
setTheme(localStorage.color || "standard");
});
$("#color button").on("click", function() {
$("body").removeClass("standard invert blue");
var id = $(this).attr("id");
setTheme(id);
});
</script>
рони, SAncheZ, зачем повторять однотипный код? |
$(function() {
$("#color a").on("click", function()
{
$("body").removeClass("standart");
$("body").removeClass("invert");
$("body").removeClass("blue");
switch ($(this).attr("id"))
{
case "standart":
$("body").addClass("standart");
$(".logo img").attr("src", "./portal_blind_files/logo_min.png")
document.cookie = "color=standart; path=/";
break;
case "invert":
$("body").addClass("invert");
$(".logo img").attr("src", "./portal_blind_files/logo_min1.png")
document.cookie = "color=invert; path=/";
break;
case "blue":
$("body").addClass("blue");
$(".logo img").attr("src", "./portal_blind_files/logo_min.png")
document.cookie = "color=blue; path=/";
break;
}
})
});
|
| Часовой пояс GMT +3, время: 23:18. |