Ein HP Balken und ein Coder ohne CSS im Kopf^^

gelöschter User

Schur,
ich hab ein Problem und finde einfach keine Lösung dazu!
Also ich programmier grad ein Browsergame und wollte jetzt den HP Balken bisschen anschaulicher machen.
Jetzt hab ich so eine TD:

Code

<tr>
<td>Leben:</td><td id="charleben">20 / 40 HP</td>
</tr>

und möchte jetzt irgendwie einen etwas helleres rot als Hintergrund und noch ein weiteres starkes rot im Hintergrund dessen width ich für die HP Anzeige ändern kann.
Hört sich jetzt alles ziemlich unverständlich an deswegen hab ich mal ein Bild in Paint gebastelt wie ich
mir das irgendwie vorgestellt hab:
[Blockierte Grafik: http://www.crazyplanet-online.de/test/vorschau.JPG]
Ich hab schon alles ausprobiert was ich bei Google gefunden hab, aber irgendwie klappte nichts, meistens
wegen dem Text der auch noch in der TD steht. (20 / 40 HP)
Währ super wenn irgendjemand von euch mir helfen könnte

Gruß crAzywuLf

synaptic

mach doch nen div in der tabellenzelle.. das kannste dann auch beliebig in der breite verändern (also HP abziehen) ohne daß die tabelle beeinfluusst wird (sofern die tablecells fixe werte haben)

gelöschter User

Kannst du mir vll schreiben wie du das meinst?
Wenn ich das in eine Div packe weiss ich einfach nicht wie ich das mit der width machen soll, wenn ich das in eine div packe wird der Inhalt halt so eingeschränkt :

Code

<table border="1" width="200" cellspacing="0" cellpadding="=">
<tr>
<td width="100">Leben:</td><td
 bgcolor="#fa8072"><div style="background-color:red; width:50px ">20/40 HP</div>
</td>
</tr>
</table>

Siehe:
[Blockierte Grafik: http://www.crazyplanet-online.de/test/v2.JPG]

Gruß crAzywuLf

synaptic

also ich hab mir gedacht, daß man zwei divs übereinander legen könnte und die mit nem z-index überlagert, so daß du auf dem obersten die hitpoints zeigen könntest,
über das mittlere div den balken realisierst und ganz unten bleibt dann die cell mit dem leicht roten hintergund...

des hat iwie net geklappt... wenn du nen weg findest das zu realisieren haste glaube ich das was du brauchst..

ansonsten hab ich des ganze mal mit nem javascript hinterlegt...

Code

<table border="1" width="200" cellspacing="0" cellpadding="=">
<tr>
<td width="100">Leben:</td><td bgcolor="#fa8072">
<div id="hp_anzeige" style="background-color:red; height:100%; width:100%; overflow: hidden;"></div>


</td>
</tr>
</table>

das wäre grundlegend meine idee gewesen...
nur verschwindet dabei die schrift mit/in der HP-anzeige...

kannste dir hier ja mal angucken:
http://home.arcor.de/synaptic/hilfe/hp_balken.html

gelöschter User

Naja hab jetzt alternative genommen...
Oben drüber ist der balken und eine Zeile dadrunter der jeweilige Text:

Code

<table border="1" width="200" cellspacing="0" cellpadding="=">
<tr>
<td width="100">Leben:</td><td width="100">
  <table border="0" cellspacing="0" cellpadding="0" width="100%">
  <tr>
  <td height="5" bgcolor="#fa8072">[img]browsergame/img/hp.JPG[/img]</td>
  </tr>
  <tr>
  <td height="5"><font size="-2"><center>20 / 40</center></font></td>
  </tr>
  </table>
</td>
</tr>
<tr>
<td width="100">Mana:</td><td width="100">
  <table border="0" cellspacing="0" cellpadding="0" width="100%">
  <tr>
  <td height="5" bgcolor="#BFCFFF">[img]browsergame/img/mana.JPG[/img]</td>
  </tr>
  <tr>
  <td height="5"><font size="-2"><center>20 / 40</center></font></td>
  </tr>
  </table>
</td>
</tr>
<tr>
<td width="100">Erfahrung:</td><td width="100">
  <table border="0" cellspacing="0" cellpadding="0" width="100%">
  <tr>
  <td height="5" bgcolor="#9F60BF">[img]browsergame/img/xp.JPG[/img]</td>
  </tr>
  <tr>
  <td height="5"><font size="-2"><center>20 / 40</center></font></td>
  </tr>
  </table>
</td>
</tr>
</table>

Alles anzeigen

hp.JPG
mana.JPG und xp.JPG sind einzelne Pixel (z.B. rot,blau und lila).
Falls jemand noch ne bessere Variante hat kann er sie ja hierrein posten.

Gruß crAzywuLf

synaptic

joa, wenn du diese alternative nimmst, kannste das dann auch easy realisiern^^
was mich total fuchst ist, das es nicht mit der überlagerung hinhaut.. dachte bisher mit position:relative könnt man des dann auch hinbekommen..

gelöschter User

Zitat von synaptic

joa, wenn du diese alternative nimmst, kannste das dann auch easy realisiern^^
was mich total fuchst ist, das es nicht mit der überlagerung hinhaut.. dachte bisher mit position:relative könnt man des dann auch hinbekommen..

hab mich schon die letzte nacht damit begeiert...
macht kein spaß für sowas ne lösung zu suchen

Bandit

Wie wäre es denn, wenn du das per PHP-Script erledigst? Sollte damit machbar sein.

gelöschter User

Zitat von bandit600

Wie wäre es denn, wenn du das per PHP-Script erledigst? Sollte damit machbar sein.

kla ist sowas machbar... aber hab halt ne schnelle methode gesucht^^
bei php musste das ganze auch erstmal generieren usw usw...

Bandit

Ungetestet:

HTML

<html>
<body>
<table>
 <tr>
  <td style="height:30px; width:100px; text-align:left;">Leben</td>
  <td style="height:30px; width:100px; text-align:center; background-image: url(./rectangle.php?max=40&real=20); background-repeat: no-repeat">20/40 HP</td>
 </tr>
</table>
</body>
</html>

Code

<?PHP
  if (isset($_GET['real']) && isset($_GET['max']))
  {
      $real = $_GET['real'];
      $max =  $_GET['max'];

      // Hohe und Breite der Grafik
      $width = 100;
      $height = 30;

      header( "Content-type: image/png");

      $img = ImageCreate($width, $height);


      $x = 0;
      $y = 0;


     // Farben
     $color1 = ImageColorAllocate($img, 255, 0, 0);
     $color2 = ImageColorAllocate($img, 250, 128, 113);

     // Fuellung Farbe 1
     $percent = 100 / $max * $real;
     $w = $width * ($percent / 100);


     ImageFilledRectangle($img, $x, $y, $w, $height, $color1);

     // Füllung Farbe 2
     ImageFilledRectangle($img, $w+1, $y, $width, $height, $color2);


     // Image raushauen
     ImagePng($img);
     ImageDestroy($img);
  }
?>

Alles anzeigen

Tags