Генерация динамического CSS с использованием PHP и JavaScript - PullRequest
Новая
       16

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

0 голосов
/ 16 июня 2010

Я хочу сгенерировать всплывающую подсказку на основе динамически меняющегося фонового изображения в 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 ]

3 голосов
/ 16 июня 2010

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

Во-первых, способ передачи параметра будет в вашем <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 вообще.

0 голосов
/ 17 июня 2010

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

$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; 
}
0 голосов
/ 17 июня 2010

вместо указания фонового изображения в файле 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 и фонового изображения.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...