Dynamiska bilder

Jag tänkte att jag skulle ha en tagline (under huvudrubriken stojg.net ovanför) som ändrar sig mellan sidladdningarna. Jag ville dessutom ha ett något annorlunda teckensnitt än de standarder som finns och att texten skulle vara skuggad.

Lösning är en php-genererad bild som hämtar taglinen från en textfil och använder en truetypefont för att skriva ut den två gånger, först skuggan, och sen den riktiga texten på den. Resultatet blir en text som är lite snyggare, ändrar sig och alla som surfar med bilder påslagna kan se den.

Den php-fil som nedanstÃ¥ende kod ligger i anropar jag som en vanligt med <img src=”tagline.php” alt=”slumpvis tagline” />-tagg i min vanliga html sida.
[php]$tagfile=’taglines.txt’;
$font = ‘kartika.ttf’;
$font_size=18;
$adjustment = 7;
$angle = 0;

if (!$lines=file($tagfile)) { $message = ‘No tagfile found!’; }
else {
list($micro_sec, $sec) = explode(‘ ‘, microtime());
srand((float)$sec + ((float)$micro_sec * 100000));
$message = $lines[rand(0,count($lines)-1)];
}

$txt_bounding_box = imagettfbbox ($font_size, $angle, $font, $message);

$width=abs($txt_bounding_box[4]-$txt_bounding_box[0]+1);
$height=abs($txt_bounding_box[1]-$txt_bounding_box[5]+1);

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

$background_color = imagecolorallocate($img, 0xFF, 0xFF, 0xFF);
$color_text = imagecolorallocate($img, 0x0, 0x0, 0x0);
$color_shadow = imagecolorallocate($img, 0xA0, 0xA0, 0xA0);

imagecolortransparent($img,$background_color);

$txt_baseline_x = 0;
$txt_baseline_y = $font_size-$adjustment;
imagettftext($img, $font_size, $angle, $txt_baseline_x+1,
$txt_baseline_y+1, $color_shadow, $font, $message);
imagettftext($img, $font_size, $angle, $txt_baseline_x,
$txt_baseline_y, $color_text, $font, $message);

header(”content-type:image/png”);
imagepng($img);
imagedestroy($img);
[/php]

Ajax

Jag har provat och lekt lite med den ‘senaste tekniken’ som kallas ajax. Här är länkarna för de som är intresserade. Observera att koden är inte gjord för att laddas ner och förstÃ¥s, men man kan fÃ¥ hints.

1. Här trollar jag fram och bort topbannern.
DOM test

2. Här slumpar jag fram en ny mini-bild ur mitt galleri utan att sidan laddas om.
Ajax test

Ajax är en inte en teknik utan en samling av olika tekniker som använder både serverside och clientside scripting för att kunna visa dynamiska sidor. Ett lysande exempel på avancerad tillämpning är t.ex. startsidan Pageflakes där du kan ha din egen personliga online-skrivbord. Framtiden ser spännande ut.

Man kan dra och flytta omkring saker lite som man vill på det virtuella skrivbordet. Även wordpress använder det för att man ska kunna flytta omkring de olika alternativen när man skriver en ny post.

Jag har bara skrapat lite på ytan, men ännu inte riktigt listat ut något mer avancerat som jag skulle vilja göra.

Update
IE 6 verkar inte vilja ladda om bilderna i ajax testen. Jag måste klura lite mer på koden och pröva innan det funkar bra. Men i Firefox funkar det perfa.

Update 2
Nu funkar det i IE. Orsaken var att IE cachade själva xml-dokumentet så att det blev samma resultat och således samma bild om och om igen. Jag lade till en slumpsiffra när jag anropade xml-dokumentet i GET.