Grafiken erstellen JSCRIPT

derzeit erzeuge ich images mit php (imagecreate)
da dies aber immer wieder mit nem refresh gemacht wird verbraucht das ressourcen
bei 1000 Usern würde ich mir also Sorgen machen...
gibt es eine möglichkeit diese images auch mit jscript zu machen
oder muss ich mit html in diesem fall arbeiten.. sprich images nebeneinander anzeigen
ein bsp. für ein Bild was cih derzeit mache ist
browsergames-world.de/priceofwar/intern/showlife.php?user=nomariT

include("connect.php");
$ip = getenv("REMOTE_ADDR");
session_name("pagueonsession");
@session_start();
$session = session_id();
mysql_query("UPDATE w1_session SET time = '$time' WHERE ip = '$ip' and session = '$session'");
$check = mysql_query("SELECT * FROM w1_session WHERE ip = '$ip' and session = '$session'");
$a = mysql_fetch_object($check);
$b = mysql_query("SELECT * FROM w1_users WHERE name = '$a->name'");
$b = mysql_fetch_object($b);
$c = mysql_query("SELECT * FROM w1_rasse WHERE name = '$b->rasse'");
$c = mysql_fetch_object($c);
if(mysql_num_rows($check) > 0)
{
header ("Content-type: image/gif");
$image = imagecreate(100,20);
$farbe_body=imagecolorallocate($image,0,0,0);
imagecolortransparent($image,$farbe_body);
$life=$b->leben;
$maxlife=$c->leben + $b->lebensaka;
$bispixel=((100/$maxlife)*$life);
$farbe_body2=imagecolorallocate($image,0,200,0);
$farbe_body3=imagecolorallocate($image,200,0,0);
$farbe_body4=imagecolorallocate($image,255,255,255);
imagefilledrectangle($image,0,0,$bispixel,20,$farbe_body2);
imagefill($image,($bispixel+1),0,$farbe_body3);
imagestring($image,5,30,2,$life."/".$maxlife,$farbe_body4);
imagegif($image);
}
else
{
header ("Content-type: image/gif");
$image = imagecreate(100,20);
$farbe_body=imagecolorallocate($image,255,255,255);
$farbe_body4=imagecolorallocate($image,0,0,0);
imagestring($image,3,0,2,"nicht online".$maxlife,$farbe_body4);
imagegif($image);
}

Für das Beispielbild sollte HTML doch wohl reichen. Zwei DIVs mit entsprechender Hintergrundfarbe und explizit gesetzter Größe sollte es wohl tun.

aber die schrift krieg ich dann nicht drauf oder?

Also wenn es nur um Grafiken geht, wie in deinem Beispiel, dann google mal nach progressbar+css

Ich hab mal kurz rumprobiert, es aber nicht hinbekommen. Ich würde mal in de.comm.infosystems.authoring.misc fragen, die können Dir bestimmt zumindest sagen, ob es möglich ist.

@todi42 Der Server unter authoring.misc konnte nicht gefunden werden.
@agmemon werd ich mal machen^^

...das ist ne Newsgroup im Usenet ^^

