Фоновое изображения в зависимости от показателя

@Zloben · Регистрация: 02.12.2016

Author24 — интернет-сервис помощи студентам

Здравствуйте, такой вопрос. Хочу сделать за фотографией человека фон(карточку), их всего 5 типов и надо чтобы они отображались при разном значение одной характеристики, которая есть в бд "w_staerke". Допустим если значение w_staerke от 30 до 64 = это один фон, если от 65 до 74 другой и тд, всего 5 таких критериев(карточек).

При помощи css можно решить этот вопрос или надо использовать php? Буду благодарен за пример или инфу. Спасибо

Скриншот прилагается.

@Пифагор · 06.03.2017, 06:05

Через switch-case ИМХО самое удобное.
Вот простой пример:

PHP

$a = 1;
$bg = '';
switch($a){
  case 1: $bg = 'red'; break;
  case 2: $bg = 'green'; break;
  case 3: $bg = 'yellow'; break;
  case 4: $bg = 'brown'; break;
  default: $bg = 'white';
}
echo '<p style="background-color: '.$bg.';">123123</p>';

@tarasalk · 06.03.2017, 08:52

Как по мне этим должны заниматься js и css, это ведь чисто отображение.

if тут лучше подходит чем switch, т.к. используется диапазоны значений.

Javascript

var w_staerke = 73;
 
var bgClass = getBackgroundClass(w_staerke);
 
$('#player').addClass(bgClass);
 
function getBackgroundClass(value) {
    if (value > 30 && value < 64) {
    return 'bg-red';
  }
  else if (value > 65 && value < 74) {
    return 'bg-green';
  }
    else {
    return 'bg-blue';
  }
}

@Пифагор · 06.03.2017, 09:02

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

if тут лучше подходит чем switch, т.к. используется диапазоны значений.

Лады. Пусть будет диапазон

PHP

$a = 13;
$bg = '';
switch($a){
  case ($a>0 && $a<=5): $bg = 'red'; break;
  case ($a>5 && $a<=10): $bg = 'green'; break;
  case ($a>10 && $a<=15): $bg = 'yellow'; break;
  case ($a>15 && $a<=20): $bg = 'brown'; break;
  default: $bg = 'white';
}
echo '<p style="background-color: '.$bg.';">123123</p>';

Добавлено через 2 минуты

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

Как по мне этим должны заниматься js и css, это ведь чисто отображение.

значение для условия которого берется из бд. Использовать JS - значит прикручивать AJAX или передавать костылями переменную PHP в JS.

@tarasalk · 06.03.2017, 09:10

Сообщение от Пифагор

Использовать JS - значит прикручивать AJAX

Не значит. Это значение легко можно передать в шаблон. Например в атрибут data.

HTML5

1	<p id="player" data-w_staerke="<?=$w_staerke?>">player</p>

И получить в js так

Javascript

1	var w_staerke = $('#player').data('w_staerke');

Я в vue.js так целые объекты передаю в виде json, проблем ноль.

@Пифагор · 06.03.2017, 09:15

Согласен. А теперь расскажите, для чего столько лишнего головняка, когда это все можно сделать через switch-case???

@Kerry_Jr · 06.03.2017, 09:29

Сообщение от Пифагор

Лады. Пусть будет диапазон

PHP, конечно, скушает и не подавится. но лучше использовать if-elseif-else, всё же switch-case даже по документации используется для проверки на конкретное значение.

@tarasalk · 06.03.2017, 09:36

Сообщение от Пифагор

для чего столько лишнего головняка

А где головняк то? вариант через if короче.
Дописать одну строчку для получение данных из data тоже не проблема.

@Zloben · 06.03.2017, 12:46 **[ТС]**

Спасибо всем большое за ответы. Мой уровень кроме как ксс и хтмл не велик, по этому пока трудно понять как действовать дальше. Смотрите, у меня есть страничка, где отображается схема игроков. За фотографией футболиста должен быть фон (url изображения) в зависимости от значение "w_staerke" (как я уже сказал ранее). Фон должен привязываться к значению position (см. скриншот).

Файл шаблона также прилагается (Не вставил, потому что много символов)
http://rgho.st/6nRgfYB2b

Подскажите пожалуйста что и куда, а то пока ничего не понятно.

