Skapa en HTML färgpalett med PHP och JavaScript

Vi skall skapa en färgpalett i HTML, alltså färger i HEX-format vilka sträcker
sig från 000000 till ffffff där den tidigare är svart och att den senare vit.

Testa färgpaletten genom att klicka här.

Ett HEX tal är sammasatt av värdet för Rött, Grönt och Blått. Varje av dessa har högsta värdet ff och lägsta 00.
Vi väljer att göra våra uträkningar med decimaltal och sedan göra om dessa tal till HEX med den fördefinierade PHP funktionen dechex().
Vi börjar med att bestämma de variabler som skall användas:

• $table - Utskriftsvariabel, i denna lagrar vi allt som sedan skall visas.
• $counter - Räknare som skall möjliggöra radbrytningar på rätt ställen.
• $varx - Koefficient för antalet delar röd färg.
• $vary - Koefficient för antalet delar grön färg.
• $varz - Koefficient för antalet delar blå färg.
• $textfarg - Variabel som skall hjälpa oss att ändra textfärgen för mörka bakgrunder.

Vi börjar med att initiera $table och ge den en tabell-tag, vi passar på att sätta cellspacing till 0 för att slippa tomrum mellan våra färgrutor.

<?php 
$table='<table cellspacing=0>';

PHP skriptets kärnkod

Genom att skapa nästlade forsatser kan vi sedan finna alla intressanta kombinationerna av våra värden för röd grön och blå.

    for ($x=1;$x<=6;$x++){ 
     $varx = dechex(51*($x-1)); 
     if ($varx == "0"){$varx = "00";} 
     for ($y=1;$y<=6;$y++){ 
      $vary = dechex(51*($y-1)); 
      if ($vary == "0"){$vary = "00";} 
      for ($z=1;$z<=6;$z++){ 
       $varz = dechex(51*($z-1)); 
       if ($varz == "0"){$varz = "00";} 
       $color = "#".$varx.$vary.$varz; 
       $counter++; 

Om vi beskådar variabeln $color i ovan kod ser vi att den under de första 18 looparna får värdena:

#000000,#000033,#000066,#000099,#0000cc,#0000ff
#003300,#003333,#003366,#003399,#0033cc,#0033ff #006600,#006633,#006666,#006699,#0066cc,#0066ff

For1 loopas, i varje loop loopas även for2 som i sin tur loopar for3.
På detta sätt får vi alltså ut våra efterfrågade färger.

Skapandet av färgpaletten

Nu är skriptets kärna klar, det som saknas är endast skapandet av de kolumner som skall innehålla bakgrundsfärgen.
Vi börjar med att se till att textfärgen är ljus för de tabeller som har mörk bakgrund.

       if($counter<10) 
		$textfarg="#ffffff";
       else 
		$textfarg="#000000";

Vi ser till att en ny rad skapas om vår variabel $counter är lika med 1.

       if ($counter == 1){$table.= '<tr height="15">';} 

Den nya kolumnen skall läggas till i utskriftsvariabeln.

	$table.= '<td bgcolor="'.$color.'" width="15"'
		.' style="border:0;cursor: hand></td>';

För att skapa en radbrytning vid var 18:e kolumn nollställer vi vår variabel $counter vid dessa.
Vi avslutar sedan även våra for-satser och skriver ut tabellen.

       if($counter == 18){$counter = 0;$table.= "</tr>";} 
      } 
     } 
    } 
    $table.= '</tr></table>';
    echo $table; // skriv ut paletten 
   ?> 

JavaScript gör paletten levande

För att göra paletten riktigt levande använder vi oss av JavaScript.
Först lägger vi till följande HTML-element på vår PHP-sida.

<form name="palett"/>
  Klicka för att välja: 
  <input type="text" name="over" size="5" bgcolor="#ffffff" value=""/> 
  <br/>
  Vald färg: 
  <input type="text" name="picked" size="5" bgcolor="#ffffff" value="#ffffff"/>
</form/>

För att användaren av färgpaletten skall kunna välja färger genom att klicka på kolumnerna och även se HEX-koden för färgerna så byter vi ut koden:

	$table.= '<td bgcolor="'.$color.'" width="15"'
		.' style="border:0;cursor: hand></td>';

Mot koden:

	$table.= '<td bgcolor="'.$color.'" width="15"'
		.' style="border:0px black solid;cursor: hand"'
		.' onclick="palett.picked.value=\''.$color.'\';'
		.' palett.picked.style.color=\''.$textfarg.'\';'
		.' palett.picked.style.background=\''.$color.'\'" '
		.' onMouseOver="palett.over.style.background=\''.$color
		.'\'"></td>';

Summering av vårt PHP-skript

Vi har nu använt PHP, JavaScript, CSS och HTML för att skapa en färgpalett med vilken användare smidigt kan välja mellan en bred uppsättning färger och genom ett enkelt klick se HEX-koden för denna färg.
Genom att öka maxvärdet för variablerna i våra forloopar och minska koefficienten i dechex() - som i vårt fal var 51 - kan vi enkelt öka antalet färgnyanser.

Testa färgpaletten genom att klicka här.

Se fler PHP guider

---

Kommentarer    Antal 0    Medelpoäng 0/10

Bli medlem för att kunna skriva kommentarer!
Logga in om du redan är medlem.