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" />

javascriptコードの私のhtml<head>タグで。背景画像を動的に生成するために、「index」のさまざまな値を渡すことを考えています。誰かがJavaScriptからそのような値を渡す方法を教えてもらえますか？を使用してツールチップを作成しています

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

このcreateElementを呼び出す前に、背景画像を設定する必要があると思います。

4

3 に答える 3

3

あなたは2つの完全に独立した質問をしているようです。

まず、パラメータを渡す方法は<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ファイルに動的コンテンツは必要ありません。4つ（またはそれ以上）のルールすべてを一度に含め、JavaScriptを使用して要素に適用するクラスを変更します。

最後に、単にランダムな背景色を選択することが目標である場合は、PHPにランダムな値を選択させるだけで、パラメーターやJavaScriptとPHPが相互作用する必要がなくなります。

于 2010-06-16T19:57:34.773 に答える
0

cssファイルで背景画像を指定する代わりに、JavaScriptですべてを実行してみてください。したがって、cssファイルからbackground-imageを削除し、すべての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>

このコードは、色と背景画像の配列をループし、1秒に1回変更されます。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 に答える