Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.07.2019, 12:56
Новичок на форуме
Отправить личное сообщение для SAncheZ Посмотреть профиль Найти все сообщения от SAncheZ
 
Регистрация: 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;
}
})
Ответить с цитированием
  #2 (permalink)  
Старый 03.07.2019, 14:11
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,223

Сообщение от SAncheZ
как сделать так, чтобы при использовании черной темы автоматически появлялась белая картинка.
Можно применить технологию "спрайта"...
http://htmlbook.ru/faq/kak-sdelat-ch...vedenii-na-nee
Ответить с цитированием
  #3 (permalink)  
Старый 03.07.2019, 14:55
Новичок на форуме
Отправить личное сообщение для SAncheZ Посмотреть профиль Найти все сообщения от SAncheZ
 
Регистрация: 03.07.2019
Сообщений: 5

Не совсем нужно это для данной задачи. Задача не заключается в том, чтобы при наведении курсора менялась картинка. Благодарю за помощь, Ваш пример использую для другой задачи.
Спасибо!!
Ответить с цитированием
  #4 (permalink)  
Старый 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.
Ответить с цитированием
  #5 (permalink)  
Старый 03.07.2019, 15:39
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,223

Сообщение от SAncheZ
Задача не заключается в том, чтобы при наведении курсора менялась картинка.
Ты совсем не понял в чем заключается технология спрайта...
Ответить с цитированием
  #6 (permalink)  
Старый 03.07.2019, 15:41
Новичок на форуме
Отправить личное сообщение для SAncheZ Посмотреть профиль Найти все сообщения от SAncheZ
 
Регистрация: 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;
}
})
Ответить с цитированием
  #7 (permalink)  
Старый 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;
}
})

});
Ответить с цитированием
  #8 (permalink)  
Старый 03.07.2019, 15:52
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 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>
Ответить с цитированием
  #9 (permalink)  
Старый 03.07.2019, 15:54
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 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
Ответить с цитированием
  #10 (permalink)  
Старый 03.07.2019, 15:55
Новичок на форуме
Отправить личное сообщение для SAncheZ Посмотреть профиль Найти все сообщения от SAncheZ
 
Регистрация: 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;
}
})

});
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите пожалуйста разобраться с XML Rockship (X)HTML/CSS 0 07.12.2015 20:48
Оцените тему (2 в 1 с версией для слабовидящих) VAB Ваши сайты и скрипты 3 24.11.2015 01:21
помогите обьединить скрипты для rsform polyakov_2004 Общие вопросы Javascript 1 10.04.2013 21:29
Помогите пожалуйста! Veritaspl jQuery 17 05.04.2013 10:31
Пожалуйста помогите решить задачу на java alex01rus1991 Элементы интерфейса 9 27.11.2012 01:02