Array mit CSS-Sprites. Wie Syntax?

Jan-Frederik Stieler

Monsterator
Moderator
Hallo,
ich hab ein Array welcher per Zufall geladen wird:
PHP:
<?php
$new[1] = array("#ff00fb", "../../../images/stories/be_logo_hover_signet_ff00fb.png", "../../../images/stories/be_logo_hover_ff00fb.png", "../../../images/stories/reload_hover_ff00fb.gif", "../../../images/stories/audio_hover_ff00fb.gif", "../../../images/stories/help_hover_ff00fb.gif"); //magenta
$new[2] = array("#fbd72b", "../../../images/stories/be_logo_hover_signet_fbd72b.png", "../../../images/stories/be_logo_hover_fbd72b.png", "../../../images/stories/reload_hover_fbd72b.gif", "../../../images/stories/audio_hover_fbd72b.gif", "../../../images/stories/help_hover_fbd72b.gif"); //gelb
$new[3] = array("#00ff00", "../../../images/stories/be_logo_hover_signet_00ff00.png", "../../../images/stories/be_logo_hover_00ff00.png", "../../../images/stories/reload_hover_00ff00.gif", "../../../images/stories/audio_hover_00ff00.gif", "../../../images/stories/help_hover_00ff00.gif"); //grün
$new[4] = array("#00d8ff", "../../../images/stories/be_logo_hover_signet_00d8ff.png", "../../../images/stories/be_logo_hover_00d8ff.png", "../../../images/stories/reload_hover_00d8ff.gif", "../../../images/stories/audio_hover_00d8ff.gif", "../../../images/stories/help_hover_00d8ff.gif"); //blau
$zufall = rand(1,4);
?>

Nun würde ich gerne die performance beim anzeigen der verschiedenen Bilder verbessern. Undzwar würde ich gerne Sprites für die verschiedenen Farben verwenden.
Das heißt ich muß hier irgendwie die positionen jeweils für die Bilder verändern. leider hab ich keine Ahnung iwe ich das jetzt hier im PHP schreiben muß. Das ist ja schon etwas anderst als im CSS.

Kann mir jemand das Erklären?

Viele Grüße
 
Definier doch im CSS einfach die Bilder komplett und bei PHP wählst du einfach zufällig aus den vorgefertigten Klassen aus.
 
Anstatt ein Array dafür zu benutzen könntest Du einfach nur nummerierte Ordner nehmen. Das wird die Sache nicht unbedingt performanter machen, aber Du rufst nur noch einmal rand() auf und das Ergebnis benutzt Du an den jeweiligen Stellen als Ordnernamen. zB

PHP:
$bgcols=array("#ff00fb","#fbd72b","#00ff00","#00d8ff");
$foo=rand(1,4);

echo "<img src='/bilder/".$foo."/header.png' alt='' title=''/>";
echo "<span style='color:".$bgcols[$foo].";'>Farbtest</span>";
Und die Idee von Felix ist auch fein. Na gut, es bläht die CSS auf, aber wenn die Seite damit schneller ist, soll es so sein :D

mfg chmee

p.s.: Wo hast Du denn die Einbrüche? Beim Laden? Beim Darstellen? Beim Verschieben/Bewegen?
 
Hallo,
ist schon etwas spät und ich sollte ins Bett gehen :). Deshalb werd ic hmir eure Tipps morgen mal zu gemüte führen.
Aber mein Problem leigt daran das ich beim hovern von be_logo...png einige Verzögerungen habe die man auch wahrnimmt.

Viele Grüße
 
Dann solltest Du beim ersten Betreten der Seite einen Preload (Javascript) der zu nutzenden Bilder anstreben (uU aller Bilder). Ja, das ist auch nicht grad effizient, aber "wenn" es ein Online-Web-Game ist, darf man ruhig mal ein Sekündchen warten..

mfg chmee
 
Hi,
das wäre die andere Möglichkeit. Aber es handelt sich nicht um ein browsergame sondern um eine normaler Webseite.
Du kannst dir diese anschauen wenn du auf den Portfolio Link in meiner Signatur klickst.

Viele Grüße
 
PHP:
$bgcols=array("#ff00fb","#fbd72b","#00ff00","#00d8ff");
$foo=rand(1,4);

echo "<img src='/bilder/".$foo."/header.png' alt='' title=''/>";
echo "<span style='color:".$bgcols[$foo].";'>Farbtest</span>";

Oha, da kennt aber einer die Grundregeln eines arrays nicht ;) Ein array fängt doch immer bei 0 an zu zählen:

PHP:
$bgcols=array("#ff00fb","#fbd72b","#00ff00","#00d8ff");
$foo=rand(0,3);

echo "<img src='/bilder/".$foo."/header.png' alt='' title=''/>";
echo "<span style='color:".$bgcols[$foo].";'>Farbtest</span>";

So stimmts :)
 
timestamp, es war tiefe Nacht und die Kleinigkeiten sind dem Nutzer des Codes zu überlassen :D Man hätte auch einfach nur einen Leereintrag machen können, gehupft wie gesprungen. Jedenfalls einer, der hier noch aufpasst :D

PHP:
$bgcols=array("","#ff00fb","#fbd72b","#00ff00","#00d8ff");
$foo=rand(1,4);

echo "<span style='color:".$bgcols[$foo].";'>Farbtest</span>";

mfg chmee
 
Zurück