Random logo & bakgrunn

[frisyre]

Hei.

 

Er det noen som har et script eller vet en eventuell måte å gjøre så hver gang en side blir oppdatert så bytter logoen seg, samtidig som bakgrunnen på siden skal bytte seg til en farge/bilde i samme farge?

 

Eks: MTV.com

 

 

Annen forklaring:

Random logo

Random bakgrunn

 

Men disse to skal ha en sammenheng med hverandre slik at ikke en grønn logo kombineres med en gul bakgrunn.

 

Takk på forhånd

[datech]

Hei

 

Det er vel mange måter å oppnå dette på.

Går å lage et tilfeldig siffer og da navngi bakgrunnsbilde og logo med ett siffer til slutt eks. logo1.png og bakgrunn1.png, som da vil vises hvis det tilfeldige sifferet blir 1.

 

Vet ikke om det er mulig å modifisere php skriptet på denne siden til å matche logo/bakgrunn

easy-random-css-backgrounds

 

Går vel også å lage ekstra CSS filer som overstyrer bakgrunn og logo

Ved javascript kan det vel bli noe ala:

 

window.onload = function(e) {

var rndNum=Math.floor(Math.random()*3);

var includeFile = 'cssekstra' + rndNum +'.css';

var cssNode = document.createElement('link'); 

cssNode.setAttribute('rel', 'stylesheet'); 

cssNode.setAttribute('type', 'text/css'); 

cssNode.setAttribute('href', includeFile); 

document.getElementsByTagName('head')[0].appendChild(cssNode); 

}

 

rndNum blir et tilfeldig siffer, enten 0, 1 eller 2.

da er det mulig å lage cssekstra0.css, cssekstra1.css og cssekstra2.css der du endrer background og logo.

 

F.eks hvis du i ditt stilark har

body {
background: #fff;
}

 

 

så kan du i cssekstra0.css skrive

body {
background: #000;
}

 

Når da det tilfeldige siffer blir 0 vises cssekstra0.css og bakgrunnsfarge blir svart.

Verdt å merke seg at det du har i ditt opprinnelige stilark for background og logo, vil i utgangspunktet ikke vises siden cssekstra[siffer].css filene vil overskrive det. Det er kun de uten støtte for javascript som vil se det.

Men det er jo bare å legge det samme som du har i ditt opprinnelige stilark i en av cssekstra[siffer].css filene.

 

En annen ting som også er verdt å merke seg er at dette er skrevet i halvsøvne, ikke testet, slik at det kan godt hende at det ikke fungerer. Tanken var nå god

[Stian Jacobsen]

Du kan også bruke php

<?php
$logo_array = array(
'logo1.png',
'logo2.png',
'logo3.png'
);

$bg_array = array(
'bg1.png',
'bg2.png',
'bg3.png'
);

$total_logo = count($logo_array);
$total_bg = count($bg_array);

$logo = (mt_rand()%$total_logo); 
$bg = (mt_rand()%$total_bg); 
?>
<style type="text/css">
body {
   background: url(<?=$bg_array[$bg];?>) no-repeat top left;
}
.header h1 {
   background: url(<?=$logo_array[$logo];?>) no-repeat top left;
}
</style>

[frisyre]

Takk for PHP-koden, eneste problemet er at det ikke er noe sammenheng mellom logoen og bg'en virker det som. For jeg får f.eks grønn logo mot rød bakgrunn noen ganger :S

[datech]

Takk for PHP-koden, eneste problemet er at det ikke er noe sammenheng mellom logoen og bg'en virker det som. For jeg får f.eks grønn logo mot rød bakgrunn noen ganger :S

 

Du kan jo endre PHP koden til Stian, der du heller setter et fast siffer for antall bilder

$total = antall bilder du har

 

og da lage et tilfeldig siffer

 

$tilfeldig_siffer = (mt_rand()%$total);

 

for så navngi bildene med siffer logo1.png, bg1.png osv..

<style type="text/css">
   body {
      background: url(bg<?=$tilfeldig_siffer;?>.png) no-repeat top left;
   }
   .header h1 {
      background: url(logo<?=$tilfeldig_siffer;?>.png) no-repeat top left;
   }
</style>