Учитывая цвет фона, черный или белый текст?
Настраивать на готовом:
$(function() {
$("img")
.mouseover(function() {
var src = $(this).attr("src").match(/[^\.]+/) + "over.gif";
$(this).attr("src", src);
})
.mouseout(function() {
var src = $(this).attr("src").replace("over.gif", ".gif");
$(this).attr("src", src);
});
});
Для тех, которые используют источники изображения URL:
$(function() {
$("img")
.mouseover(function() {
var src = $(this).attr("src");
var regex = /_normal.svg/gi;
src = this.src.replace(regex,'_rollover.svg');
$(this).attr("src", src);
})
.mouseout(function() {
var src = $(this).attr("src");
var regex = /_rollover.svg/gi;
src = this.src.replace(regex,'_normal.svg');
$(this).attr("src", src);
});
});
4 ответа
Взгляните на эту страницу: Расчет цветового контраста с помощью PHP
Имейте в виду, что если черный и белый - ваш единственный выбор, у вас обязательно будут случаи, когда ни один из они работают особенно хорошо.
Вот алгоритм, который можно использовать для расчета коэффициента контрастности яркости вашего текста:
http://juicystudio.com/services/aertcolourcontrast.php
Вы можете использовать эта формула со значениями белого и черного для расчета, которая дает более высокое соотношение и, следовательно, более читаемый текст.
Простым, но не идеальным решением было бы суммировать отдельные компоненты (RGB), и чем больше это значение, тем больше «светлее цвета». Таким образом, для высокого значения вы можете использовать черный в качестве переднего плана, а для низкого значения использовать белый.
Затем вы можете улучшить этот метод, сделав конкретные случаи для цветов в оттенках серого (R = G = B), которые, за исключением очень темно-серый, белый текст плохо отображается.
Изменить: Это, конечно, означает, что вам нужно знать формат хранения RGB в шестнадцатеричном значении, стандартное хранилище 24bpp - 0x00RRGGBB для 8 шестнадцатеричных цифр.
Я бы вычислил среднее значение компонентов RGB и затем решил, использовать ли черный или белый цвет, например, белый до 0x66