Ich mache sowas ähnliches mit html... das Ergebnis sieht so aus:
Funktioniert super in IE / FF ^^
Bei Interesse kann ich ja die PHP-Funktion posten
P.S.: habe auch einen dynamischen balken (hier das FF-Bildchen, IE ist der leider nur 1px breit, wegen der unterschiedlichen auslegung der Browser - wenn man aber generell einen breiteren Balken hat...
Dieser ist übrigens REIN html - der obige ist html mit hintergrundgrafik

na dann bitte ich mal ganz lieb um den code

Das ist der für den oberen Balken

function &print_percentbar($percent,$type=1)
{
if($percent>100)
$width=100;
else if($percent<0)
$width=0;
else
$width=$percent;
$left=100-$width;
if($width <= 50)
{
if($type==1)
$retval=' '.$percent.'% ';
else
$retval=' '.$percent.'% ';
}
else
{
if($type==1)
$retval=' '.$percent.'% ';
else
$retval=' '.$percent.'% ';
}
return $retval;
}
?>
Dazu gehört noch etwas CSS:

TABLE.pbar1
{
margin: 2px;
border: 1px solid black;
background-image: url(./pictures/bar2.gif);
float: right
}
TD.pbarr
{
background-color: #FFFFFF;
font-size: 8px;
color: #000000;
font-weight: bold;
text-align: right;
}
TD.pbarl
{
text-align: left;
font-size: 8px;
color: #000000;
font-weight: bold;
}
TABLE.pbar2
{
margin: 2px;
border: 1px solid black;
background-image: url(./pictures/bar.gif);
float: right
}
Hier habe ich 2 Bilder - je nach dem, ob wenig gut ist, oder viel...

wobei du da eventuell deine eigenen Bilder einfügen oder einfach nur eine Hintergrundfarbe an der entsprechenden Stelle definieren solltest.
---
Für den JavaScriptCode gilt hingegen folgendes:

|


|

Dazu noch CSS:

.fixed
{
table-layout: fixed;
}
.defaultcur
{
cursor: default;
}
.dummy
{
width: 1px;
background-color: #000000;
color: #000000;
font-size: 1px;
overflow: hidden;
}
.emptywidth
{
width: 100px;
border-top: 1px solid #020202;
border-bottom: 1px solid #424242;
background-color: #222222;
color: #222222;
font-size: 1px;
overflow: hidden;
}
.fillwidth
{
width: 0px;
font-size: 1px;
overflow: hidden;
}
.queuecolorB
{
background-color: #DFDFDF;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #BFBFBF;
color: #DFDFDF;
}
queuecolorX kann man dann für unterschiedliche Dinge anders definieren - hab z.b. 10-11 unterschiedliche Queues die im selben Frame angezeigt werden und durch unterschiedliche Farbwahlen gut zu unterscheiden sind.
Ach, noch das Java-Script...
ich poste aber nur eine kurzvariante:

function set_bar_percent(percent)
{
var restwidth;
if(percent<0)
percent=0;
if(percent>100)
percent=100;
restwidth=100-percent;
document.getElementById("fieldfull"+i).style.width=restwidth+'px';
document.getElementById("fieldempty"+i).style.width=percent+'px';
document.getElementById("fieldfull"+i).style.maxWidth=restwidth+'px';
document.getElementById("fieldempty"+i).style.maxWidth=percent+'px';
}
restliche Anpassungen sind hier dann selbst vorzunehmen

boah!
Für so ne kleine Sache super umständlich.

Sieht aber gut aus und ist besser, als jedes mal von php ein Bild erstellen zu lassen.

du kannst auch die %zahl über das div positionieren - absolut. du musst nur das enthaltene div relativ positionieren, dann richtet sich das absolute innere nach dem äusseren, und du kannst im äusseren div machen was du willst - tabellen, grafiken..

kurze quizfrage:
reichen theoretisch nicht 2 layers dafür?

Nun, relativ positioniert funktioniert meines wissens nicht in jedem Browser, kannst du aber gerne ausprobieren.

Original von AngelFilia
Nun, relativ positioniert funktioniert meines wissens nicht in jedem Browser, kannst du aber gerne ausprobieren.

WAS?
also ich nutze solche positionierungen als mein täglich brot ..
das problem ist nur, dass die meisten nicht wissen, WIE sich die einzelnen angaben auswirken..
z.b. dass man mit "absolute" relativ positioniert.. weil "relative" ast nur relativ zur eigentlichen anzeigeposition..
Frei nach SelfHTML:

Besonders das Verhalten der Angaben absolute und relative ist anfangs etwas verwirrend. Denn absolute verhält sich durchaus relativ, wie die inneren div-Elemente a4 bis a6 des Beispiels zeigen: relativ nämlich zum Rand des Elternelements (a3), vorausgesetzt dieses Element ist mit absolute, fixed oder relative positioniert. Falls kein von static abweichend positioniertes Vorfahrenelement existiert, bezieht sich die Positionierung auf das body-Element.

Seitdem ich absolut und relativ kenne, liebe ich die 2..

habe jetzt das hier heut nacht gemacht unf funzt wunderbar:

$life=$b->leben;
$maxlife=$c->leben + $b->lebensaka;
$bispixel=round(((100/$maxlife)*$life));
?>
div { border:1px solid #888; }
#f1 { position:absolute; top:92px; left:80px; width:100px; height:20px;
z-index:1; background-color:#FF0000; }
#f2 { position:absolute; top:92px; left:80px; width:px; height:20px;
z-index:2; background-color:#00FF00; }
#f3 { position:absolute; top:92px; left:80px; width:100px; height:20px;
z-index:3; background-color:transparent; }
#f4 { position:absolute; top:94px; border:0px; left:5px; width:100px; height:20px;
z-index:3; background-color:transparent; }




Lifepoints:

Ich habs bei meinem BG für die Leben/Mana/Energie Anzeige auch so gemacht. Das ganze wird dann noch schick per AJAX aktualisiert und fertig.
Die Lösung die du jetzt hast ist denke ich das gängigste und auch das geeignetste.
Ciao,
Marc

bei mir wird eh alles nach veränderung neugeladen in dem frame

Jut, das erste DIV auf position:relative setzen und die darunter auf absolut...
Habe mein HTML dahingehend ein wenig angepasst - neue Screenshots spare ich mir aber