-1

現在、クライアント用のMinecraftサーバーリストページを作成しています。しかし、私が以前にやったことがないことの1つに固執しています。この画像をご覧ください（ペイントの使用については申し訳ありません。急いでいました！）

基本的に、ホバーすると「通常」の画像が「ホバー」の画像に変わります。私はこれをうまく行うことができます、しかし、それらの上下の矢印、そして45/90を見てください？PHPクエリが受け取るものに応じて変更する必要があります。すべてのPHPの準備ができています。現在、次のようになっています。

矢印とプレーヤーはオンラインで見ることができますが、画像の上に配置し、PHPがフィードバックする内容を変更したいと思います。これどうやってするの？

4

2 に答える 2

1

完全に間違っていなくても、少し非効率的な観点から問題に取り組んでいると思います。私が理解している限り、ホバーで画像が相互作用していますが、CSSとクラスを使用し、PHPを混合してデータを取得するだけで、実行しようとしていることはすべて可能です。

もちろん、画像を使ってそれを行うこともできます。本当に必要な場合は、その方法を説明できます。しかし、私はあなたがこの他の解決策を検討するかもしれないと思いました。

Here is a demo

アプローチを改善するためのいくつかの提案があります：

  1. メイン画像を要素background-imageではなく表示しますimg。このようにして、この例では必要ない場合でも、CSSを介して交換する可能性が広がります。

  2. 矢印と絶対位置の要素を使用background-imageします。おそらく、画像置換技術を使用してアクセシビリティを改善することを検討してください。

  3. :hover親要素の上に表示される追加のオーバーレイ要素に、を使用して追加情報を表示しますrgba background-color。ブラウザの互換性を向上させたい場合は、フォールバックして、 （1。）で説明したようにCSSを介しbackground-imageて親のを完全に変更できます。div

  4. 単純な条件ステートメントを使用して（2.）で説明した要素のクラスを変更することにより、PHP変数と矢印を介してテキストを表示します。

PHP / HTML

<div class="server">
    <div class="overlay">
      <h1><span>Hunger games</span><small>HG1.Play-Minezone.co</small></h1>
      <div class="more-info">
        <p>Hunger games is a full-out hardcore PvP experience, with only one
           winner. The objective of the game is to be the last one standing.
           Will you team with others, go solo, and conquer the battlefield?</p>
        <p>Only you are left to decide</p>
      </div>
        <div class="arrow <?php echo $serverUp ? 'up' : 'down'; ?>"><!-- You may
            want some info here to make it more accessible, and perhaps hide it
            by using some image replacement technique --></div>
        <div class="numbers"><?php echo $numbers; ?></div>
    </div>
</div>

CSS

ここにいくつかの重要なcssを配置しました。私の例では、もう少しスタイリングを使用していますが、自由に確認できます。

.server {
  background: url('/yourimage.jpg') center no-repeat; // Place here your
                                                      // main image
  width:  300px;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.server:hover .overlay{ 
   background-color: rgba(0,0,0,0.5); // Rgba goes here, if you prefer, use an
                                      // image with the effect already achieved
}

.server:hover .more-info{ 
  display: block;
}

.overlay{ 
  position: absolute;
  height: 100%;
  width: 100%;
}

.more-info{ 
  display: none;
  width: 100%;
}

.numbers{ 
  position: absolute;
  bottom: 10px;
  right: 5px;
}

.arrow{ 
  width: 40px;
  height: 40px;
  position: absolute;
  bottom: 10px;
  left: 5px;
}

.arrow.up{ 
  background-color: green;  // In your case you would have background-image
                            // for your green arrow image here
}

.arrow.down{ 
  background-color: red;    // See above, but for red arrow
}
于 2013-03-10T00:25:52.103 に答える
0

画像は、親ノード（おそらくDIV）にあり、相対位置にある必要があります。矢印は、画像の上に絶対的に座っている位置になります。矢印のx値とy値を設定する必要があります。これで、CSSはクラスに基づいて正常に機能するはずです。例えば：

<div class="rel-wrapper <?php $showRed ? 'show-red' : 'show-green'; ?>">

<img src="..." />

<img src="..." class="arrow" />

</div>

.rel-wrapper .arrow { display:none; }

.show-red:hover .arrow { display:block; }

.show-green:hover .arrow { display:block; }

于 2013-03-09T23:55:49.117 に答える