Генерация динамического CSS с использованием php и javascript

Я хочу создать всплывающую подсказку на основе динамически меняющегося фонового изображения в CSS. Это мой файл my_css.php.

<?php
    header('content-type: text/css'); 
    $i = $_GET['index'];
    if($i == 0)
        $bg_image_path = "../bg_red.jpg";   
    elseif ($i == 1)
        $bg_image_path = "../bg_yellow.jpg";   
    elseif ($i == 2)
        $bg_image_path = "../bg_green.jpg";   
    elseif ($i == 3)
        $bg_image_path = "../bg_blue.jpg";    
?>
.tooltip {
            white-space: nowrap;
        color:green;
        font-weight:bold;
            border:1px solid black;;
            font-size:14px;
        background-color:  white;
        margin: 0;
        padding: 7px 4px;
        border: 1px solid black;
        background-image: url(<?php echo $bg_image_path; ?>);
        background-repeat:repeat-x;
        font-family: Helvetica,Arial,Sans-Serif;
        font-family: Times New Roman,Georgia,Serif;
        filter:alpha(opacity=85); 
        opacity:0.85;
        zoom: 1;
 }

Чтобы использовать этот CSS я добавил

<link rel="stylesheet" href="css/my_css.php" type="text/css" media="screen" />

в моем HTML <head> тег кода JavaScript. Я думаю о передаче различных значений индекса, чтобы он динамически генерировал фоновое изображение. Может кто-нибудь сказать мне, как я должен передавать такие значения из JavaScript? Я создаю подсказку, используя

var tooltip = document.createElement("div");
document.getElementById("map").appendChild(tooltip);
tooltip.style.visibility="hidden";

и я думаю, прежде чем вызывать этот createElement, я должен установить фоновое изображение.

Источник

3 ответа

Решение

Вы, кажется, задаете два совершенно независимых вопроса.

Во-первых, способ передачи параметра будет в вашем <link> тег:

<link rel="stylesheet" href="css/my_css.php?index=3" type="text/css" media="screen" />

Когда страница загрузится, браузер запросит css/my_css.php?index=3 страницы с вашего сервера и использовать CSS, который возвращается.

Однако вы также спрашиваете об установке этого значения с помощью JavaScript. Это говорит о том, что вы хотите, чтобы CSS менялся на протяжении всего запроса. В этом случае PHP - абсолютно неправильная технология.

Вместо этого рассмотрите возможность добавления классов, таких как:

.tooltip-background-1 {
    background-image: url(../bg_red.jpg);
}

Тогда вам не нужно никакого динамического содержимого в файле CSS. Просто включите все четыре (или более) правила одновременно и используйте JavaScript, чтобы изменить, какой класс применяется к элементу.

Наконец, если ваша цель - просто выбрать случайный цвет фона, вы можете просто позволить PHP выбрать случайное значение, устраняя любую потребность в параметре или для взаимодействия JavaScript и PHP вообще.

Источник

Я предлагаю вам улучшить часть кода, которая:

$bg_image_path = '../bg_';
switch($i)
{
   case 0: $bg_image_path .= 'red.jpg';    break; 
   case 1: $bg_image_path .= 'yellow.jpg'; break; 
   case 2: $bg_image_path .= 'green.jpg';  break; 
   case 3: $bg_image_path .= 'blue.jpg';   break; 
}
Источник

Вместо указания фонового изображения в файле CSS, попробуйте сделать все это с помощью JavaScript. Поэтому удалите background-image из файла css, удалите все php и удалите цвет (если это то, что вы хотите изменить при изменении фонового изображения), в основном все, что вам нужно изменить, удалите из css и измените его с помощью JavaScript.

Затем используйте такой код:

<html>
<head>
<script type="text/javascript">
var i = 0;

var cols = new Array(8);
cols[0] = "FFFFFF";
cols[1] = "EEEEEE";
cols[2] = "DDDDDD";
cols[3] = "CCCCCC";
cols[4] = "BBBBBB";
cols[5] = "AAAAAA";
cols[6] = "999999";
cols[7] = "888888";
cols[8] = "777777";

var imgs = new Array(8);
img[0] = "img1.jpg";
img[1] = "img2.jpg";
img[2] = "img3.jpg";
img[3] = "img4.jpg";
img[4] = "img5.jpg";
img[5] = "img6.jpg";
img[6] = "img7.jpg";
img[7] = "img8.jpg";
img[8] = "img9.jpg";

function change()
{
 document.getElementById("div").bgColor = cols[i];
 document.body.background = img[i];
 i++;
 if(i > 8)
 {
  i=0;
 }
}
</script>
</head>
<body onLoad="setInterval('change()',1000)">
<div id="div">Tooltip</div>
</body>
</html>

Этот код перебирает массив цветов и фоновых изображений, он будет меняться раз в секунду. Изменяет цвет фона divs и фонового изображения.

Источник
Другие вопросы по тегам