Elikkä väsäsin itse sellanen sivulleni että voi klikata väriä niin css tiedosto käyttää eri kuvia eli sen värisiä kuvia kun klikkasit.
Miten se kannattaisi toteuttaa eli onko järkevämpi tapa kuin itse tein?
Itse tein sen siten että sivullani on valittavissa 4 eri väri teemaa, olen tehnyt 4 erin värisiä kuvia joita käytän sivullani. Ja 4 eri css tiedostoa jotka käyttää aina erikuvia.
hä?
Eikö se tällä hoidu jos oikein ymmärsin.
<?php if (isset($_GET["style"]) && file_exists($_GET["style"] . ".css")) { echo' <link rel = "stylesheet" type = "text/css" href = "' . $_GET["style"] . '.css">'; } ?> <a href="?style=tyyli1">Tyyli 1</a> <a href="?style=tyyli2">Tyyli 2</a> <a href="?style=tyyli3">Tyyli 3</a> <a href="?style=tyyli4">Tyyli 4</a>
Kannattaako se tehdä monta eri css tiedosta vai olisiko helpompi tapa, voiko css koodia koodata php:lla eli vaikka
<link rel="stylesheet" href="tyyli.php" type="text/css">
JyKKemus kirjoitti:
voiko css koodia koodata php:lla eli vaikka
<link rel="stylesheet" href="tyyli.php" type="text/css">
Toki voi. Muista tyyli.php:stä lähettää oikea Content-Type -header.
Jos haluaa välittömän reagoinnin, niin voi tehdä esimerkiksi sellaisen systeemin, että 4 eri tyylitiedoston sijaan on vain yksi tyylitiedosto, mutta sivun bodyn tai html-elementin ID:tä vaihtelee sen mukaan, mitä ulkoasua käytetään. Muutoksen voi sitten tallentaa keksiin ja vaihdoksen suorittaa JavaScriptillä kuin myös suoraan PHP:lla palvelimen päässä, jos keksi vain sattuu löytymään.
Voisin varmaan tässä ehtiessäni jonkun esimerkin värkätä tästä, se on kuitenkin hieman monimutkaisempi kuin nämä kaikkein yksinkertaisimmat systeemit. Ja toisaalta olen itse ajatellut ottaa tämmöisen systeemin käyttöön ainakin yhdellä sivustollani, mutta en ole vain jaksanut sitä tehdä :)
No niin, tämmöinen tästä tuli:
<?php
if( isset($_GET['ulkoasu']) ) {
$ulkoasu = stripslashes($_GET['ulkoasu']);
setcookie('ulkoasu', $ulkoasu);
$_COOKIE['ulkoasu'] = $ulkoasu;
}
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi"<?php if( isset($_COOKIE['ulkoasu']) ) { ?> id="<?php echo htmlspecialchars($_COOKIE['ulkoasu']);?>"<?php } ?>>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Ulkoasun vaihto</title>
<style type="text/css">/*<![CDATA[*/
#valkoinen body { background : #FFF; color : #555; }
#musta body { background : #000; color : #FFF; }
#sininen body { background : #9AB; color : #FFF; }
/*]]>*/</style>
<script type="text/javascript">/*<![CDATA[*/
function getCookie( name ) {
var start = document.cookie.indexOf( name + "=" );
var len = start + name.length + 1;
if ( ( !start ) && ( name != document.cookie.substring( 0, name.length ) ) ) {
return null;
}
if ( start == -1 ) return null;
var end = document.cookie.indexOf( ';', len );
if ( end == -1 ) end = document.cookie.length;
return unescape( document.cookie.substring( len, end ) );
}
function setCookie( name, value, expires, path, domain, secure ) {
var today = new Date();
today.setTime( today.getTime() );
if ( expires ) {
expires = expires * 1000 * 60 * 60 * 24;
}
var expires_date = new Date( today.getTime() + (expires) );
document.cookie = name+'='+escape( value ) +
( ( expires ) ? ';expires='+expires_date.toGMTString() : '' ) + //expires.toGMTString()
( ( path ) ? ';path=' + path : '' ) +
( ( domain ) ? ';domain=' + domain : '' ) +
( ( secure ) ? ';secure' : '' );
}
function deleteCookie( name, path, domain ) {
if ( getCookie( name ) ) document.cookie = name + '=' +
( ( path ) ? ';path=' + path : '') +
( ( domain ) ? ';domain=' + domain : '' ) +
';expires=Thu, 01-Jan-1970 00:00:01 GMT';
}
if(!document.documentElement) { document.documentElement = document.getElementsByTagName('html')[0]; }
window.onload = function() {
if(arguments.callee.done) { return false; } else { arguments.callee.done = true; }
var ulkoasu = document.getElementById('ulkoasu');
if( ulkoasu ) {
ulkoasu = ulkoasu.getElementsByTagName('a');
if( ulkoasu.length ) {
var cookie = getCookie('ulkoasu');
for(var i = 0, maxi = ulkoasu.length; i < maxi; i++) {
var href = ulkoasu[i].getAttribute('href')
if( href ) {
var pos = href.indexOf('?ulkoasu=');
if( pos !== false ) {
var rel = href.substring(pos + 9);
if(!cookie || rel == cookie) {
document.documentElement.setAttribute('id', cookie = rel);
}
ulkoasu[i].setAttribute('rel', rel);
ulkoasu[i].onclick = function() {
var rel = this.getAttribute('rel');
document.documentElement.setAttribute('id', rel);
setCookie('ulkoasu', rel);
return false;
}
}
}
}
}
}
}
if(document.addEventListener)
{document.addEventListener('DOMContentLoaded',window.onload,false)}//@cc_on/*
if(document.readyState)var _=setInterval(function(){if(/loaded|complete/.test(document.readyState)){
clearInterval(_);window.onload()}},10);//@cc_on*/document.write("<script defer id=\"_\" src=\"\"><\/script>");
//@cc_on document.getElementById('_').onreadystatechange=
function(){if(this.readyState=='complete'){window.onload()}}
/*]]>*/</script>
</head>
<body>
<div id="dokumentti">
<h1 id="otsikko">Ulkoasun vaihto</h1>
<ul id="ulkoasu">
<li><a href="?ulkoasu=valkoinen">Valkoinen</a></li>
<li><a href="?ulkoasu=musta">Musta</a></li>
<li><a href="?ulkoasu=sininen">Sininen</a></li>
</ul>
<ul id="valikko">
<li><a href="">Etusivu</a></li>
<li><a href="">Välisivu</a></li>
<li><a href="">Takasivu</a></li>
<li><a href="">Jokin muu sivu</a></li>
</ul>
<div id="sisalto">
<h2>Testisivu</h2>
<p>Tämä sivu testaa ulkoasun vaihtokoodia.</p>
</div>
</div>
</body>
</html>En kommentoinut koodia, joten täytyy tähän vähän pistää selontekoa:
1) PHP tarkistaa ulkoasu-parametrin ja asettaa sivun <html>-elementtiin sen ID:nä, jos se löytyy. PHP ei sen kummemmin tarkista onko arvo sopiva vaiko ei, mutta sillä kuitenkin varmistetaan sen verran ettei voida mitä tahansa HTML:ää sotkea rikkomaan sivua tai aiheuttamaan ongelmia tietoturvan suhteen. Halutessaan ulkoasulistan voi määrittää PHP:lla ja laittaa PHP generoimaan tarvitun HTML:n, jolloin saa myös täydellisen tarkistuksen epämääräisen hakkerointiyrittelyn varalta.
2) CSS:ssä on yksinkertainen ID-referointi eri ulkoasuihin. Aloittaa rivin vaan aina #ulkoasunnimi, niin saa kustomoidun säädön kyseistä ulkoasua varten. Kaikkia ulkoasuja varten voi yksinkertaisesti jättää säännön pois.
3) HTML:ssä on lista, joka vaihtaa ulkoasut PHP:n välityksellä. Hyvin yksinkertaisia href="?ulkoasu=ulkoasunnimi" -tyylin linkkejä. Lista tunnistetaan JavaScriptin puolelta ID:stä ulkoasu.
4) JavaScriptin alussa on PHP-tyyliset getCookie, setCookie ja deleteCookie -funktiot helpottamassa elämää.
5) JavaScriptin lopussa on nelirivinen pätkä, jolla pyritään saamaan ulkoasu käyttöön välittömästi kun sivun HTML on ladattu kokonaan palvelimelta. Jos mitään käytettyä tapaa ei tueta, niin sitten ulkoasunvaihtokoodi tulee käyttöön vasta kun kaikki sivun sisältö, kuvat mukaanlukien, on ladattu (window.onload).
6) Näiden kahden välissä on varsinainen koodinpätkä, joka hakee ulkoasu-elementin, etsii siitä kaikki linkit, tarkistaa löytyykö linkkien osoitteesta pätkä ?ulkoasu= ja sitten asettaa linkkien rel-attribuutiksi ulkoasun nimen. Lisäksi tietenkin linkkien klikkaamiseen lisätään funktio, joka estää normaalin linkkikäyttäytymisen ja vaihtaa sivun ID:n lennosta, kuin myös päivittää selaimen keksin.
Tällä tavoin on täydellisesti varmistettu, että ulkoasun vaihtaminen onnistuu aina, ja jos JavaScript on toiminnassa niin ulkoasu vaihtuu välittömästi ilman ikäviä sivun uudelleenlataamisia, ja silti seuraavaa sivua ladatessa valittu ulkoasu on käytössä. Ainut heikkous on siinä, että jos keksit on estetty tai kytketty pois päältä, niin ulkoasu ei jää muistiin. Olisi kuitenkin aikamoista laitella jokaiseen sivustonsisäiseen linkkiin ulkoasukoodia...
(mod. muutama rivi jaettu kahteen osaan, jotta sivu ei venyisi)
Aihe on jo aika vanha, joten et voi enää vastata siihen.