03.07.2019, 12:56
|
Новичок на форуме
|
|
Регистрация: 03.07.2019
Сообщений: 5
|
|
помогите пожалуйста с версией для слабовидящих
При использовании белого текста на черном фоне иконка не пропадает, так как является черная, изменил цвет на фотошопе, как сделать так, чтобы при использовании черной темы автоматически появлялась белая картинка.
//Изменение цвета
$("#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;
}
})
|
|
03.07.2019, 14:11
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,223
|
|
Сообщение от SAncheZ
|
как сделать так, чтобы при использовании черной темы автоматически появлялась белая картинка.
|
Можно применить технологию "спрайта"...
http://htmlbook.ru/faq/kak-sdelat-ch...vedenii-na-nee
|
|
03.07.2019, 14:55
|
Новичок на форуме
|
|
Регистрация: 03.07.2019
Сообщений: 5
|
|
Не совсем нужно это для данной задачи. Задача не заключается в том, чтобы при наведении курсора менялась картинка. Благодарю за помощь, Ваш пример использую для другой задачи.
Спасибо!!
|
|
03.07.2019, 15:37
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,120
|
|
SAncheZ,
что мешает добавить три строки
$("картинка").attr("src", "ссылка на белую") // ссылка на чёрную
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
|
|
03.07.2019, 15:39
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,223
|
|
Сообщение от SAncheZ
|
Задача не заключается в том, чтобы при наведении курсора менялась картинка.
|
Ты совсем не понял в чем заключается технология спрайта...
|
|
03.07.2019, 15:41
|
Новичок на форуме
|
|
Регистрация: 03.07.2019
Сообщений: 5
|
|
<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;
}
})
|
|
03.07.2019, 15:49
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,120
|
|
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;
}
})
});
|
|
03.07.2019, 15:52
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,223
|
|
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>
|
|
03.07.2019, 15:54
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
Обратите внимание, что 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, зачем повторять однотипный код?
Последний раз редактировалось Malleys, 03.07.2019 в 16:18.
Причина: Перенёс localStorage.color = id; в функцию setTheme
|
|
03.07.2019, 15:55
|
Новичок на форуме
|
|
Регистрация: 03.07.2019
Сообщений: 5
|
|
$(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;
}
})
});
|
|
|
|