Grafisk Counter med PHP og CSS

Tags: php

Skrevet af Bruger #1388 @ 28.07.2003

Indledning

Denne artikel handler om noget så trivielt som en grafisk counter. Det "nye" kunne være at der her ikke benyttet den typiske metode med IMG-elementet, til at vise cifrene som billeder. Istedet bruges CSS til at definere alle grafiske options - eksempelvis margin og padding. Dette gøres ved at benytte style-argumentet på et SPAN-element. Billedet vises ved at bruge background-property i CSS.

Figur 1: Eksempel på grafisk counter med CSS.

Counteren vil fungere på følgende måde:

- Alle cifre i den pågældende counter-værdien skal eksistere som gif-filer med filnavnene 0.gif, 1.gif, 2.gif t.o.m. 9.gif. Et ekstra billede, ..gif, bruges til at fremstille en tusindtals-seperator. Disse billeder laver man selv, evt. med PSP eller Photoshop.

- Counteren eksisterer rent kodemæssigt i en function() med 2 argumenter: $counter og $relpath. Disse svarer hhv. til counter-værdien og den relative-sti til biblioteket med de 11 små gif-filer.

- Opbygningen af counteren giver mulighed for at definere marginen til hver enkelt lille billede (både left, right, top, bottom). Udover denne option kan man også definere en overordnet margin til hver af siderne til hele counteren.

Koden

Kode

<?php
function makecounter($counter = 1234567890, $relpath = 'img/num0-9/')
{
	if (!(is_int($counter) || is_float($counter)))
	{
		$counter = 0;
	}
	
	// SETTINGS: -------------------------------------------------------
	$margin_edges = 4;
	$margin_normal = array(1,1,0,0); // left, right, top, bottom
	$global_style = 'background-repeat: no-repeat;';

	// -----------------------------------------------------------------
	
	$counter = number_format($counter, 0, ',', '.');
	for ($i = 0; $i < strlen($counter); $i++)
	{
		$imgsize = getimagesize($relpath.$counter[$i].'.gif');
		$img_width = $imgsize[0];
		$img_height = $imgsize[1];
		
		$use_margin = 'margin-left: '.$margin_normal[0].'px;';
		$use_margin .= ' margin-right: '.$margin_normal[1].'px;';
		$use_margin .= ' margin-top: '.$margin_normal[2].'px;';
		$use_margin .= ' margin-bottom: '.$margin_normal[3].'px;';
		
		$private_style = 'width: '.$img_width.'px; height: '.$img_height.'px;';
		$private_style .= ' '.$use_margin;
		
		@$img_html .= '<span style="background: url('
			.$relpath.$counter[$i].'.gif); '.$private_style.' '
			.@$global_style.'"></span>';
	}
	$img_html = '<span style="padding-left: '.$margin_edges.'px; padding-right: '
		.$margin_edges.'px;">'.$img_html.'</span>';
	return $img_html;
}
?>

Som nævnt fungerer counteren vha. en function() der modtager to argumenter. Sendes disse ikke, får variablerne $counter og $relpath nogle standardværdier. Function()-deklerationen er skrevet med øje for at man som bruger af counteren selv vil ændre et par indstillinger.

Disse indstillinger er:

- Individuel definering af margin på alle 4 sider sider på hver af cifrene-billederne i counteren.

- Definering af margin på begge sider (højre og venstre) af hele counteren.

Figur 2: Figuren viser de forskellige marginer.

Som det ses i koden er der reserveret et stykke som SETTINGS. Her definerer man marginen på begge sider med variablen $margin_edges. $margin_edges kan indeholde en integer-værdi som definerer marginen i pixels. $margin_normal er at array med 4 elementer. Disse 4 elementer indeholder alle en integer-værdi som definerer marginen for hver enkelt ciffer-billede i counteren (i pixels).

Figur 2 viser hvordan $margin_edges skal bruges. Dog får man ikke hele historien til $margin_normal-arrayet. Figur 3 forklarer det sandsynligvis bedre:

Figur 3: Her ses de 4 forskellige marginer til hvert ciffer.

På figur 3 ses 4 røde kanter, alle markeret med et tal fra 0 til 3. Disse tal svarer til det pågældende element i $margin_edges[]. Altså defineres de 4 marginer som: 0=venstre, 1=højre, 2=top, 3=bund.

Jeg har ikke tænkt at gennemgå koden da denne er rimelige ligefrem. Den gør ikke brug af nogle vilde algoritmer eller andet. Jeg har istedet forsøgt at sætte fokus på de ting som denne grafiske CSS counter muliggør.

Hvorfor bruge CSS istedetfor det gode gamle IMG-element? Den egentlige grund kunne være at man som webmaster ikke vil præsentere sine billeder til fri download. Med IMG-elementet kan man blot højre-klikke på billedet og gemme billedet - dette kan man ikke med CSS-metoden benyttet her.

En negativ side af counteren, er helt klart at den ikke er Netscape 7.0 venlig. Jeg må sige at jeg ikke ved hvorfor

Måske er det brugen af CSS2 som den ikke kan lide. Men jeg er ikke Netscape bruger - måske kan en kommentar fra en læser løsne for denne problemstilling?

Brugen af counteren er rimelig simpel. Du kopierer koden over i et PHP-script. Efter function()-deklerationen skriver du eksempelvis:

echo makecounter($visits, 'images/numbers');

Dette eksempel fungerer hvis din counter-værdi ligger i $visits og dine billeder ligger i images/numbers, relativt til scriptets placering på serveren.

HTML output

Jeg ville lige tilsidst give et eksempel på hvilket form for html-output counteren giver. I artiklens eksempler er der benyttet en counter-værdi på 7053. Outputtet vil se ud på følgende måde:

<span style="padding-left: 6px; padding-right: 6px;">













Jeg håber min artikel har været værd at læse.

Mvh Ole

Hvad synes du om denne artikel? Giv din mening til kende ved at stemme via pilene til venstre og/eller lægge en kommentar herunder.

Del også gerne artiklen med dine Facebook venner:

Kommentarer (6)

Bruger #3494 @ 29.07.03 10:58

Ingen billeder?

Bruger #3530 @ 01.08.03 12:42

huh ? fattede hat

Bruger #2368 @ 01.08.03 15:45

Fin artikkel... har jeg ret når jeg siger at det var meningen der skulle have været nogle billeder med? :-)... Det ser ihvertfald sådan ud, både i koden tilsiden og i artiklen... Men jeg tror der er en fejl i udvikleren.dk koden. I sourden står der bare <img src=""> der hvor dine billeder skulle være :-)... Jeg er sikker på at folk forstår det bedre når/hvis der kommer billeder på...