@Zloben · 07.03.2017, 12:53 **[ТС]**

Спасибо всем большое за ответы. Мой уровень кроме как ксс и хтмл не велик, по этому пока трудно понять как действовать дальше. Смотрите, у меня есть страничка, где отображается схема игроков. За фотографией футболиста должен быть фон (url изображения) в зависимости от значение "w_staerke" (как я уже сказал ранее). Фон должен привязываться к значению position (см. скриншот).

Файл шаблона также прилагается (Не вставил, потому что много символов)
http://rgho.st/6nRgfYB2b

Подскажите пожалуйста что и куда, а то пока ничего не понятно.

Добавлено через 1 минуту
Вот js формации (formationws4.js). Шаблон не нужен
http://rgho.st/6Cx2ZlFLf

Добавлено через 23 часа 51 минуту
Я так понял, никто уже ничем не поможет)

@Zloben 0 / 0 / 0 Регистрация: 02.12.2016 Сообщений: 39
		1
	Фоновое изображения в зависимости от показателя 06.03.2017, 05:54. Показов 372. Ответов 9 Метки нет (Все метки) Здравствуйте, такой вопрос. Хочу сделать за фотографией человека фон(карточку), их всего 5 типов и надо чтобы они отображались при разном значение одной характеристики, которая есть в бд "w_staerke". Допустим если значение w_staerke от 30 до 64 = это один фон, если от 65 до 74 другой и тд, всего 5 таких критериев(карточек). При помощи css можно решить этот вопрос или надо использовать php? Буду благодарен за пример или инфу. Спасибо Скриншот прилагается. Миниатюры 0

@Пифагор 2169 / 1652 / 840 Регистрация: 10.01.2015 Сообщений: 5,190
	06.03.2017, 09:15	6
	Согласен. А теперь расскажите, для чего столько лишнего головняка, когда это все можно сделать через switch-case??? 0

@Kerry_Jr 3106 / 2591 / 1219 Регистрация: 14.05.2014 Сообщений: 7,236 Записей в блоге: 1
	06.03.2017, 09:29	7
	Сообщение от Пифагор Лады. Пусть будет диапазон PHP, конечно, скушает и не подавится. но лучше использовать if-elseif-else, всё же switch-case даже по документации используется для проверки на конкретное значение. 0

@tarasalk 1992 / 1216 / 440 Регистрация: 13.06.2013 Сообщений: 4,115
	06.03.2017, 09:36	8
	Сообщение от Пифагор для чего столько лишнего головняка А где головняк то? вариант через if короче. Дописать одну строчку для получение данных из data тоже не проблема. 0

@Zloben 0 / 0 / 0 Регистрация: 02.12.2016 Сообщений: 39
	06.03.2017, 12:46 [ТС]	9
	Спасибо всем большое за ответы. Мой уровень кроме как ксс и хтмл не велик, по этому пока трудно понять как действовать дальше. Смотрите, у меня есть страничка, где отображается схема игроков. За фотографией футболиста должен быть фон (url изображения) в зависимости от значение "w_staerke" (как я уже сказал ранее). Фон должен привязываться к значению position (см. скриншот). Файл шаблона также прилагается (Не вставил, потому что много символов) http://rgho.st/6nRgfYB2b Подскажите пожалуйста что и куда, а то пока ничего не понятно. Миниатюры 0

@Zloben 0 / 0 / 0 Регистрация: 02.12.2016 Сообщений: 39
	07.03.2017, 12:53 [ТС]	10
	Спасибо всем большое за ответы. Мой уровень кроме как ксс и хтмл не велик, по этому пока трудно понять как действовать дальше. Смотрите, у меня есть страничка, где отображается схема игроков. За фотографией футболиста должен быть фон (url изображения) в зависимости от значение "w_staerke" (как я уже сказал ранее). Фон должен привязываться к значению position (см. скриншот). Файл шаблона также прилагается (Не вставил, потому что много символов) http://rgho.st/6nRgfYB2b Подскажите пожалуйста что и куда, а то пока ничего не понятно. Добавлено через 1 минуту Вот js формации (formationws4.js). Шаблон не нужен http://rgho.st/6Cx2ZlFLf Добавлено через 23 часа 51 минуту Я так понял, никто уже ничем не поможет) 0