Форум

SAncheZ · #1 (**permalink**) 03.07.2019, 12:56

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

//Изменение цвета
$("#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;
}
})

ksa · #2 (**permalink**) 03.07.2019, 14:11

Сообщение от SAncheZ

как сделать так, чтобы при использовании черной темы автоматически появлялась белая картинка.

Можно применить технологию "спрайта"...

http://htmlbook.ru/faq/kak-sdelat-ch...vedenii-na-nee

SAncheZ · #3 (**permalink**) 03.07.2019, 14:55

Не совсем нужно это для данной задачи. Задача не заключается в том, чтобы при наведении курсора менялась картинка. Благодарю за помощь, Ваш пример использую для другой задачи.
Спасибо!!

рони · #4 (**permalink**) 03.07.2019, 15:37

SAncheZ,
что мешает добавить три строки
$("картинка").attr("src", "ссылка на белую") // ссылка на чёрную
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

ksa · #5 (**permalink**) 03.07.2019, 15:39

Сообщение от SAncheZ

Задача не заключается в том, чтобы при наведении курсора менялась картинка.

Ты совсем не понял в чем заключается технология спрайта...

SAncheZ · #6 (**permalink**) 03.07.2019, 15:41

<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>
************************************************** **********
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;
}
})

рони · #7 (**permalink**) 03.07.2019, 15:49

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;
}
})

});

ksa · #8 (**permalink**) 03.07.2019, 15:52

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>

Malleys · #9 (**permalink**) 03.07.2019, 15:54

Обратите внимание, что 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, зачем повторять однотипный код?

SAncheZ · #10 (**permalink**) 03.07.2019, 15:55

$(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;
}
})

});

Форум

Справочник

Discord чат

Курсы javascript