0

我想根据 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" />

<head>在我的 javascript 代码的html标记中。我正在考虑传递不同的“索引”值，以便动态生成背景图像。谁能告诉我应该如何从 javascript 传递这些值？我正在使用创建工具提示

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

我想在调用这个 createElement 之前，我应该设置背景图像。

4

3 回答 3

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 交互。

于 2010-06-16T19:57:34.773 回答
0

不要在 css 文件中指定背景图像，而是尝试使用 JavaScript 完成所有操作。因此，从 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>

此代码循环遍历颜色和背景图像数组，它每秒会更改一次。它改变了 div 背景和背景图像的颜色。

于 2010-06-16T20:20:12.250 回答
0

我建议您改进部分代码使用：

$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; 
}
于 2010-06-16T20:20:21.090 回答